jquery - 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});
        });
    });
 });