Jquery-旋转木马上一个按钮

Question

下一个按钮很好，但对于上一个按钮，它跳起来并不顺利。提前感谢大家对我的帮助。为什么我的前一个按钮不能作为我的下一个按钮？

HTML

<div class="slide">
        <ul class="wrap-all">
            <li>
                <img src="index.jpg" alt="" />
            </li>
            <li>
                <img src="index1.jpg" alt="" />
            </li>
            <li>
                <img src="index2.jpg" alt="" />
            </li>
            <li>
                <img src="index3.jpg" alt="" />
            </li>
        </ul>
        <div class="arrow">
            <a href="#" class="pre">Previous</a>    
            <a href="#" class="next">Next</a>
        </div>
</div>

CSS

.slide{
     width: 550px;
     margin: 0 auto;
     height: 130px;
     border: 1px solid #cccccc;
     overflow: hidden;
     position: relative;
 }
 ul.wrap-all{
     list-style: none;
     position: relative;
 }
 ul.wrap-all li{
     float: left;
     width: 275px;
 }
 .next{
     position: absolute;
     top: 50%;
     right: 0;
     color: white;
 }
 .pre{
     position: absolute;
     top: 50%;
     left: 0;
     color: white;
 }

JS

$(document).ready(function () { 
    var itemWidth = $('.wrap-all li').outerWidth(true);
    var imageLength = $('.wrap-all li').length;
    var totalImage = itemWidth * imageLength;
    $('.wrap-all').css('width', totalImage);      
        $('.next').click(function(e){
            e.preventDefault();
            $('.wrap-all:not(:animated)').animate({
             left: -itemWidth
            },200,
            function(){
                $('.wrap-all li:last').after($('.wrap-all li:first'));
                $('.wrap-all').css({'left': 0});
            });
        });
        $('.pre').click(function(e){
            e.preventDefault();
           $('.wrap-all:not(:animated)').animate({'left' : +itemWidth}, 200,function(){
            $('.wrap-all li:first').before($('.wrap-all li:last'));
            $('.wrap-all').css({'left' : 0});
            });
        });
     });

Answer 1

首先说明它为什么不能很好地工作，是因为动画在运行之前实际上没有幻灯片中的前一个图像。所以在动画从左向右滑动之后，它添加第一个图像。

解决这个问题的一种方法是将图像包装在另一个div标记中，该标记隐藏第一个图像并显示下一个2，这样，从左到右的动画看起来很平滑，因为添加的图像仍然会被隐藏。

下面是我用来让动画看起来更流畅的一些代码。（我没有修改你使用的JS，所以我不会在这里包含它）

HTML

<div class="slide">
<div class="viewer">
    <ul class="wrap-all">
        <li>
            <img src="http://ckinknoazoro.files.wordpress.com/2011/06/random.jpg" alt="" />
        </li>
        <li>
            <img src="http://ts3.mm.bing.net/th?id=H.4936237002655974&pid=1.7" alt="" />
        </li>
        <li>
            <img src="http://images2.fanpop.com/images/photos/5700000/Random-random-5719756-1280-800.jpg" alt="" />
        </li>
        <li>
            <img src="http://images2.fanpop.com/image/photos/9400000/Random-random-9449476-1680-1050.jpg" alt="" />
        </li>
    </ul>
</div>
<div class="arrow">
    <a href="#" class="pre">Previous</a>    
    <a href="#" class="next">Next</a>
</div>
</div>

CSS

 img {
    width: 100px; 
    height: 100px; 
}
.viewer{
    width:800px;
    overflow:hidden;
    margin-left: -200px; 
}
.slide{
     width: 600px;
     height: 130px;
     border: 1px solid #cccccc;
     overflow: hidden;
     position: relative;
     margin:auto;
 }
 ul.wrap-all{
     list-style: none;
     position: relative;
 }
 ul.wrap-all li{
     float: left;
     width: 275px;
 }
 .next{
     position: absolute;
     top: 50%;
     right: 0;
     color: black
 }
 .pre{
     position: absolute;
     top: 50%;
     left: 0;
     color: black
 }

我希望这能帮助

Answer 2

我想是的

$(document).ready(function () { 
var itemWidth = $('.wrap-all li').outerWidth(true);
var imageLength = $('.wrap-all li').length;
$('.wrap-all').css({'left': -itemWidth});
var totalImage = itemWidth * imageLength;
$('.wrap-all').css('width', totalImage);      
    $('.next').click(function(e){
        e.preventDefault();
        $('.wrap-all:not(:animated)').animate({
         left: (-2 * itemWidth)
        },200,
        function(){
            $('.wrap-all li:last').after($('.wrap-all li:first'));
            $('.wrap-all').css({'left': -itemWidth});
        });
    });
    $('.pre').click(function(e){
        e.preventDefault();
       $('.wrap-all:not(:animated)').animate({'left' : 0}, 200,function(){
        $('.wrap-all li:first').before($('.wrap-all li:last'));
        $('.wrap-all').css({'left' : -itemWidth});
        });
    });
 });