首页 > 解决方案 > 如何使 jquery 滑块重复?

问题描述

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

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

同时显示

01 / 03

当 .dtm-bg 1 显示时,隐藏其他

有什么解决办法吗?!

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();

标签: jquery

解决方案


推荐阅读