图片展示小案例

小白小白从不日白

于 2021-10-25 20:59:47 发布

阅读量101

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43285360/article/details/120959819

版权

javascript 专栏收录该内容

105 篇文章 2 订阅

订阅专栏

这篇博客介绍了如何使用HTML、CSS和JavaScript来创建一个轮播图组件。通过获取<ul>元素中的每个<li>内img元素，并为这些小图片添加点击事件，实现点击小图片时更改上方大图的src属性，从而达到轮播效果。代码示例中展示了具体的样式设置和JavaScript实现逻辑。

摘要由CSDN通过智能技术生成

分为两部分：

上面部分为展示的图片

下面部分为需要点击才能展示在上面的图片

思路：

获取ul中的每个li中的img以及上面部分默认展示的图片
给每张img添加点击事件
当点击下面的小图片时就将其src属性赋值给上面的图片的src即可

       * {
            margin: 0;
            padding: 0;
        }
        
        .banner {
            width: 670px;
            border: 1px solid #000;
            margin: 100px auto;
        }
        
        ul {
            list-style: none;
            display: flex;
            justify-content: space-between;
        }
        
        ul>li>img {
            width: 120px;
            vertical-align: bottom;
        }

    <div class="banner">
        <img src="images/ad1.jpg" alt="">
        <ul>
            <li>
                <img src="images/ad1.jpg" alt="">
            </li>
            <li>
                <img src="images/ad2.jpg" alt="">
            </li>
            <li>
                <img src="images/ad3.jpg" alt="">
            </li>
            <li>
                <img src="images/ad4.jpg" alt="">
            </li>
            <li>
                <img src="images/ad5.jpg" alt="">
            </li>
        </ul>
    </div>
    <script>
        const oItems = document.querySelectorAll("li>img");
        const oImg = document.querySelector("div>img");

        for (let item of oItems) {
            item.onclick = change;

            // item.addEventListener('click', function() {
            //     // console.log(this.src);
            //     oImg.src = this.src;
            // });
        }

        function change() {
            oImg.src = this.src;
        }
    </script>