<!--轮播图-->
<div class="aui-banner-content" data-aui-slider style="height: 24%;margin-top: 0">
<div class="layui-carousel" id="zqzj" style="border-radius: 2vw;width: 100%">
<div carousel-item id="swiper-wrapper">
</div>
</div>
</div>
//轮播图
var ins = "";
var scrollTop = 0;//轮播图上下滑动
function selectHomeSlideshow() {
$.post("url", {
"type": 0,
}, function (data) {
var table = '';
$.each(data, function (i, list) {
table += "<img src=\"" + url + list.indexImg + "\" style=\"width: 100%; border-radius:10px;\">\n"
})
$("#swiper-wrapper").html(table);
//序列话一次轮播图
layui.use(['carousel'], function () {
var carousel = layui.carousel;
ins = carousel.render({
elem: '#zqzj'
, width: '100%' //设置容器宽度
, height: '49vw'
, anim: 'default'
, indicator: 'inside'
, arrow: 'none'
, interval: 3000
});
})
// 监听滑动事件切换轮播图
$("#zqzj").on("touchstart", function (e) {
var startX = e.originalEvent.targetTouches[0].pageX;//开始坐标X
var touch = e.touches[0];
var startY = touch.pageY;
$(this).on('touchmove', function (e) {
arguments[0].preventDefault();//阻止手机浏览器默认事件
var touch = e.touches[0];
var deltaY = touch.pageY - startY;
scrollTop += -deltaY
document.documentElement.scrollTop = scrollTop
document.body.scrollTop = scrollTop
});
$(this).on('touchend', function (e) {
var endX = e.originalEvent.changedTouches[0].pageX;//结束坐标X
e.stopPropagation();//停止DOM事件逐层往上传播
if (endX - startX > 30) {
ins.slide("sub");
} else if (startX - endX > 30) {
ins.slide("add");
}
$(this).off('touchmove touchend');
});
})
// 重置轮播,不然有可能不显示
ins.reload({
elem: '#zqzj'
, width: '100%' //设置容器宽度
, height: '49vw'
, anim: 'default'
, indicator: 'inside'
, arrow: 'none'
, interval: 3000
});
})
}
图片不显示就在方法最后重置一下。记得引入layui 库