Question

我已经从我从网上拾取的位置制作了一个自定义jQuery轮播，但我无法正常工作。

所有这一切都是旋转木马工作但保持向左滑动。经过一些调试后，我发现carousel_ul的左边继续按图像宽度减去但不会像我认为的那样返回-960。

我在这里看过一些关于旋转木马的文章，但没有一篇文章使用我想要的方法。

这是我的代码：

HTML：

<div id="carousel_container">
        <div id="carousel_inner">   
            <ul id="carousel_ul">
                <li>
                    <img src="http://static.shopify.com/s/files/1/0167/9164/t/5/assets/carousel-item-1.jpg?1321" alt="" />
                </li>
                <li>
                        <img src="http://static.shopify.com/s/files/1/0167/9164/t/5/assets/carousel-item-2.jpg?1321" alt="" />
                </li>
                <li>
                        <img src="http://static.shopify.com/s/files/1/0167/9164/t/5/assets/carousel-item-3.jpg?1321" alt="" />
                </li>
                <li>
                        <img src="http://static.shopify.com/s/files/1/0167/9164/t/5/assets/carousel-item-4.jpg?1321" alt="" />
                </li>
            </ul>                       
        </div>
    </div>

CSS：

    #carousel_ul {  
position:relative;  
left:-960px; /* important (this should be negative number of list items width(including margin) */  
list-style-type: none; /* removing the default styling for unordered list items */  
margin: 0px;  
padding: 0px;  
width:9999px; /* important */  
/* non-important styling bellow */  
padding-bottom:0px;  
}  

#carousel_ul li{  
float: left; /* important for inline positioning of the list items */  
width:960px;  /* fixed width, important */  
/* just styling bellow*/  
padding:0px;  
height:300px;  
background: #000000;  
margin-top:0px;  
margin-bottom:0px;  
margin-left:0px;  
margin-right:0px;  
}  

#carousel_ul li img {  
.margin-bottom:-4px; /* IE is making a 4px gap bellow an image inside of an anchor (<a href...>) so this is to fix that*/  
/* styling */  
cursor:pointer;  
cursor: hand;  
border:0px;  
}

jQuery的：

jQuery(document).ready(function ($) {
//rotation speed and timer
var speed = 2000;
var run = setInterval('rotate()', speed);   

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

//a timer will call this function, and the rotation will begin :)  
function rotate() {
var item_width = jQuery('#carousel_ul li').outerWidth() ; 

//calculate the new left indent of the unordered list  
var left_indent = parseInt(jQuery('#carousel_ul').css('left')) - item_width;  

//alert(left_indent);

//make the sliding effect using jquery's anumate function '  
jQuery('#carousel_ul').animate({'left' : left_indent},{queue:false, duration:1000},function(){  

    //get the first list item and put it after the last list item (that's how the infinite effects is made) '  
    jQuery('#carousel_ul li:last').after(jQuery('#carousel_ul li:first'));  

    //and get the left indent to the default -960px  
    jQuery('#carousel_ul').css({'left' : '-960px'});  
});
}

这是从几个例子中剔除的。

碰巧我无法按照自己的意愿去工作。

Answer 1

它不起作用的原因是因为animate函数没有被触发。只需设置持续时间，旋转木马就能正常运行，符合您的要求。

//make the sliding effect using jquery's anumate function '  
jQuery('#carousel_ul').animate({'left' : left_indent}, 1000,function(){  

    //get the first list item and put it after the last list item (that's how the infinite effects is made) '  
    jQuery('#carousel_ul li:last').after(jQuery('#carousel_ul li:first'));  

    //and get the left indent to the default -960px  
    jQuery('#carousel_ul').css({'left' : '-960px'});  
});

一旦您对旋转木马感到满意，我建议您将其重构为jQuery插件或小部件，以便于重复使用。

jQuery（自定义）轮播不重复

1 个答案: