原生js用div实现简单的轮播图

朱雀 2023-06-05 08:10 228阅读 0赞

原省js实现轮播图。

打开页面图片自动轮播，点击prev next按钮切换到上/下一张图片，点击1-5切换到对应图片。

代码链接：[https://github.com/sandraryan/practise/blob/master/js/%E8%BD%AE%E6%92%AD%E5%9B%BE.html][https_github.com_sandraryan_practise_blob_master_js_E8_BD_AE_E6_92_AD_E5_9B_BE.html]

大概长这样 不用加图片，div就可以实现

![1645790-20190821102339735-1922433316.png][]

css代码：

.wrap {
            /* 展示区域样式 */
            width: 500px;height: 400px;
            box-shadow: 0 0 10px rgba(0,0,0,.5);
            display: flex;
            overflow: hidden;
            position: relative;
        }
        .swipe {
        
            width: 2500px;
            display: flex;
            position: absolute;
            left: 0;
            /* 给图片变化添加过渡效果，时间不能超过定时器一次的时间，否则会冲突 */
            transition: .8s;
        }
        /* 被轮播的子元素样式 */
        .box{
        
            width: 500px;height: 400px;
            background-color: rgb(228, 226, 226);
            color: #fff;
            font-size: 200px;
        }
        button{
        
            width: 100px;height: 40px;
            margin: 10px 5px;
            border-radius: 8px;
            background-color: rgb(202, 202, 202);
            font-size: 22px;
            color: white;
        }

页面结构：

<button class="prev">prev</button>
        <button class="next">next</button>
        <br>
        <button class="btn">one</button>
        <button class="btn">two</button>
        <button class="btn">three</button>
        <button class="btn">four</button>
        <button class="btn">five</button>
        
        <div class="wrap">
            
            <div class="swipe">
                
                <div class="box">box1</div>
                <div class="box">box2</div>
                <div class="box">box3</div>
                <div class="box">box4</div>
                <div class="box">box5</div>
            </div>
        </div>

js代码：

the end (●ˇ∀ˇ●)

转载于:https://www.cnblogs.com/sandraryan/p/11387655.html

[https_github.com_sandraryan_practise_blob_master_js_E8_BD_AE_E6_92_AD_E5_9B_BE.html]: https://github.com/sandraryan/training/tree/master/H5C3
[1645790-20190821102339735-1922433316.png]: /images/20230601/18b5bda2279248e7997957fb4326678b.png