js轮播图，简单易懂

蔚落 2023-06-30 08:53 23阅读 0赞

首先完成HTML和CSS部分，

1.  划分区域
2.  让图片排成一排，可以利用浮动，也可以利用定位，在这里我用的是定位
3.  开始js部分：由于自己还在学习中，对JavaScript不是多了解，没有先实现轮播，而是先实现点击切换
4.  最后经过学习借鉴方法，知道了setInterval（）这样一个函数的使用，实现了轮播图的移动

<!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>
            body{
                background-color: black;
            }
            /* 设置主题内容， */
            .main{
                display: inline-block;
                width: 100%;
                height: 600px;
                position: relative;
            }
            /* 设置轮播出界的父元素 */
            .carousel{
                width: 600px;
                height: 422px;
                position: absolute;
                right: 0;left: 0;
                margin: auto;
                top: 200px;
                overflow: hidden;
            }
            /* 设置移动的动画效果 */
            .demo{
                width: 100%;
                height: 100%;
                transition: transform linear 0.2s;
            }
            .t_img{
                position: absolute;
                top: 0;
                left: 0;
            }
            /* 设置每一块 的 宽和高 */
            .t_img ,
            .t_img>.piece,
            .t_img>.piece>img
            {
                width: 100%;
                height: 100%;
            }
    
            /* 排列每一块 */
            .img_1{left:calc(0);}
            .img_2{left:calc(820px);}
            .img_3{left:calc(820px*2);}
            .img_4{left:calc(820px*3);}
            .img_5{left:calc(820px*4);}
    
            /* 设置左右点击的内容 */
            .icon{
                width: 57px;
                height: 115px;
                display: inline-block;
                position: absolute;
                right: 0;left: 0;
                margin: auto;
                top: 360px;
                cursor: pointer;
            }
    
            .left{
                right: 800px;
                background:url("http://game.gtimg.cn/images/gp/cp/a20190617version/css-sprites.png") no-repeat -24px -255px
            }
            .left:hover{
                background: url("http://game.gtimg.cn/images/gp/cp/a20190617version/css-sprites.png") no-repeat -99px -255px
            }
            .right{
                left: 800px;
                background: url("http://game.gtimg.cn/images/gp/cp/a20190617version/css-sprites.png") no-repeat -184px -255px;
            }
            .right:hover{
                background: url("http://game.gtimg.cn/images/gp/cp/a20190617version/css-sprites.png") no-repeat -266px -255px
            }
    
            /* 设置小点的格式 */
            .title{
                width: 20px;
                height: 20px;
                background-color: #fff;
                display: inline-block;
                border-radius: 50%;
                margin: 0 10px;
            }
            /* 设置初始化小点的颜色 */
            .t_1{
                background-color: #ffb400;
            }
            /* 设置下面整体小点的位置 */
            .nav{
                height: 30px;
                display: inline-block;
                position: absolute;
                right: 0;left: 0;
                margin: auto;
                top:650px;
            }
        </style>
    </head>
    <body>
        <div class="main">
            <div class = "left icon"></div>
            <div class = "right icon"></div>
            <div class="carousel">
                
                <ul class="demo">
                    <li class="img_1 t_img">
                        <a href="" class="piece_1 piece">
                            <img src="https://game.gtimg.cn/images/gp/zlkdatasys/images/image/20200210/ae780c45e66ac5f5b304f170df16ff02.jpg" alt="">
                        </a>
                    </li>
                    <li class="img_2 t_img">
                        <a href="" class="piece_2 piece">
                            <img src="https://game.gtimg.cn/images/gp/zlkdatasys/images/image/20200107/ebbfa6f37e8beb638204f070b35e2c9b.jpg" alt="">
                        </a>
                    </li>
                </ul>
            </div>
            <div class="nav">
                <div class="title t_1"></div>
                <div class="title"></div>
            </div>
        </div>
        <script>
            function getClass(The_class){
                return document.getElementsByClassName(The_class);
            }
            let m_demo = getClass("demo"),
                m_right = getClass("right"),
                m_left = getClass("left"),
                m_nav = getClass("nav"),
                m_title = getClass("title");
    
            lund(m_demo,m_left,m_right,m_nav,m_title);
            function lund(demo,left,right,nav,nav_title){
                // demo 主体部分
                // left 左切换
                // right 右切换
                // nav 底部切换整体
                // nav_title 底部切换个体
                    let move_demo = false,
                        number = 0;
                    const length = nav_title.length - 1;//长度从一开始，但是数组从零开始
    
                    nav[0].style.width = 50*(length+1)+"px";
                    
                    //小图标的颜色切换
                    function color(){
                        for(let i = 0 ; i <= length ; i++)
                        {
                            if(i == number){
                                nav_title[i].style.backgroundColor = "#ffb400";
                            }
                            else
                            {
                                nav_title[i].style.backgroundColor = "#fff";
                            }
                        }
                    }
    
                    //点击小图标切换
                    (function iconclick(){
                        for(let i = 0 ; i <= length ;i++){
                            nav_title[i].onclick = ()=>{
                                number = i;
                                demo[0].style = "transform:translateX(-"+820*number+"px)"; 
                                color();
                            }
                        }
                    })();
    
                    //点击左切换
                    left[0].onclick = function m_left(){
                        if( number <= 0)
                        {
                            number = length;
                        }
                        else{
                            --number;
                        }
                        demo[0].style = "transform:translateX(-"+820*number+"px)"; 
                        color();
                    };
    
                    //点击右切换
                    right[0].onclick = function m_right(){
                        if(number < length && number >= 0)
                        {
                            ++number;
                        }
                        else{
                            number = 0;
                        }
                        demo[0].style = "transform:translateX(-"+820*number+"px)"; 
                        color();
                    };
                    
                    function move(){
    
                        //判断鼠标是否移入图片，以及左，右，底部切换图标
                        demo[0].onmouseover = function (){
                            move_demo = true;
                        };
                        left[0].onmouseover = function (){
                            move_demo = true;
                        };
                        right[0].onmouseover = function (){
                            move_demo = true;
                        };
                        nav[0].onmouseover = function (){
                            move_demo = true;
                        };
    
    
                        //判断鼠标是否移出图片，以及左，右，底部切换图标
                        demo[0].onmouseout = function (){
                            move_demo = false;
                        };
                        left[0].onmouseout = function (){
                            move_demo = false;
                        };
                        right[0].onmouseout = function (){
                            move_demo = false;
                        };
                        nav[0].onmouseout = function (){
                            move_demo = false;
                        };
    
                        //循环轮播
                        setInterval(()=>{
                            if(!move_demo){
                                if(number < length && number >= 0)
                                    {
                                        ++number;
                                    }
                                    else{
                                        number = 0;
                                    }
                                    demo[0].style = "transform:translateX(-"+820*number+"px)"; 
                                    color();
                                }
                            },2000);
                        }
                        
                    move();
                }
            </script>
    </body>
    </html>

**注：图片自定义**