我使用以下教程为我的网站制作了视差内容滑块：http://blog.themeforest.net/tutorials/create-a-funky-parallax-background-effect-using-jquery/
我可以很好地运行它，但是想添加自动滚动功能。我通过添加jQuery.serialScroll并使用setInterval来做到这一点，但现在它的工作原理像疯了似的。我猜想滑块现在每5秒滑动3个幻灯片，而不是每5秒滑动1个幻灯片。我不知道如何使其正常工作。
这是我的HTML的一部分：
<body>
<div id="header">
<h1 id="logo">Testing slider</h1>
</div>
<!-- end logo -->
<div id="slider">
<div id="background">
<div id="bg">
</div>
</div>
<!-- end slide background -->
<div id="wrapper">
<ul id="mask">
<li id="box1" class="box">
<a name="box1"><img src="images/slide1.png"></a>
<div class="content">
<div class="inner">
</div>
</div>
</li>
<!-- end box1 -->
<li id="box2" class="box">
<a name="box2"><img src="images/slide2.png"></a>
<div class="content">
<div class="inner">
</div>
</div>
</li>
<!-- end box2 -->
<li id="box3" class="box">
<a name="box3"><img src="images/slide3.png"></a>
<div class="content">
<div class="inner">
</div>
</div>
</li>
<!-- end box3 -->
</ul>
<!-- end mask -->
</div>
<!-- end wrapper -->
</div>
<!-- end Slider -->
<div id="content">
<div id="menu">
<ul id="menuitem">
<li><a href="#box1" class="slide_next"></a></li>
<li><a href="#box2" class="slide_next"></a></li>
<li><a href="#box3" class="slide_next"></a></li>
</ul>
</div>
<!-- end menu -->
</div>
<!-- end content -->
这是令人不安的JS代码：
<script type="text/javascript">
$(document).ready(function() {
$('a.slide_next').click(function () {
$('#wrapper').scrollTo($(this).attr('href'), 800);
setPosition($(this).attr('href'), '#background', '0px', '50px', '100px')
$('a.slide_next').removeClass('selected');
$(this).addClass('selected');
return false;
});
});
setInterval(function() {$('a.slide_next').click()}, 5000);
function setPosition(check, div, p1, p2, p3) {
if(check==='#box1')
{ $(div).scrollTo(p1, 800); }
else if(check==='#box2')
{ $(div).scrollTo(p2, 800); }
else
{ $(div).scrollTo(p3, 800); }
};
</script>
拜托，有谁知道如何使它按应有的方式工作（每5秒滑动1张幻灯片）？
PS。很好，我是该领域的新手;）
最佳答案
我认为您的问题是，您每隔5秒就会触发所有“幻灯片下一个”链接中的所有3个点击事件，因此尝试为每张幻灯片执行onclick代码会很麻烦。
您可以做的是这样的：
//set a global var to keep track of the slide we're on
window.slide = 1
function nextSlide(){
//increase window.slide by 1 (to go to the next slide),
//or if it is 3 return to the first slide
window.slide == 3 ? window.slide = 1 : window.slide++;
//trigger click event on the NEXT slide only
$('a[href=#box'+window.slide+']').click()
}
setInterval(nextSlide,5000);
这样，每隔5秒钟就会触发链接上的单击事件以移动到NEXT幻灯片（并非全部）。
希望这可以帮助！