Javascript slideshow to css

Question

在我的幻燈片中顯示幻燈片的圖像，但我希望它是div運行，而不是圖像。我怎麼能做到這一點？

<img src="img/slide1.png" name="slide" width="100%" height="200" /> 
<script> 
<!-- 
    var image1=new Image() 
    image1.src="img/slide1.png" 
    var image2=new Image() 
    image2.src="img/start.png" 
    var image3=new Image() 
    image3.src="img/start1.png" 

    //variable that will increment through the images 
    var step=1 
    function slideit(){ 
     //if browser does not support the image object, exit. 
     if (!document.images) 
      return 
     document.images.slide.src=eval("image"+step+".src") 
     if (step<3) 
      step++ 
     else 
      step=1 
     //call function "slideit()" every 5 seconds 
     setTimeout("slideit()",5000) 
    } 
    slideit() 
//--> 
</script> 

而且如果可能我也不想寫文成的div類，如果你幫我，它是一個真正的大感謝：d

Answer 1

假設你在你的項目中使用jQuery，有Div的運行因爲幻燈片可以很容易地使用jQuery插件如jQuery Cycle

使用jQuery Cycle旋轉div的example。請記住查看源代碼。

相關一塊配置的jQuery週期是：

<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('.slideshow').cycle({ 
     fx: 'scrollLeft', 
     pager: '#nav' 
    }); 
}); 
</script> 

您可以使用「延遲：-5000」，使其每5秒滑動。

Answer 2

您可以使用setInterval函數和更改backgroundImage div的屬性將完成任務。

<div id="slider-container" style="width:100%;height:200px;"></div> 
<script type="text/javascript"> 
    var counter=0; 
    var no_of_images=3; 
    var image_name; 
    setInterval(function(){ 
    image_name=counter%no_of_images; 
    document.getElementById("slider-container").style.backgroundImage="url(./slide"+image_name+".jpg)"; 
    counter++; 
    }, 5000); 
</script> 

你可以實現animations in javascript（如果你不能使用jQuery）。