标签:display i++ medium rac ++ containe data ati last
循环轮播的时候,刚进入界面还是从第一张图片开始,循环一圈的时候就从第二个开始了,第一就是一闪就过了。 找了好久东拼西凑才解决
解决办法:
由于图片数据是动态获取的,所以在ajax请求成功后再初始化轮播图
function policybannerlistcb (data) {
data = JSON.parse(data)
console.log(data)
if(data.result == 0) {
if(data.policybanlist.length == 0){
let div = ‘‘
div += `
<div class="swiper-slide"><img src="images/defaultBackground.png" ></div>
`
$(‘.swiper-wrapper‘).append(div)
}else {
let div = ‘‘
for(let i =0; i < data.policybanlist.length; i++) {
let policybanlistitem = data.policybanlist[i]
div += `
<div class="swiper-slide" onClick="clickswiperimg(${policybanlistitem.policy_id})"><img src=${policybanlistitem.policy_bannerpic} ></div>
`
}
$(‘.swiper-wrapper‘).append(div)
$(‘.swiper-button-prev‘).css(‘display‘,‘inline-block‘)
$(‘.swiper-button-next‘).css(‘display‘,‘inline-block‘)
//初始化swiper
// 轮播图
mySwiper = new Swiper(‘.swiper-container‘, {
// 滚动方向 horizontal/vertical
direction: ‘horizontal‘,
// 自动播放
autoplay: {
delay: 4000,
stopOnLastSlide: false,
disableOnInteraction: false, //在手动切换之后恢复到自动播放
},
onSlideChangeEnd: function(swiper){
swiper.update();
mySwiper.startAutoplay();
mySwiper.reLoop();
},
slidesPerView: 1,
spaceBetween: 30,
// 是否循环播放
loop: true,
loopAdditionalSlides : 3, //不设置这个可能会出现播放错乱的问题
// 如果需要分页器(小圆点)
// 是否需要分页器
// pagination: {
// el: ‘.swiper-pagination‘,
// paginationClickable: true,
// },
// 点击分页器是否切换到对应的图片 是 true 否 false
// 如果需要前进后退按钮
navigation: {
nextEl: ‘.swiper-button-next‘,
prevEl: ‘.swiper-button-prev‘,
},
// 用户操作swiper之后,是否禁止autoplay。默认为true:停止。
// 如果设置为false,用户操作swiper之后自动切换不会停止,每次都会重新启动autoplay。
// 操作包括触碰,拖动,点击pagination等。
autoplayDisableOnInteraction: false,
observer: true, //修改swiper自己或子元素时,自动初始化swiper
observeParents: true //修改swiper的父元素时,自动初始化swiper
})
}
}
}
比较重要的部分我用红色字体标出了。
参考连接:
https://blog.csdn.net/weixin_43294560/article/details/103767977
标签:display i++ medium rac ++ containe data ati last
原文地址:https://www.cnblogs.com/lyt0207/p/13037256.html