Javascript 幻灯片到 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，使用像 jQuery Cycle 这样的 jquery 插件可以很容易地让 Divs 以幻灯片形式运行。

安example使用 jQuery Cycle 旋转 div。记得查看源代码。

jQuery Cycle 的相关配置是:

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

你可以使用“delay: -5000”让它每5秒滑动一次。