我有一个自定义内容滑动条,每隔5秒滑动一次。滑块也有下一个和上一个功能。
问题:
-
当我点击下一步时,幻灯片不会立即发生
-
点击next/prev后,滑块开始快速滑动
我想做的:
1。当我点击next/prev时,我希望滑块立即滑动,而不需要等待5秒的间隔。当幻灯片完成后,将时间间隔重置为默认值5秒。
<div id="content-slide">
<div id="content-slide-container">
<div class="content content-1"><h2>1</h2></div>
<div class="content content-2"><h2>2</h2></div>
<div class="content content-3"><h2>3</h2></div>
<div class="content content-4"><h2>4</h2></div>
<div class="content content-5"><h2>5</h2></div>
<div class="content content-6"><h2>6</h2></div>
<div class="content content-7"><h2>7</h2></div>
<div class="content content-8"><h2>8</h2></div>
<div class="content content-9"><h2>9</h2></div>
<div class="content content-10"><h2>10</h2></div>
<div class="content content-11"><h2>11</h2></div>
<div class="content content-12"><h2>12</h2></div>
<div class="content content-13"><h2>13</h2></div>
<div class="content content-14"><h2>14</h2></div>
<div class="content content-15"><h2>15</h2></div>
<div class="content content-16"><h2>16</h2></div>
</div>
</div>
<div id="navigation">
<span id="prev-slide">Prev</span>
<span id="next-slide">Next</span>
</div>
css #content-slide {
width: 200px;
height: 100px;
position: relative;
overflow: hidden;
margin: 0 auto;
}
#content-slide-container{
width: 3200px;
height: 100px;
}
.content {
width: 200px;
height: 100px;
background-color: #FF1493;
float: left;
}
.content h2{
font-size: 25px;
text-align: center;
}
#navigation{
width: 800px;
height: 20px;
margin: 0 auto;
}
#prev-slide{
width: 100px;
height: 20px;
float: left;
background-color: #000000;
text-align: center;
color: #FFFFFF;
cursor: pointer;
}
#next-slide{
width: 100px;
height: 20px;
float: right;
background-color: #000000;
color: #FFFFFF;
text-align: center;
cursor: pointer;
}
js
$(document).ready(function(){
var foo = {
content_width : 200,
box : $("#content-slide-container"),
interval : 0,
counter : 1,
pause : 5000,
bar : false
};
function startSlider(){
foo.interval = setInterval(function(){
// Next
if(foo.bar){
foo.box.animate({'marginLeft':'+='+(foo.content_width)});
foo.counter--;
if(foo.counter<= 1){
foo.bar = false;
}
// Prev
}else{
foo.box.animate({'marginLeft':'-='+(foo.content_width)});
foo.counter++;
if(foo.counter>=16){
foo.bar = true;
}
}
},foo.pause);
}
startSlider();
function pauseSlider(){
clearInterval(foo.interval);
}
foo.box.on('mouseenter',pauseSlider).on('mouseleave',startSlider);
$('#prev-slide').click(function(){
if(foo.counter>1){
foo.bar = true;
startSlider();
}
});
$('#next-slide').click(function(){
if(foo.counter<16){
foo.bar = false;
startSlider();
}
});
});
这里的JSFIDDLE
我对你的function
做了一些更新,如下所示:
参见内联注释
$(document).ready(function(){
var foo = {
content_width : 200,
box : $("#content-slide-container"),
interval : 0,
counter : 1,
pause : 5000,
bar : false
};
function startSlider(){
foo.interval = setInterval(function(){
// Next
if(foo.bar){
slideLeft()//keep sliding left in a separate function
// Prev
}else{
slideRight()////keep sliding right in a separate function
}
},foo.pause);
}
//2 new functions for slideLeft and slideRight
function slideLeft(){
foo.box.animate({'marginLeft':'+='+(foo.content_width)});
foo.counter--;
if(foo.counter<= 1){
foo.bar = false;
}
}
function slideRight(){
foo.box.animate({'marginLeft':'-='+(foo.content_width)});
foo.counter++;
if(foo.counter>=16){
foo.bar = true;
}
}
//end
startSlider();
function pauseSlider(){
clearInterval(foo.interval);
}
foo.box.on('mouseenter',pauseSlider).on('mouseleave',startSlider);
$('#prev-slide').click(function(){
if(foo.counter>1){
foo.bar = true;
pauseSlider(); //on click clear interval
slideLeft() //call slideLeft
startSlider() //start the slide again with interval
}
});
$('#next-slide').click(function(){
if(foo.counter<16){
foo.bar = false;
pauseSlider() //on click clear interval
slideRight() //slide Right
startSlider() //start it again
}
});
});
您应该将代码移动到setPrev和setNext函数。它们应该与startSlider函数处于同一级别。此外,您应该清除$('#prev-slide').click(function(){
和$('#next-slide').click(function(){
之后的间隔