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 に答える