自己写的提取文章中的图片(layui+tp5),以弹出窗口的形式,左右滑动展示,当然这里没用到tp5

//需要引用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>

自己写的提取文章中的图片(layui+tp5),以弹出窗口的形式,左右滑动展示,当然这里没用到tp5》有2个想法

  1. 通过this.src判断点击了哪一张图片

    $(“#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);
    })

    升级版

    回复

发表回复

您的电子邮箱地址不会被公开。