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