所以,我有一个幻灯片功能。这是我第一次使用 jQuery 进行幻灯片放映,没有使用其他插件。它是非常基础和硬编码的(我希望这应该不是问题)。
我想实现每8秒自动滚动到下一项的效果,然后在末尾跳到开头。我有一个想法如何去做,但我想通过我的设计实现最佳实践
HTML:
<div id="slideWrap">
<div id="slides">
<ul id="slidePane">
<li><img src="css/images/slides/slide1.png" alt="img1" /></li>
<li><img src="css/images/slides/slide2.png" alt="img2" /></li>
<li><img src="css/images/slides/slide3.png" alt="img3" /></li>
<li><img src="css/images/slides/slide4.png" alt="img4" /></li>
</ul>
</div>
<div id="slideNav">
<ul>
<li class="active"><h2>Packages</h2></li>
<li><h2>Portfolio</h2></li>
<li><h2>Prices</h2></li>
<li><h2>About</h2></li>
</ul>
</div>
</div>
jQuery:
<script>
(function() {
var slider = $('#slides'),
imgWid = $('ul#slidePane img').width(),
imgHeight = -300,
imgs = 4,
imgsHeight = 3200;
$('#slideNav ul li').on('click', function() {
var listSel = $(this),
selImg = $('#slideNav li').index(this);
$(this).addClass('active');
$(this).siblings('li').removeClass('active');
slider.animate({
'margin-top': imgHeight * selImg
});
});
})();
</script>
- 我应该如何以及在哪里应用一项功能,它只是自动垂直滚动 1 到 1 直到点击某些东西(在这种情况下自动功能停止)? *
现场主持人:
http://www.sinsysonline.com/design
如果您喜欢我的 CSS,请告诉我。我觉得这与问题无关。
最佳答案
我想我会用老式的手写方式来做。只是在寻找一种更简单的方法:-(我会在这里发布结果。
关于jQuery:为幻灯片创建自动计时器 - 单击取消,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17508313/