记录自己使用的layui中的轮播图

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); 					//建立周期定时器。