具有集中式幻燈片的簡單jQuery圖像滑塊

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秒鍾后再次fadeIn ，所以幻燈片的間隔為3秒鍾。

我試過了

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

我怎樣才能做到？ 這是小提琴 。

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加載函數之外，以便可以通過slideshow init事件對其進行訪問

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

});