javascript用于带有html5的自动图像滑块

javascript for auto image slider with html5

本文关键字：图像 用于 html5 javascript      更新时间：2023-09-26

下面的代码是我的图像滑块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>

从这个代码中，我如何获得自动滑动，并在最后一张图片后继续到下一张幻灯片？

您不会将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。

相关文章：