0

我正在尝试制作图像滑块，以下是我的代码：

HTML

<div class="slider_mian_cont">
  <div class="slider_inner">
        <ul>
            <li><img src="images/one.jpg" width="940" height="350" alt=" " /></li>
            <li><img src="images/two.jpg" width="940" height="350" alt=" " /></li>
            <li><img src="images/three.jpg" width="940" height="350" alt=" " /></li>
        </ul>
    </div>
</div>
<div id="next"><a href="#">next</a></div>

jQuery

$(document).ready(function(e) {
    var len = $('.slider_mian_cont ul li').length;
    var wd = $('.slider_mian_cont ul').width();
    var mn = $('.slider_inner').width(wd*len);
    var testa = $('.slider_mian_cont ul li').width(); 
    $('#next').click(function(){  
        var leftValue = $('.slider_inner').position().left;
        //console.log('leftValue : ' + leftValue + ',  testa : ' + testa);
        var movedValue = leftValue - testa;
        //console.log('movedValue : ' + movedValue);
        $('.slider_inner').animate({ left: movedValue }, 200 )
        })
});

CSS

.slider_mian_cont{width:940px; height:350px; overflow:hidden; position:relative;}
.slider_inner{position:absolute;}
.slider_mian_cont ul{margin:0; padding:0; }
.slider_mian_cont ul li{margin:0; padding:0; float:left; width:940px; height:350px; list-style:none;}

我只想设置条件，如果最后<li>来棕褐色“下一步”按钮停止工作。

4

2 回答 2

0

你可以试试这个，这会奏效

$(document).ready(function(e) {
    var len = $('.slider_mian_cont ul li').length;
    var wd = $('.slider_mian_cont ul').width();
    var mn=len*wd;
    //var mn = $('.slider_inner').width(wd*len);
    var testa = $('.slider_mian_cont ul li').width(); 
    //console.log(len, wd);
    //console.log(mn);
    $('#next').click(function(){ 
        var leftValue = $('.slider_inner').position().left;
        //console.log(leftValue);
        var movedValue = leftValue - testa;
        var posv=Math.abs(leftValue)
        var mix= posv+testa+wd;
        console.log(mix , mn);
        //$(this).toggle(mn <= mix)
        if(mix == mn){ $('#next').toggle();}
        $('.slider_inner').animate({ left: movedValue }, 200 )
    });

});
于 2012-12-04T10:04:32.290 回答
-1

next以下将根据最后到达结束隐藏/显示您的按钮

$(document).ready(function(e) {
    var len = $('.slider_mian_cont ul li').length;
    var wd = $('.slider_mian_cont ul').width();
    var mn = $('.slider_inner').width(wd * len);
    var testa = $('.slider_mian_cont ul li').width();
     /* calculate max left*/
    var maxLeft = len * testa;

    $('#next').click(function() {
        var leftValue = $('.slider_inner').position().left;

        var movedValue = leftValue - testa;
        /* hide or show "#next" depending on end or not*/ 
        $(this).toggle(movedValue >= maxLeft);    

        $('.slider_inner').animate({
            left: movedValue
        }, 200)
    })
});
于 2012-12-04T05:14:04.263 回答