无限转盘不工作 [英] Infinite carousel doesnt work

问题描述

尝试看这个旋转木马做无限圈。

Trying see this carousel doing infinite laps. After the last image will see the first image again and before the first see the last image.

使用此

Jquery：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

$(document).ready(function() {  

        $('#carousel_ul li:first').before($('#carousel_ul li:last'));  

        $('#right_scroll img').click(function(){  

            var item_width = $('#carousel_ul li').outerWidth() + 10;  

            var left_indent = parseInt($('#carousel_ul').css('left')) - item_width;  

            $('#carousel_ul').animate({'left' : left_indent},{queue:false, duration:500},function(){  

                $('#carousel_ul li:last').after($('#carousel_ul li:first'));  

                $('#carousel_ul').css({'left' : '-210px'});  
            });  
        });  


        $('#left_scroll img').click(function(){  

            var item_width = $('#carousel_ul li').outerWidth() + 10;  

            var left_indent = parseInt($('#carousel_ul').css('left')) + item_width;  

            $('#carousel_ul').animate({'left' : left_indent},{queue:false, duration:500},function(){  

            $('#carousel_ul li:first').before($('#carousel_ul li:last'));  

            $('#carousel_ul').css({'left' : '-210px'});  
            });  

        });  
  });  

CSS

#carousel_inner { float:left; width:90%; overflow: hidden; }
#carousel_ul {position:relative; left:-210px; list-style-type: none; margin: 0px; padding: 0px; width:9999px; padding-bottom:10px;}
#carousel_ul li{float: left;width:200px; padding:0px; height:110px;background: #FFF;margin-top:10px;margin-bottom:10px;margin-left:5px;margin-right:5px;}
#carousel_ul li img {.margin-bottom:-4px; cursor:pointer; cursor: hand; border:0px;}
#left_scroll, #right_scroll{float:left; height:130px; width:5%;}
#left_scroll img, #right_scroll img{cursor: pointer; cursor: hand;}

http://jsfiddle.net/w35p0xdy/

推荐答案

我无法评论。但你可以有每个李有一个id。然后得到li的长度。然后做什么泥什建议。

I can't comment. But you could have each li's have an id. And then get the length of li. And then do what slime has suggested.

//Load 1st li.
var i = 1;
var no_of_li = $("#carousel_ul li").length;

//On right img click
if(i % no_of_li == 0){
    i=1;
    //Load 1st element.
} else {
    i++;
    //Load i'th element
}

//On left img click
if(i == 1){
    i = no_of_li;
    //load ith element
} else {
    i--;
    //Load ith element
}

这就是我的方法。对不起，如果我不能帮助太多。

Well that's what my approach would be. Sorry if I can't be of much help.

这篇关于无限转盘不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！