Javascript幻灯片放到CSS

Question

in my slideshow its images that slide, but i want it to be divs to run, not images. How i can do it?

<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>

And if its possibly i also wanna to write text into the div class, if you help me, its a really big thanks :D

Answer 1

Assuming you are using jQuery in your project, having Divs running as slideshows can be easily accomplished with a jquery plugin like jQuery Cycle

An example of rotating divs using jQuery Cycle. Remember to view source.

The relevant piece of config for jQuery Cycle is:

<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>

You can use "delay: -5000" to make it slide every 5 seconds.

Answer 2

You can use setInterval function and changing backgroundImage property for a div will do the task.

<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>

You can achieve animations in javascript (if you cannot use jQuery).