2

我用我从网上捡到的比特制作了一个自定义的 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'});  
});
}

它是从几个例子中被屠杀的。

碰巧我无法按我的意愿工作。

4

1 回答 1

4

它不起作用的原因是动画功能没有被触发。通过仅设置持续时间，轮播将根据您的要求正确运行。

//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 插件或小部件，以便于重用。

于 2012-10-10T17:15:37.973 回答