帶有html5的自動圖像滑塊的javascript

Question

以下代碼是我的圖像滑塊的html頁面，但在滑動最后一個圖像后它不會繼續。

<style type="text/css">
#slideshow {
position:relative;
height:300px;
}

#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
}

#slideshow IMG.active {
z-index:10;
}

#slideshow IMG.last-active {
z-index:9;
}
</style>'


<script>
function slideSwitch() {
    var $active = $('div#slideshow IMG.active');
    var $next = $active.next();    

    $next.addClass('active');

}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});
</script>'

<body>
<div id="slideshow" style="height:300px; width:100%">
<img src="${context:layout/images/images.jpeg}" title="Funky roots"     style="position:absolute; height:300px; width:100%;" class="active"/>
<img src="${context:layout/images/police.jpg}" title="The long and  winding road" style="position:absolute; height:300px; width:100%;"/>
<img src="${context:layout/images/viper_1.jpg}" title="Happy trees"   style="position:absolute; height:300px; width:100%;"/>
</div>
</body>

從這段代碼中，如何在最后一張圖像后自動滑動並繼續下一張幻燈片？

Answer 1

您不要將last-active類添加到last-active一個元素。 所以每個元素都有active類，每個元素都有z-index: 10

在對代碼進行一些工作之后，為您獲得了這個新的JS：

function slideSwitch() {
  var $active = $('div#slideshow IMG.active');
  var $next = $active.next();    
  $active.addClass('last-active');
  $active.removeClass('active');
  if($next.length == 0) {
    $next = $('div#slideshow IMG').first(); //at the end we need to select the first element, because there is no next()
  }
  $next.removeClass('last-active');
  $next.addClass('active');
}

編輯：

回答你的評論：

通過滑塊的第一輪后，類看起來像這樣：

<img ... class="last-active"/>
<img ... class="last-active"/>
<img ... class="active"/>

當我們輸入代碼時， $active包含最后一個div而$next是空的，因為沒有下一個元素。

此時我們必須告訴代碼，下一個元素將是第一個元素。 $next = $('div#slideshow IMG').first(); 只需選擇我們想重新開始的第一個div。

帶有html5的自動圖像滑塊的javascript

問題描述

1 個解決方案

解決方案1
0 已采納 2015-03-05 09:39:13

帶有html5的自動圖像滑塊的javascript

問題描述

1 個解決方案

解決方案1 0 已采納 2015-03-05 09:39:13

解決方案1
0 已采納 2015-03-05 09:39:13