利用数组生成手风琴图片框

最新推荐文章于 2025-12-04 18:01:05 发布

原创最新推荐文章于 2025-12-04 18:01:05 发布 · 624 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #js

前端_css效果专栏收录该内容

5 篇文章

订阅专栏

这篇博客展示了如何利用JavaScript将图片路径存储到数组中，并动态创建一个图片轮播效果。通过CSS样式和JavaScript的数组遍历，实现了图片在页面上的布局和过渡动画。在代码中，每个图片都被包裹在一个div中，通过调整div的宽度来实现 hover 时的放大效果。此示例着重于前端开发中的动态内容生成和交互设计。

简介：利用js中数组的特性，把图片路径作为元素存入数组，同时打印出页面结构

先看效果：

再看代码：

<style>

        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .photos{
            /* 设置浮动布局,让子元素为伸缩盒子 */
            display: flex;
            width: 880px;
            height: 250px;
            border: 3px solid skyblue;
            margin: 50px auto;
            overflow: hidden;
            /* 让大盒子和图片一起旋转180°,就能实现另一种方向的效果 */
            /* transform: rotate(180deg); */
        }
        /* 关键点:设置一个盒子包住图片,给盒子固定宽度,利用图片的特性(不会被盒子包住),所以图片依然是超出盒子的,这时候让后面的盒子盖住照片就可以了,就能实现一种叠加的效果 */
        .photos div{
            width: 80px;
            height: 100%;
            transition: all 0.7s;
        }
     /*    .photos div img{
            transform: rotate(180deg);
        } */
        .photos div:hover {
            width: 400px;
        }
    </style>

  <script>
        let arr = [
            './images/1.jpg',
            './images/2.jpg',
            './images/3.jpg',
            './images/4.jpg',
            './images/5.jpg',
            './images/6.jpg',
            './images/7.jpg'
        ]
        // 根据数组元素生成页面内容
        // 设置空字符串保存photots里面的主体内容
        let str = ''
        for(let i = 0 ; i<arr.length ;i++){
            // 字符串拼接主体内容
            str += `<div><img src="${arr[i]}" alt=""></div>`
        }
        console.log(str);
        // 只用一个document.write来打印页面结构
        document.write(`<div class="photos"> ${str} </div>`)
    </script>