Question

我试图制作一个滑块，用鼠标点击右箭头按钮来更改图像，但是我遇到了一些空白帧。我希望它是无缝的。这是我的代码：

HTML：

<div id="img_slider">
    <img src="../images/proj/1(2).jpg" id="img_1" class="slide_img"/>
    <img src="../images/proj/1.jpg"id="img_2" class="slide_img" />
    <img src="../images/proj/2.jpg" id="img_3" class="slide_img" />
    <img src="../images/proj/3.jpg" id="img_4" class="slide_img" />
    <img src="../images/proj/4.jpg" id="img_5" class="slide_img" />
    <img src="../images/proj/5.jpg" id="img_6" class="slide_img" />
</div>

这是css：

#img_slider{
    background:url(../images/preloader.gif)no-repeat center;
    background-color:rgba(253,251,187,.6);
    background-size:50px;
    overflow:hidden;
    z-index:2;
    height:500px;
}

.slide_img{
    display:none;
    width:100%;
    height:500px;
    z-index:1;
}

.slide_img:first-child{
    display:block;
}

这是javascript：

var count= 1;

function right(){   
    count++;
    if(count>6){
        count=1;    
    }
    $(".item").css("background","#333");
    $("#item_"+count).css("background","#3AF71A");
    $(".slide_img").hide("slide",{direction:'right'},500);
    $("#img_"+count).delay(300).show("slide",{direction:'left'},500);

    if(count==6){
        count=0;
    }
}

非常感谢任何帮助。 0：）

Answer 1

使用.promise()代替.delay()，它会等待动画完成后再继续。

Answer 2

你应该这样：http://jsfiddle.net/v7au9/9/

HTML

<div id="slider_container">
  <div id="img_slider">
    <img src="http://placekitten.com/120/100" id="img_1" class="slide_img"/>
    <img src="http://placekitten.com/120/100"id="img_2" class="slide_img" />
    <img src="http://placekitten.com/120/100" id="img_3" class="slide_img" />
  </div>
</div>

CSS

#slider_container {
  position: relative;
  overflow: hidden;
  width: 120px;
  height: 100px;
}

#img_slider {
  position: absolute;
  left: 0px;
  width: 99999px;
}

img {
  float: left;
}

JS

var count = 1;
var newLeft = 0;

$(document).ready(function() {

  var timer = setInterval(function() {

    newLeft = parseInt($('#img_slider').css('left')) - $('img').width();

    if(count == $('img').length){
        count = 0;
        newLeft = 0;
    }

    $('#img_slider').animate({
        left: newLeft
    });

    count++;

  }, 1000);

});

滑入并同时滑出

2 个答案: