Question

我在使用HTML5 / jQuery幻灯片系统的概念时遇到了麻烦......

我想让图像不停地旋转。我现在设置它的方式是通过在我用尽幻灯片时将margin-left返回到0来转到第一个图像。我宁愿让它无限期地继续下去。

虽然我在...但有没有办法从样式表中读取属性？如果我可以让用户将脚本指向样式表并从中拉出大小和内容，那会更好。

脚本（主要关注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 - 这很容易实现，并允许您无限循环。

制作幻灯片旋转

2 个答案: