制作幻灯片旋转

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

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

编辑：为了澄清，我不希望它不断滚动，我希望它滚动，停止几秒钟，滚动，停止，滚动，停止像这样，但不是一直缩回到第一个图像，我只是想要它继续。

来源

2012-02-10 JacobTheDev

已经有很多“无限”旋转木马了。任何理由重新发明车轮？ – j08691 2012-02-10 21:09:40

我想要一个漂亮易用的HTML5版本。另外，我之前建立了这个，我只想完成它大声笑... – JacobTheDev 2012-02-10 21:11:58

啊，忘了我发布了，我猜。无论如何，它不是每个人都回答得很好 – JacobTheDev 2012-02-17 19:18:47

当你的幻灯片初始化，使用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并重新初始化您的幻灯片。

来源

2012-02-10 21:38:43

啊，有趣的想法。唯一的问题，我想我会跑到是它仍然会转换，因为我使用CSS3作为主要动画。我不认为你可以在CSS3元素上使用'jQuery.css（）'，因为它们中的很多仍然使用供应商前缀。我想我可以在每次有人完成循环时复制整个图像集，如果我能想出来...... – JacobTheDev 2012-02-10 21:43:32

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

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

来源

2012-02-17 18:05:07 chipcullen

系统的要点是使用CSS3转换，所以使用jQuery Cycle似乎不适合我在找什么。 – JacobTheDev 2012-02-17 19:18:08

制作幻灯片旋转

回答

相关问题