html代码
<div class="layui-carousel" id="test1" lay-filter="carofilter" style="margin-left: 240px;">
<div carousel-item >
<div th:each="b:${bannerslist}" >
<img th:src="${b.bannerUrl}" style="width: 1112px;height: 446px;">
</div>
</div>
</div>
js代码
layui.use('carousel', function () {
var carousel = layui.carousel;
//***************************建造实例
var ins=carousel.render({
elem: '#test1'
, width: '1110px' //设置容器宽度
,height: '446px'
, arrow: 'none' //始终显示箭头,可选hover,none,always
//,anim: 'updown' //切换动画方式,可选fade,default
, full: false //全屏
, autoplay: true //自动切换
, interval: 3000 //自动切换的时间间隔
, index: 0 //初始化时item索引,默认时0
, indicator:'inside' //指示器位置,可选outside,none,inside
});
})
仅自动播放的轮播图
html
<div id="sildeshow_img" style="margin-left: 30px;" >
<div th:each="b:${bannerslist}" id="img">
<img style="width: 1112px;height: 446px;margin-left: 210px;"th:src="${b.bannerUrl}" />
</div>
</div>
js
index=0;
function show_img(){
//获取所有的图片 并且存储到数组imgs数组里
imgs=document.getElementById("sildeshow_img").children;
for(i =0; i<imgs.length;i++){
//循环获取到imgs里面的元素,并且把它们隐藏设置为"none"
imgs[i].style.display="none";
}
imgs[index].style.display ="block"; //当所有元素都隐藏了,在显示当前index所指的图片。
index ++;
if(index >= imgs.length){
index=0;
} //判断index是否大于imgs的长度,等于imgs的长度后在重新赋予它初始值0;
}
timer=setInterval(show_img,3000); //建立周期定时器。