如何使jQuery滑块重复?

时间:2019-02-19 12:25:08

标签: jquery

我有这个滑块,我想让它不停地重复!

我想在显示.dtm-bg 1时隐藏.dtm-bg 2和.dtm-bg 3,

在显示.dtm-bg 1时也显示

01/03

,并隐藏其他

有什么解决办法吗?!

HTML

<div class="sliders">
<div class="dtm-bg 1" style="background-image: url("../imgs/img1.jpg");>        </div>
<div class="dtm-bg 2" style="background-image: url("../imgs/img2.jpg");>    </div>
<div class="dtm-bg 3" style="background-image: url("../imgs/img3.jpg");></div>
</div>

<div class="numbers">
<p>01 / 03</p>
<p style="display: none;">02 / 03</p>
<p style="display: none;">03 / 03</p>
</div>

jQuery

var imgArr = $('.dtm-bg').get();
function slide(){
var img = imgArr.shift();
imgArr.push(img);

$(img).delay(3500).show('fade',1500,function(){
  $(this).animate({'background-position-y': '-94em'},3000,function(){
  $(".numbers p:visible").hide()
  $(".numbers p:nth-child(2)").show()
  window.setTimeout(slide,10);
  });
});
}
slide();

0 个答案:

没有答案