淘宝轮播图

在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
    
    
            margin:0px;
            padding:0px;
        }
        /* 轮播可视区 */
        .viewArea{
    
    
            position:relative;
            width:616px;
            height:350px;
            margin:0 auto;
            overflow:hidden;
            border-radius:25px;
        }

        /*  轮播胶片 */
        .viewArea>.film{
    
    
            position:absolute;
            list-style-type:none;
            width:3696px;
            height:350px;
        }
        .viewArea>.film::after{
    
    
            content:"";
            display:block;
            clear:both;
        }
        .viewArea>.film>li{
    
    
            float:left;
            width:616px;
            height:350px;
        }
        .viewArea>.film>li>img{
    
    
            width:616px;
            height:350px;
        }

        /* 圆点按钮 */
        .viewArea>.dotButton{
    
    
            list-style-type:none;
            position:absolute;
            width:70px;
            height:13px;
            margin:0 auto;
            background-color: rgba(255,255,255,.3);
            bottom:15px;
            left:50%;
            margin-left:-35px;
            border-radius:10px;
        }
        .viewArea>.dotButton::after{
    
    
            content:"";
            display:block;
            clear:both;
        }
        .viewArea>.dotButton>li{
    
    
            cursor:pointer;
            float:left;
            width:8px;
            height:0px;
            padding-top:8px;
            background-color:#fff;
            border-radius:50%;
            margin:3px;
        }
        /*圆点点击后的样式，通过js添加*/
        .selected{
    
    
            background-color:#ff5000 !important;
        }

        /* 左横移图片按钮 */
        .viewArea>.moveLeft{
    
    
            cursor:pointer;
            text-align:center;
            position:absolute;
            top:50%;
            margin-top:-25px;
            left:0px;
            color:#fff;
            width:50px;
            height:50px;
            line-height:45px;
            background-color: rgba(0,0,0,.3);
            border-radius:50%;
            margin-left:-18px;
            font-size:30px;
        }

        /* 右横移图片按钮 */
        .viewArea>.moveRight{
    
    
            cursor:pointer;
            text-align:center;
            position:absolute;
            top:50%;
            margin-top:-25px;
            right:0px;
            color:#fff;
            width:50px;
            height:50px;
            line-height:45px;
            background-color: rgba(0,0,0,.3);
            border-radius:50%;
            margin-right:-18px;
            font-size:30px;
        }
    </style>
