使用.eq(n)操作Jquery滑块无法正常工作

时间:2015-10-01 06:37:25

标签: jquery slider

在按下最后一个按钮(应该是最后一张幻灯片)后,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;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

问题是eq(n)在滑块的最后一次更改中搜索子元素

我有appendTo和prependTo,它会破坏图像的所有层次结构。即使没有&#34;最后一个按钮&#34; eq每次递增1并且由于元素每次移动而带有进展元素

我不应该使用这种Jquery方法。

并选择了别的东西。但我不知道应该使用什么。