//需要引用layer或者layui
//需要引用jquery
//需要引用swiper组件
<script>
//articlecontent是文章id所在DOM
$("#aritclecontent").find("img").on("click",function() {
var html = '';
html += '<div class="swiper-container" style="z-index:999999999;width:1024px;"><div class="swiper-wrapper">';
$('#aritclecontent img').each(function (index) {
html += '<div class="swiper-slide">'
html += '<div class="swiper-button-prev"></div><div class="swiper-button-next"></div><img style="width:1024px;" src="' + $(this).attr("src") + '"></div>';
})
html += '</div></div>';
layer.open({
type: 1,
// area:['900px','600px'],
title: false,
skin: 'layui-layer-rim',
closeBtn: 1,
// shade:0,
content: html
})
var mySwiper = new Swiper('.swiper-container',{
// direction: 'vertical',//竖着切换
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
})
</script>
$(“#aritclecontent”).find(“img”).on(“click”,function() {
curimg = this.src;
var html = ”;
html += ”;
$(‘#aritclecontent img’).each(function (index,value) {
// console.log(index);
console.log(value.src);
if(curimg == value.src){
aaa = index;
}
html += ”
html += ”;
})
html += ”;
layer.open({
type: 1,
// area:[‘900px’,’600px’],
title: false,
skin: ‘layui-layer-rim’,
closeBtn: 1,
// shade:0,
content: html
})
var mySwiper = new Swiper(‘.swiper-container’,{
// direction: ‘vertical’,//竖着切换
initialSlide:0,
observer:true,
observeParents:true,
direction:’horizontal’,
slidesPerView:1,
loop:false,
navigation: {
nextEl: ‘.swiper-button-next’,
prevEl: ‘.swiper-button-prev’,
},
})
mySwiper.slideTo(aaa);
// $(‘.swiper-container’).show();
// console.log(aaa);
})
升级版