js轮播图

天天Lotay

发布于 2022-12-01 08:27:36

12.2K0

发布于 2022-12-01 08:27:36

文章被收录于专栏：嵌入式音视频

效果图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/base.css">
    <style>
        .silde {
            height: 460px;
            width: 100%;
            border: 5px solid red;
            overflow: hidden;
            position: relative;
        }
        .silde ul{
            width: 5000px;
            position: absolute;
            top:0px;
            left:0px;
        }

        .silde ul li{
            float: left;
        }

        .silde img{
            width: 1226px;
        }

        .silde .btn{
            width: 41px;
            height: 69px;
            background: url(./img/icon-slides.png) no-repeat 0 0;
            position: absolute;
            left:0px;
            top:50%;
            margin-top: -35px;
            text-indent: -200px;
            overflow: hidden;
        }

        .silde .btn.Rbtn{
            left:auto;
            right:0px;
            background-position: -42px 0px;
        }
        .silde ol {
            position: absolute;
            right: 50px;
            bottom: 30px;
            width: 120px;
        }

        .silde ol li{
            width: 8px;
            border: 4px solid #B3B8B8;
            height: 8px;
            background-color: #929998;
            float: left;
            margin: 0 5px;
            border-radius: 50%;
            text-indent: -200px;
            overflow: hidden;
            
        }
        .silde ol li.con{
            background-color: #fff;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="silde" id="silde">
            <ul>
                <li>
                    <img src="./img/03.webp" alt="">
                </li>
                <li>
                    <img src="./img/02.jpg" alt="">
                </li>
                <li>
                    <img src="./img/01.webp" alt="">
                </li>
                <li>
                    <img src="./img/03.webp" alt="">
                </li>
            </ul>
            <div class="btn Lbtn">左按钮</div>
            <div class="btn Rbtn">右按钮</div>
            <ol>
                <li class="con">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ol>
        </div>

    </div>

    <script>
        var silde = document.getElementById("silde");
        var ols = silde.children[3].children;
        var ul = silde.children[0];
        var Rbtn = silde.children[2];
        var Lbtn = silde.children[1];
        var num = 0; //当前位置
    

        for(var i = 0;i < ols.length;i++){
            ols[i].index = i;//下标
            ols[i].onclick = function(){
                // 清除所有li里面类名
                for(var j = 0;j < ols.length;j++){
                    ols[j].className = "";
                }

                this.className = "con";

                // 控制移动终止位置
                target = this.index * -1226;

                num = this.index; //下标位置同步

            }
        }

        // 缓动效果
        var leader = 0;
        var target = 0; //-1226

        setInterval(function(){
            // 判断限制左右移动位置
            if(target <= -3678){
                target = -3678;
            }else if( target >= 0){
                target = 0;
            }

            leader = leader + (target - leader)/10;

            // ul位置移动
            ul.style.left = leader + "px";

        },60)

        // 右按钮效果
        Rbtn.onclick = function(){
            target -= 1226;

            for(var i = 0; i < ols.length;i++){
                ols[i].className = "";
            }
            num == 3? 3:num++;
            ols[num].className = "con";
        }

        // 左按钮效果
        Lbtn.onclick = function(){
            target += 1226;

            for(var i = 0; i < ols.length;i++){
                ols[i].className = "";
            }
            num == 0? 0:num--;
            ols[num].className = "con";
        }

    </script>
</body>
</html>

/* 初始化样式 */
*{
    margin:0px;
    padding:0px;
}

a{
    text-decoration: none;
    display: inline-block;
    color:#333;
}
/* 清除浮动 */
.clearfix::after{
    content: "";
    display: block;
    clear: both;
    height: 0px;
    line-height: 0px;
    visibility: hidden; /*溢出隐藏 保留原本位置*/
}
.clearfix{
    zoom: 1; /*兼容ie*/
}

ul,ol{
    list-style: none;
}

.fl{
    float: left;
}
.fr{
    float: right;
}
/* 固定板心 */
.container{
    width:1226px;
    margin: 0 auto;
}

input{
    outline: none;
}

h1{
    font-size: 22px;
}
h2{
    font-size: 20px;
}
h3{
    font-size: 18px;
}
h4{
    font-size: 16px;
}
h5{
    font-size: 14px;
}
h6{
    font-size: 12px;
}

img{
    display: block;
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-01-08，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度

js轮播图

js轮播图

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