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标签中并显示下一个图像，这样当从左到右时动画就会显得平滑，因为添加的图像仍然会被隐藏。

这是我用来使动画看起来更流畅的一些代码。（我没有修改你使用的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});
        });
    });
 });

Jquery - Carousel上一个按钮

2 个答案: