Question

我有一个像下面这样的HTML;

<div class="slider">
  <div class="wrapper">
    <ul class="slides">
      <li class="slidea"><img src="slidea.jpg" alt="" /></li>
      <li class="slideb"><img src="slideb.jpg" alt="" /></li>
      <li class="slidec"><img src="slidec.jpg" alt="" /></li>
    </ul>
  </div>
</div>
<a href="#" id="prev">prev</a>
<a href="#" id="next">next</a>

和这样的CSS;

body{
  margin: 0;
  padding: 0
}
.slider{
  height: 100px;
  background: #9966CC;
  text-align: center;
}
wrapper{
  width: 100px;
}
.slides{
  list-style: none;
}
.slideb,.slidec{
  display: none;
}

我想要实现的是一个简单的图像滑块。有3张图片（可能更多），它们在列表中。除第一个以外的图像设置为display: none;。我希望第二张图像在3秒后变为fadeIn，在3秒后再次变为第三张图像，因此幻灯片显示的间隔为3秒。

我试过了;

setTimeout(function(){
    $('.slideb').fadeIn();
}, 3000);

我怎样才能做出我想要的东西？这是fiddle。

Answer 1

为了使用cycle2.js居中图像（请参阅问题上的注释字符串），您可以在幻灯片初始化后使用以下内容。

$('.cycle-slideshow').on('cycle-before',function(e,opts){

        // move the slides to the center of the box

        $('.cycle-slide').each(function() {

            centerImage($(this));

        });

    });

然后创建centerImage函数，但将其放在主jquery加载函数之外，以便幻灯片初始化事件可以访问它

function centerImage(el) {
    var w = el.width();
    var o = jQuery('.gallery').width();

    if (o > w) {
        var d = o-w;
        if (d>1) {
            l = d/2;
            el.css('margin-left',l);
        } else
            el.css('margin-left','0');

    } else
        el.css('margin-left','0');
}

最后，以下内容将触发第一个列表的居中。另外把它放在主jquery加载函数之外，否则它会触发太晚

jQuery('.cycle-slideshow').on('cycle-post-initialize',function(){

    var slide1 = jQuery('.cycle-slide').eq(0);
    slide1.width( slide1.data('iwidth') + 'px');

    centerImage( slide1 );

});

带集中幻灯片的简单jQuery图像滑块

1 个答案: