点击小图切换大图

最新推荐文章于 2021-10-15 17:08:21 发布

是欢欢啊

最新推荐文章于 2021-10-15 17:08:21 发布

阅读量363

点赞数

分类专栏： JS demo JS相关

本文链接：https://blog.csdn.net/bznhlhh/article/details/117921559

版权

JS相关同时被 2 个专栏收录

42 篇文章 0 订阅

订阅专栏

JS demo

28 篇文章 0 订阅

订阅专栏

<div class="contents">
        <h1 class="tt">{$data.title}</h1>
        <div class="topImg">
            <img src="" />
        </div>
        <div class="bottomImg">
            <foreach name="$data['image_list']" id="vo">
                <li><img src="{:cmf_get_image_url($vo['url'])}" class="swiper-slide"></li>
            </foreach>
        </div>
    </div>

var top = document.querySelector(".topImg");
    var topImg = document.querySelector(".topImg img");
    var imgs = document.querySelectorAll(".bottomImg img");
    window.onload = function(){
        for(var i=0;i<imgs.length;i++){
            topImg.src = imgs[0].src;
        }
    }

    // 点击切换图片
    for(var i=0;i<imgs.length;i++){
        (function(i){
            imgs[i].onclick = function(){
                topImg.src = imgs[i].src;
                console.log(topImg.src);
            }
        })(i);
        
    }