js 滑动轮播

最新推荐文章于 2023-05-26 16:02:20 发布

优雅的大白鹅

最新推荐文章于 2023-05-26 16:02:20 发布

阅读量243

点赞数

本文链接：https://blog.csdn.net/weixin_48186771/article/details/109380437

版权

关键词由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
          * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #box {
            width: 800px;
            height: 400px;
            margin: 0 auto;
            position: relative;
            border: 4px solid #000;
            overflow: hidden;
        }

        ul {
            width: calc(6 * 800px);
            height: 400px;
            position: relative;
            display: flex;
            left: 0;
            transition: left 0.3s linear;
        }

        ul>li {
            width: 800px;
            height: 400px;
        }

img{
    width: 100%;
    height: 100%;
}
        span {
            padding: 8px 5px 7px;
            background-color: rgba(0, 0, 0, 0.5);
            position: absolute;
            top: calc(50% - 16px);
            color: #fff;
            opacity: 0;
            transition: opacity 0.3s;
        }
        #box:hover span{
            opacity: 1;
        }
        .left{
            left: 0;
        }
        .right{
            right: 0;
        }

        .list{
            position: absolute;
            left: 250px;
            bottom: 30px;
            width: 100px;
            height: 20px;
            z-index: 10000;
        }
        .itme{
            float: left;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #fff;
            margin-left: 10px;
        }
       .itme1{
        background-color: black;
        }
    </style>
</head>
<body>
    <div id="box">
        <ul>
            <li><img src="./img/1.jpg" alt=""></li>
            <li><img src="./img/2.jpg" alt=""></li>
            <li><img src="./img/3.jpg" alt=""></li>
            <li><img src="./img/4.jpg" alt=""></li>
            <li><img src="./img/5.jpg" alt=""></li>
            <li><img src="./img/6.jpg" alt=""></li>
        </ul>
        <div class="list">
            <div class="itme itme1"></div>
            <div class="itme"></div>
            <div class="itme"></div>
            <div class="itme"></div>
        </div>
        <span class="left">上</span><span class="right">下</span>
    </div>
    <script>
        // 自动轮播
        var i = 0; //记录显示li的索引
        var ul = document.querySelector("ul");
        var li = document.querySelectorAll("li"); //[li0,li1,li2,li3,li4]
        var box = document.querySelector("#box");
        var span1 = document.querySelector("#box .left");
        var span2 = document.querySelector("#box .right");
        var list1=document.querySelector(".list")
        var itme1=document.querySelectorAll(".list>.itme")

        function item() {
            li = document.querySelectorAll("li"); 
            ul.style.transitionDuration = "0.3s";
            ul.style.left = "-800px"; 

            itme1[i].style="background:#fff"

            setTimeout(function(){
                ul.appendChild(li[0]);
                ul.style.transitionDuration = "0s";
                ul.style.left = "0px";
                itme1[a].style="background:black"
            },300)
        }
        var time = setInterval(item,2000);
        box.onmouseenter = function(){
            clearInterval(time);
        }
        box.onmouseleave = function(){
            time = setInterval(item,2000);
        }
        span2.onclick = function(){ item() }

        span1.onclick = function(){
            li = document.querySelectorAll("li"); 
            // 1.让最后一个li移动到ul内前面
            var max = li.length - 1;
            ul.insertBefore(li[max],li[0]);
            // 2.为了出现在box左边,所以需要无声无息的移动ul
            // 设置过渡时间为0
            ul.style.transitionDuration = "0s";
            // 让ul没有动画的直接向左偏移一个li
            ul.style.left = "-800px";
            // 3让上面的代码确定执行结束了再开始执行动画
            setTimeout(function(){
                // 4.添加动画让新的li[0]动画移动显示
                ul.style.transitionDuration = "0.3s";
                // 5.设置ul移动动画显示li[0]
                ul.style.left = "0px";
            },100)
        }

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