jquery图像滑块前一个按钮

HTML代码 我正在创建jQuery图像滑块和此图像滑块的html和css代码。 jquery图像滑块前一个按钮

<style type="text/css"> 
#slider{overflow: hidden; width: 600px; height: 400px; position: relative; border: 4px solid #CCC; margin: auto;} 
#slider ul{padding: 0; margin: 0; width: 2400px; position: relative; top: 0; left: 0;} 
#slider ul li{list-style: none; float: left;} 
#slider ul li img{width: 600px; height: 400px;} 
.next{position: relative; left: 700px; } 
.prev{position: relative; left: 500px; } 
</style> 

</head> 
<body> 
<div id="slider"> 
    <ul> 
     <li><img src="2.jpg" /></li> 
     <li><img src="3.jpg" /></li> 
     <li><img src="4.jpg" /></li> 
     <li><img src="5.jpg" /></li> 
    </ul> 
</div> 
<button class="next">Next</button> 
<button class="prev">prev</button> 
</body> 
</html>

JS代码 这是其中一个按钮正常图像滑块jQuery的代码，但我试图创建分组按钮的代码，但没有获得成功。

<script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript"> 
     $(function(){ 
      var count = $("#slider ul li").length; 
      var li_w = $("#slider ul li:first").width(); 
      var ul_w = count*li_w; 
      var i = li_w; 
      $(".next").click(function(){ 
       $("#slider ul").animate({"left":-i+"px"}, 1000); 
       i+= li_w; 
       if(i==ul_w){ 
        i=0; 
       } 
      }); 

      $(".prev").click(function(){ 

      }); 
     }); 
    </script>

来源

2015-02-10 Gaurav Kumar

检查这个参考链接，这将帮助你.. [点击]（http://www.uiupdates.com/create-circular-image-gallery-using-jquery /） – Uiupdates 2015-02-10 12:24:33

WOW .. thanx正是我想要的.appreciated男子 – 2015-02-10 12:41:51

我改变你的JavaScript一点，但我认为它更符合逻辑这样。在这里，你可以试一下：http://jsfiddle.net/vkk52bz2/2/

$(function(){ 
    var count = $("#slider ul li").length; 
    var li_w = $("#slider ul li:first").width(); 
    var ul_w = count*li_w; 
    var i = 0; // start with the position 0 
    $(".next").click(function(){ 
     i -= li_w; // subtract the width of a slide 
     if(i==ul_w*-1){ // check if it hit the end 
      i=0; 
     } 
     $("#slider ul").animate({"left":i+"px"}, 1000); 
    }); 

    $(".prev").click(function(){ 
     i += li_w; // add the width of a slide 
     if(i>0){ // check if it hit end 
      i= ((count-1) * li_w) * -1; 
     } 
     $("#slider ul").animate({"left":i+"px"}, 1000); 
    }); 
});

来源

2015-02-10 12:27:45 BrendanMullins

Thanx为您的帮助，但上一个按钮仍然不能正常工作 – 2015-02-10 12:32:02

@GauravKumar哦对不起..我应该先测试它。我更新了帖子 – BrendanMullins 2015-02-10 12:45:49

我感谢您的帮助thanx会使用此代码，因为它最简单...谢谢 – 2015-02-10 12:48:37

我测试了它和它的作品 https://jsfiddle.net/thair/s8hhz415/2/embedded/result/

HTML

<div id="slider"> 
    <ul> 
     <li><img src="http://kelmih.com/Photos/News/31.jpg" /></li> 
     <li><img src="http://kelmih.com/Photos/News/27.JPG" /></li> 
     <li><img src="http://kelmih.com/Photos/News/23.jpg" /></li> 
     <li><img src="http://kelmih.com/Photos/News/24.jpg" /></li> 
    </ul> 
</div> 
<button class="next">Next</button> 
<button class="prev">prev</button>

CSS

#slider{overflow: hidden; width: 600px; height: 400px; position: relative; border: 4px solid #CCC; margin: auto;} 
#slider ul{padding: 0; margin: 0; width: 2400px; position: relative; top: 0; left: 0;} 
#slider ul li{list-style: none; float: left;} 
#slider ul li img{width: 600px; height: 400px;} 
.next{position: relative; left: 100px; } 
.prev{position: relative; left: 0px; }

JS

   $(function(){ 
       var count = $("#slider ul li").length; 
       var li_w = $("#slider ul li:first").width(); 
       var ul_w = count*li_w; 
       var i = 0; 
       $(".next").click(function(){ 
        i+= li_w; 
        if(i>ul_w || i==ul_w){ 
         i=0; 
        } 
        $("#slider ul").animate({"left":-i+"px"}, 1000); 
       }); 
       $(".prev").click(function(){ 
        i-= li_w; 
        if(i<0){ 
         i=ul_w - li_w; 
        } 
        $("#slider ul").animate({"left":-i+"px"}, 1000); 
       }); 
      });

来源

2015-02-10 12:23:52 Thair

它不工作，当我点击下一个，然后我点击上一个按钮，然后它不断减少li_w，但thanx的帮助 – 2015-02-10 12:34:48

jquery图像滑块前一个按钮

回答

相关问题