javascript - 制作幻灯片旋转

Question

我在 HTML5/jQuery 幻灯片系统的概念上遇到了问题...

我希望图像不停地旋转。我现在设置它的方式是当我用完幻灯片时将 margin-left 改回 0 以转到第一张图像。我宁愿让它无限期地继续下去。

当我在做的时候...有没有办法从样式表中读取属性？如果我可以让用户将脚本指向样式表并从那里提取大小和内容，那就更好了。

演示:http://bearce.me/so/slideshow

脚本(主要集中在CSS版本，我会把它转换成jQuery版本，一旦我明白如何去做):

// JavaScript Document
var slides = 4; // number of slides
var time = 3; // time per slide (in seconds)
var width = 600; // width of slideshow (ex: 600)
var transition = .5 // transition time (in seconds) (for older browsers only, edit css for newer)
window.onload = function start() {
    if(Modernizr.csstransitions) {
        cssslide();
    } else {
        jqueryslide();
    }   
}
function cssslide() {
    document.getElementById("container").style.width=(width * slides) + "px";
    var num = 0;
    setInterval(function() {
        num = (num + 1) % slides;
        document.getElementById('container').style.marginLeft = (("-" + width) * num) + "px"; 
    }, time * 1000);
}
function jqueryslide() {
    $("#container").width((width * slides) + 'px');
    var num = 0;
    setInterval(function() {
        num = (num + 1) % slides;
        $("#container").animate({marginLeft: (("-" + width) * num) + "px"},{duration: (transition * 1000)});
    }, time * 1000);
}

编辑:澄清一下，我不希望它不断滚动，我希望它滚动，停止几秒钟，滚动，停止，滚动，像它那样停止，而不是一直缩放回到第一张图片，我只想让它继续下去。

Answer 1

当您的幻灯片初始化时，使用 JS 复制您的第一张图片，使标记看起来像这样:

<div id="container">
    <img src="setup/slides/portal2.jpg" />
    <img src="setup/slides/crysis2.jpg" />
    <img src="setup/slides/deadspace2.jpg" />
    <img src="setup/slides/acb.jpg" />
    <img src="setup/slides/portal2.jpg" />
</div>

然后，一旦第 5 张幻灯片(第 1 张幻灯片的副本)可见，清除间隔，将边距重置为 0 并重新初始化幻灯片。