Question

为什么此前一个按钮不起作用？我做错了什么？我是jQuery的新手！出于这个原因，我找不到bug。甚至我不明白下一个按钮在做什么以及参数是如何工作的！任何人都可以帮我搞清楚吗？谢谢。

这是我的代码

<!DOCTYPE html>
<html lang="en">
<head>
<title>The slider</title>
<style>
*{margin: 0;padding: 0;}
body{width: 800px;margin: 100px auto 0;}


#slider-nav{display: none;margin-top: 1em;}
#slider-nav button{
    padding: 1em;
    margin-right: 1em;
    border-radius: 10px;
    cursor: pointer;
}

.slider{
    width: inherit;
    height: 500px;
    overflow: scroll;
}

.slider ul{
    width: 10000px;
    list-style: none;
}

.slider li{float: left;}
</style>
</head>
<body>

<div class="slider">
    <ul>
        <li><img src="img/img1.jpg" alt=""></li>
        <li><img src="img/img2.jpg" alt=""></li>
        <li><img src="img/img3.jpg" alt=""></li>
        <li><img src="img/img4.jpg" alt=""></li>
    </ul>
</div>

<div id="slider-nav">
    <button data-dir="prev">Previous</button>
    <button data-dir="next">Next</button>
</div>



<script src="jquery-1.12.0.min.js"></script>
<script>(function ( $  ) {
var sliderul=$("div.slider").css("overflow","hidden").children("ul"),
    imgs=sliderul.find("img"),
    imgWidth=imgs[0].width,
    imgsLen=imgs.length,
    current=1,
    totalImgsWidth=imgsLen*imgWidth;


$("#slider-nav").show().find("button").on("click",function(){
    var direction=$(this).data("dir"),
        loc=imgWidth; //800

    // update the current 
    (direction==="next") ? ++current : --current;

    //if first image

    if( current === 0) {
        current = 4;
        loc=totalImgsWidth;
        direction === "next";


    } else if ( current - 1 === imgsLen) {
        current=1;
        loc = 0;
    }
    transition(sliderul,loc, direction);
});

//container what are we manuplating ! It's probably sliderul ! 
function transition( container,loc, direction){
    var unit;

    if(direction && loc !== 0){
        unit= (direction === "next") ? "-=" : "+=";
    }

    container.animate({
       "margin-left": unit ? (unit + loc):loc
    })
}
})(jQuery);</script>
</script>
</body>
</html>

jQuery Slider上一个按钮问题

0 个答案: