Question

HTML代码 我正在创建jquery图像滑块和该图像滑块的html和css代码。

<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>

Answer 1

我改变了你的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);
    });
});

Answer 2

我对它进行了测试，并且正常运行 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);
                });
            });

Jquery图像滑块上一个按钮

2 个答案: