Question

我是Web开发的新手，我正在尝试使用JQuery创建一个基本的滑块。但是当slide3向左移动时：0在屏幕上移动时仍然可见。我不确定我做错了什么导致这种情况并且很想知道！

＆＃13;

var slide1 = "#slide1";
var slide2 = "#slide2";
var slide3 = "#slide3";

function slideAnimation(moveOut, moveIn, delay1, delay2) {
  setTimeout(function() {
    $(moveOut).animate({
      left: '-100%'
    }, 2000);
    $(moveIn).animate({
      left: '0'
    }, 2000);
  }, delay1);
  setTimeout(function() {
    $(moveOut).hide();
    $(moveOut).animate({
      left: '100%'
    });
    $(moveOut).show();
  }, delay2);
};

function contentSlider() {
  slideAnimation(slide1, slide2, 5000, 5200);
  slideAnimation(slide2, slide3, 10000, 10200);
  slideAnimation(slide3, slide1, 15000, 15200);
};

$(document).ready(function() {
  contentSlider();
});

setInterval(function() {
  contentSlider();
}, 25000);

＆＃13;

.index3 {
  height: 482px;
  width: 100%;
  position: relative;
}
#contentSlider {
  position: absolute;
  width: 100%;
  min-height: 482px;
  overflow: hidden;
}
.slideArea {
  position: absolute;
  width: 300%;
  left: -100%;
  height: 100%;
  line-height: 400px;
  font-size: 50px;
  text-align: center;
  left: 0;
}
#slide1 {
  background: url(Images/slide1bkg.jpg) center;
  height: 100%;
  width: 100%;
  position: absolute;
  display: block;
  left: 0;
}
#slide2 {
  background: url(Images/slide2bkg.jpg) center;
  height: 100%;
  width: 100%;
  position: absolute;
  display: block;
  left: 100%;
}
#slide3 {
  background: url(Images/slide3bkg.jpg) left;
  height: 100%;
  width: 100%;
  position: absolute;
  display: block;
  left: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="index3">
  <div id="contentSlider">
    <!-- slide one content -->
    <div id="slide1" class="slideArea">
      <h5>Slide 1</h5>
    </div>
    <!-- slide two content -->
    <div id="slide2" class="slideArea">
      <h5>Slide 2</h5>
    </div>
    <!-- slide three content -->
    <div id="slide3" class="slideArea">
      <h5>Slide 3</h5>
    </div>
  </div>
  <!-- link to javascript for content slider -->
  <script src="slideshow.js" type="text/javascript"></script>
</section>

＆＃13;

如果您需要更多信息，请随时与我们联系。

谢谢！

Answer 1

你需要hide()回调动画，向左滑动-100％。

function slideAnimation(moveOut, moveIn, delay1, delay2) {
    setTimeout(function () {
        $(moveOut).animate({left: '-100%'},2000,function(){ $(moveOut).hide();});
        $(moveIn).show();       // Added a show() here
        $(moveIn).animate({left: '0'},2000);
    }, delay1);
    setTimeout(function () {
        //$(moveOut).hide();
        $(moveOut).animate({left: '100%'});
        //$(moveOut).show();
    }, delay2);
};

请参阅小提琴：https://jsfiddle.net/Bes7weB/xuurk73s/

JQuery内容滑块问题

1 个答案: