Question

我目前正在开发一个jQuery轮播，它可以在所有浏览器中正常工作，除了最后和第一项没有循环以创建无限轮播的事实

这是js

$(document).ready(function() {
    //move the last list item before the first item. The purpose of this is if the user clicks previous he will be able to see the last item.
    $('#profile-container ul li:first').before($('#profile-container ul li:last'));

    //when user clicks the image for sliding right
    $('#right_scroll img').click(function(){

        //get the width of the items ( i like making the jquery part dynamic, so if you change the width in the css you won't have o change it here too ) '
        var item_width = $('#profile-container ul li').outerWidth() + 20;

        //calculate the new left indent of the unordered list
        var left_indent = parseInt($('#profile-container ul').css('left')) - item_width;

        //make the sliding effect using jquery's animate function
        $('#profile-container ul').animate({'left' : left_indent},{queue:false, duration:500},function() {

            //THIS LINE ISN'T WORKING (it's how the infinite effects is made)
            $('#profile-container ul li:last').after($('#profile-container ul li:first'));

            //THIS LINE ISN'T WORKING
            $('#profile-container ul').css({'left' : '-100px'});
        });
    });

    //when user clicks the image for sliding left
    $('#left_scroll img').click(function(){

        var item_width = $('#profile-container ul li').outerWidth() + 20;

        /* same as for sliding right except that it's current left indent + the item width (for the sliding right it's - item_width) */
        var left_indent = parseInt($('#profile-container ul').css('left')) + item_width;

        $('#profile-container ul').animate({'left' : left_indent},{queue:false, duration:500},function(){

        /* THIS LINE ISN'T WORKING */
        $('#profile-container ul li:first').before($('#profile-container ul li:last'));

        /* THIS LINE ISN'T WORKING /*
        $('#profile-container ul').css({'left' : '-100px'});
        });

    });
});

由于某种原因//得到第一个列表项行只是不起作用。

这是html

    <div id="profile-wrapper">
        <div id='left_scroll'><img src="<?php echo get_template_directory_uri(); ?>/library/images/left.png" /></div>  
        <div id="profile-container">
            <ul>
                <li><a href="#" class="profile-image image-1"></a></li>
                <li><a href="#" class="profile-image image-2"></a></li> 
                <li><a href="#" class="profile-image image-3"></a></li>
                <li><a href="#" class="profile-image image-4"></a></li>
                <li><a href="#" class="profile-image image-5"></a></li>
            </ul>
        </div>
        <div id='right_scroll'><img src="<?php echo get_template_directory_uri(); ?>/library/images/right.png" /></div>
    </div>

最后是css

#profile-wrapper {
display: table;  
margin: 20px auto;
}

#profile-container {
float:left; /* important for inline positioning */  
width: 390px; /* important (this width = width of list item(including margin) * items shown */  
overflow: hidden;  /* important (hide the items outside the div) */ 
}

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

#profile-container ul li {
position: relative;
float: left; /* important for inline positioning of the list items */
width:80px;  /* fixed width, important */
/* non-important styling bellow */
background-color: #f5f5f5;
height: 80px;
border-radius: 95px;
-khtml-border-radius: 95px;
-moz-border-radius: 95px;
-webkit-border-radius: 95px;
margin-right: 20px;
z-index: 100;
}

#left_scroll, #right_scroll {
height: 80px; 
width: 80px;
-khtml-border-radius: 95px;
-moz-border-radius: 95px;
-webkit-border-radius: 95px;
position: relative;
z-index: 100;
float: left;
margin: 20px 20px;
}

#left_scroll img, #right_scroll img{
/*styling*/
cursor: pointer;
cursor: hand;
}

.image-1 {
background: url('../../library/images/profiles/1.jpg');
background-position: center;
}

.image-2 {
background: url('../../library/images/profiles/2.jpg');
background-position: center;
}

.image-3 {
background: url('../../library/images/profiles/3.jpg');
background-position: center;
}

.image-4 {
background: url('../../library/images/profiles/4.jpg');
}

.image-5 {
background: url('../../library/images/profiles/5.jpg');
background-position: center;
}

.profile-image {
display: block;
height: 70px;
width: 70px;
position: relative;
top: 5px;
left: 5px;
border-radius: 90px;
-khtml-border-radius: 90px;
-moz-border-radius: 90px;
-webkit-border-radius: 90px;
}

任何输入都会有所帮助......我想我已经涵盖了所有内容。

非常感谢

克里斯

Answer 1

替换以下两个实例：

$('#profile-container ul').animate({'left' : left_indent},{queue:false, duration:500},function() {

使用：

$('#profile-container ul').animate({'left' : left_indent},500,function() {

Jquery Carousel没有循环

1 个答案: