制作幻灯片旋转

Question

我在与一个HTML5/jQuery的幻灯片系统概念麻烦......

我想要的图像不断旋转，无需停止。我现在设置的方式是在幻灯片用完时将左侧的余量更改为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并重新初始化您的幻灯片。

Answer 2

我会认真反思你的方法。只是将更多的DOM元素加入无穷大是非常低效的，并且可能会成为无障碍的噩梦。

我建议你看看jQuery Cycle plugin - 这很容易实现，并允许你无限循环。