</head>
<body>
    <!-- 轮播可视区 -->
    <div class = "viewArea">
        <!-- 轮播胶片 -->
        <ul class = "film" style = "left:0px">
            <!-- 轮播胶片中每一个帧图片 -->
            <li><img src="https://img.alicdn.com/imgextra/i1/2206686532409/O1CN01D1qn4x1TfMmtNojqs_!!2206686532409-0-lubanimage.jpg" alt=""></li>
            <li><img src="https://aecpm.alicdn.com/simba/img/TB1XotJXQfb_uJkSnhJSuvdDVXa.jpg" alt=""></li>
            <li><img src="https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg" alt=""></li>
            <li><img src="https://aecpm.alicdn.com/simba/img/TB183NQapLM8KJjSZFBSutJHVXa.jpg" alt=""></li>
            <li><img src="https://img.alicdn.com/imgextra/i2/2206686532409/O1CN01hwxuV31TfMmpTL30L_!!2206686532409-0-lubanimage.jpg" alt=""></li>
            <!-- 实际用到5张图片， 
            但是当第五张图片播完之后，立马切回第一张图片之前，有一个第五张图片还没播完但是已经移动了**px的空白区域
            我们不想让用户看见所以让第6张图片顶替一下空白区域，等第五张图片播完之后，立马切回第一张图片
            那我们选用什么图片顶替用第一帧的图片，目的是不让用户看到立马切回第一张图片的那一瞬间-->
            <li><img src="https://img.alicdn.com/imgextra/i1/2206686532409/O1CN01D1qn4x1TfMmtNojqs_!!2206686532409-0-lubanimage.jpg" alt=""></li>
        </ul>

        <!-- 圆点按钮 -->
        <ul class = "dotButton">
            <!-- 每一个小按钮 -->
            <li class = "dotButtonLi"></li>
            <li class = "dotButtonLi"></li>
            <li class = "dotButtonLi"></li>
            <li class = "dotButtonLi"></li>
            <li class = "dotButtonLi"></li>
        </ul>

        <!-- 左横移图片按钮 -->
        <div class = "moveLeft" style = "display:none"><</div>

        <!-- 右横移图片按钮 -->
        <div class = "moveRight" style = "display:none">></div>
    </div>


    <script type = "text/javascript">
        // 轮播胶片
        var film = document.getElementsByClassName("film")[0];
        // 圆点按钮
        var dotButtonLi = document.getElementsByClassName("dotButtonLi");
        //可视区
        var viewArea = document.getElementsByClassName("viewArea")[0];
        //左横移图片按钮
        var moveLeft = document.getElementsByClassName("moveLeft")[0];
        //右横移图片按钮
        var moveRight = document.getElementsByClassName("moveRight")[0];

        //轮播功能 && 图片(主体)和圆点联动功能
        var timer = setInterval(function(){
    
    
            //动起来
            film.style.left = parseInt(film.style.left) - 1 + "px";

            //无缝衔接 
            if(parseInt(film.style.left) < -3080){
    
    
                //当第五张图片播完后，立马切回第一张图片
                film.style.left = "0px";   
            }
                //当第1张图片播完后，立马切回第5张图片
            if(parseInt(film.style.left) > 0){
    
    
                film.style.left = "-2464px";
            }

            //对应图片对应颜色
            if(parseInt(film.style.left) < 0 && parseInt(film.style.left) > -616){
    
    
                dotButtonLi[0].className += " selected";
                dotButtonLi[1].className =  "dotButtonLi";
                dotButtonLi[2].className =  "dotButtonLi";
                dotButtonLi[3].className =  "dotButtonLi";
                dotButtonLi[4].className =  "dotButtonLi";
            }else if(parseInt(film.style.left) < -616 && parseInt(film.style.left) > -1232){
    
    
                dotButtonLi[1].className += " selected";
                dotButtonLi[0].className =  "dotButtonLi";
                dotButtonLi[2].className =  "dotButtonLi";
                dotButtonLi[3].className =  "dotButtonLi";
                dotButtonLi[4].className =  "dotButtonLi";
            }else if(parseInt(film.style.left) < -1232 && parseInt(film.style.left) > -1848){
    
    
                dotButtonLi[2].className += " selected";
                dotButtonLi[1].className =  "dotButtonLi";
                dotButtonLi[0].className =  "dotButtonLi";
                dotButtonLi[3].className =  "dotButtonLi";
                dotButtonLi[4].className =  "dotButtonLi";
            }else if(parseInt(film.style.left) < -1848 && parseInt(film.style.left) > -2464){
    
    
                dotButtonLi[3].className += " selected";
                dotButtonLi[1].className =  "dotButtonLi";
                dotButtonLi[2].className =  "dotButtonLi";
                dotButtonLi[0].className =  "dotButtonLi";
                dotButtonLi[4].className =  "dotButtonLi";
            }else if(parseInt(film.style.left) < -2464 && parseInt(film.style.left) > -3080){
    
    
                dotButtonLi[4].className += " selected";
                dotButtonLi[1].className =  "dotButtonLi";
                dotButtonLi[2].className =  "dotButtonLi";
                dotButtonLi[3].className =  "dotButtonLi";
                dotButtonLi[0].className =  "dotButtonLi";
            }
        },10)
    
        //图片和圆点(主体)联动功能
        for(var i = 0; i < dotButtonLi.length; i++){
    
    
           (function(i){
    
    
                dotButtonLi[i].addEventListener("click",function(){
    
    
                    //点击变换颜色
                    this.className += " selected";
                    //只允许一个颜色发生变换
                    for(var j = 0; j < dotButtonLi.length; j++){
    
    
                        if(i !== j){
    
    
                            dotButtonLi[j].className = "dotButtonLi";
                        }
                    }

                    //点击跳转到对应图片
                    film.style.left = -i * 616 + "px";  
                },false)
           }(i))
        }
        
        //可视区与左右横移按钮联动功能
        //显示
        viewArea.addEventListener("mouseenter",function(){
    
    
            moveLeft.style.display = "inline-block";
            moveRight.style.display = "inline-block";
        },false)
        //消失
        viewArea.addEventListener("mouseleave",function(){
    
    
            moveLeft.style.display = "none";
            moveRight.style.display = "none";
        },false)
    
        //左横移功能
        moveLeft.addEventListener("click",function(){
    
    
            film.style.left = parseInt(film.style.left) - 816 + "px";
        },false)

        //右横移功能
        moveRight.addEventListener("click",function(){
    
    
            film.style.left = parseInt(film.style.left) + 816 + "px";

        },false)
    </script>
</body>
</html>
猜你喜欢
