jquery - 图像 slider 无法正常工作

Question

我正在尝试用 3 张图像制作图像 slider ，我想要的是当我单击下一个按钮时，下一张图像应该一次出现，只有一个 li 应该可见

我用索引值试过我想根据提到的索引值显示 li 这是代码

<div class="container">
<ul class="thediv">
<li><img src="images/1.jpg" width="620" height="320" /></li>
<li><img src="images/2.jpg" width="620" height="320" /></li>
<li><img src="images/3.jpg" width="620" height="320" /></li>
</ul>
</div>
<a href="" id="next">Next</a>
<a href="" id="prev">Previous</a> 

这里是 fiidle为了更好的理解

提前致谢

Answer 1

您在单击“下一步”时显示了所有 3 个图像，因为您遍历了所有图像并调用了 show()。但是由于您定义了 ul 高度/宽度以及溢出:隐藏，因此在显示图像时您看不到图像。为了演示，删除“.container ul{ width:620px; overflow:hidden; height:320px;}” 样式，然后单击 Next。

我会用这样的东西来简化你的方法:

$(document).ready(function(){   
    $("#next").click(function(){
          var next = $(".thediv li:visible").next();
          next.show().prev().hide();        
    });

      $("#prev").click(function(){
          var prev = $(".thediv li:visible").prev();
          prev.show().next().hide();       
    });
});   

http://jsfiddle.net/6xt79xwt/21/