js轮播图，简单易懂

最新推荐文章于 2022-12-07 15:19:43 发布

WhiteStruggle

最新推荐文章于 2022-12-07 15:19:43 发布

阅读量216

点赞数

分类专栏：前端文章标签： js

本文链接：https://blog.csdn.net/qq_45127998/article/details/104001442

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

首先完成HTML和CSS部分，

划分区域
让图片排成一排，可以利用浮动，也可以利用定位，在这里我用的是定位
开始js部分：由于自己还在学习中，对JavaScript不是多了解，没有先实现轮播，而是先实现点击切换
最后经过学习借鉴方法，知道了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>

注：图片自定义