在按下最后一个按钮(应该是最后一张幻灯片)后,div中的滑动位置发生变化而与eq(n)值无关。我的意思是:
例如n是1,我按下最后一个按钮它变为3,滑动应该是最后一个。但它不是
$(function(){
var k = 1, //interval periods.
rem = 0; //remainder of the division of k value by 3
setInterval(function(){
if (rem == 0) { //to be able to switch picture without having to wait for slide to change I use remainder of division by 3 for slider. So that slide change appears in every 1.5 seconds, but I have 3 periods of main interval ( 500ms) when I can interact with slider.
n = Math.floor(k/3) // the actual value of slide from 0 to 3
$('.slider > :first-child').appendTo('.slider').fadeOut(1000);
$('.slider > *').eq(n).prependTo('.slider').fadeIn(1000);
alert ("picture="+n+" K="+k);
}
if (k<11) {k++} //it should be 9, but to have 1.5 seconds between 3 and 0 it is 11
else if (k>=11) {k=0};
rem = k % 3;
}, 500);
$('.last').click(function(){
k=9; //k=9 gives n = 3
rem=0; //rem is 0 and slide should be shown almost instantly (in 500ms).
});
&#13;
.slider {
position:absolute;
width:1152px;
height:768px;
left: 10px;
}
.slider img {
position:absolute;
left:0;
top:0;
width:1152px;
height:768px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.slider-controller{
display: block;
position: absolute;
top: 840px;
left: 10px;
}
.slider-controller li {
display: inline;
position: relative;
width: 64px;
height: 64px;
}
.pressed{
top: 2px;
left: 2px;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<body>
<div class="slider">
<img src="gallery/1.jpg"/>
<img src="gallery/2.jpg"/>
<img src="gallery/3.jpg"/>
<img src="gallery/4.jpg"/>
</div>
<ul class="slider-controller">
<li class="last"><img src="img/last.png"/></li>
</ul>
</body>
&#13;
答案 0 :(得分:0)
问题是eq(n)在滑块的最后一次更改中搜索子元素
我有appendTo和prependTo,它会破坏图像的所有层次结构。即使没有&#34;最后一个按钮&#34; eq每次递增1并且由于元素每次移动而带有进展元素
我不应该使用这种Jquery方法。
并选择了别的东西。但我不知道应该使用什么。