Question

我正在尝试制作带有3个图像的图像滑块，我想要的是当我点击下一个按钮时，下一个图像应该一次只显示一个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高度/宽度与overflow：hidden一起定义，因此在显示图像时您无法看到图像。要演示，请删除＆＃34; .container ul {width：620px;溢出：隐藏;高度：320;}＆＃34;样式，然后单击下一步。

我会用这样的方法简化你的方法：

$(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/

图像滑块无法正常工作

1 个答案: