layui.carousel通用轮播组件重新加载 原创

通用轮播组件文档 - layui.carousel https://www.layui.com/doc/modules/carousel.html  

轮播组件重新加载

<!-- 轮播 -->
		<div class="content-center-item-top-11">
			<div class="layui-carousel" id="test10" style="height: 180px !important;">
			 <div carousel-item="" id="carousel">
			    <div><img src="http://www.leixing.xyz/img/advertImg/2020/01/02/1577973499977565.jpg"/></div>
			    <div><img src="http://www.leixing.xyz/img/advertImg/2020/01/02/1577973500837493.jpg"/></div>
			    <div><img src="http://www.leixing.xyz/img/advertImg/2020/01/02/1577973500442137.jpg"/></div>
			  </div>
			</div>
		</div>

/**********carousel 轮播 start**********/
//通用轮播组件文档 - layui.carousel https://www.layui.com/doc/modules/carousel.html
//图片轮播
var ins;
var options = {
	elem: '#test10'
	,width: '100%'
	,height: '320px'
	,arrow: 'always' //始终显示箭头
	,nim: 'updown' //切换动画方式
	,autoplay: true
	,interval: 3000
}
update_carousel();
function update_carousel(){
layui.use(['carousel', 'form'], function(){
	var carousel = layui.carousel
		,form = layui.form;

	//图片轮播
	ins =carousel.render(options);

	var $ = layui.$, active = {
		set: function(othis){
			var THIS = 'layui-bg-normal'
				,key = othis.data('key')
				,options = {};

			othis.css('background-color', '#5FB878').siblings().removeAttr('style');
			options[key] = othis.data('value');
			ins3.reload(options);
		}
	};

	//监听开关
	form.on('switch(autoplay)', function(){
		ins3.reload({
			autoplay: this.checked
		});
	});

	$('.demoSet').on('keyup', function(){
		var value = this.value
			,options = {};
		if(!/^\d+$/.test(value)) return;

		options[this.name] = value;
		ins3.reload(options);
	});

	//其它示例
	$('.demoTest .layui-btn').on('click', function(){
		var othis = $(this), type = othis.data('type');
		active[type] ? active[type].call(this, othis) : '';
	});

	//重置轮播,,,注意这里
	//ins.reload(options);

});
}
/*************carousel 轮播 end**********/

var data = {
advertId: "L7z6SEmW",
imgUrl: "http://www.leixingke.com/img/advertImg/2020/01/01/1577887505297322.jpg,http://www.leixingke.com/img/advertImg/2020/01/01/1577887505374927.jpg,http://www.leixingke.com/img/advertImg/2020/01/01/1577887505443822.jpg,http://www.leixingke.com/img/advertImg/2020/01/01/1577887507351323.png,"
openUrl: "http://www.leixing.xyz/article/detail/6IkycnAz,http://www.leixing.xyz/article/detail/6IkycnAz,http://www.leixing.xyz/article/detail/6IkycnAz,http://www.leixing.xyz/article/detail/6IkycnAz,",
pageName: "index",
position: "advertDiv",
remarks: "首页右边广告 376px * 110px"

};
var id='carousel';//添加数据
addAdvertImg(data, id);
/**
 * 添加图片
 * @param vs
 */
function addAdvertImg(vs, id){ //debugger
   id = "#"+id;
   var html = "";
   var imgs = vs.imgUrl.split(",");
   var urls = vs.openUrl.split(",");
   $.each(imgs, function(k, img) {
      //<div><img src="http://www.leixingke.com/img/2019/11/14/1573726251284213.png"/></div>
      if(img != "") //debugger
         html += '<div><a href="'+ urls[k] +'"><img src="'+ img +'"/></a></div>';
   });
   $(id).html(html);
   //重新加载首页图片轮播
   if(id == '#carousel') {
      setTimeout(function () {
         //layer.msg('carousel');
         //重置轮播
         ins.reload(options);
      }, 500);
   }
}