js原生代码实现简单轮播图-蒲公英云

js原生代码实现简单轮播图

Dear 丶 2022-12-28 14:16 301阅读 0赞

1.先给最基本的样式，点击左右按钮的时候，图片开始动，切换css 样式display:none和display:block,达到基本的效果
2.图片上面的小圆点，点击左右按钮绑定到一起、
3.给每个小圆点添加点击事件
4.鼠标移入图片区域停止自动轮播图
5.离开图片区域开始轮播****

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            img{ 
                display: block;
                width: 600px;
                height: 500px;
            }
            li{ 
                list-style: none;
                width: 600px;
                height: 500px;
            }
            *{ 
                margin: 0px;
                padding: 0px;
            }
            .box{ 
                display: flex;
                position: relative;
            }
            #list li{ 
                display:none;
            }
            #left{ 
                width: 80px;
                height: 140px;
                font-size: 50px;
                color: azure;
                background-color: rgba(0, 0, 0, 0.3);
                position: absolute;
                top: 150px;
            }
            #right{ 
                width: 80px;
                height: 140px;
                font-size: 50px;
                color: azure;
                background-color: rgba(0, 0, 0, 0.3);
                position: absolute;
                top: 150px;
                left: 520px;
            }
            .yuanDian ul{ 
                position: absolute;
                top: 420px;
                left: 80px;
            }
            .yuanDian ul li{ 
                margin: 0px 20px;
                display: inline-block;
                height: 30px;
                width: 30px;
                border-radius: 50%;
                background: salmon;
            }
            .box{ 
                width: 600px;
                height: 500px;
            }
            /* 基础的css样式 */
        </style>
    </head>
    <body>
        <div class="box" id="box">
            <div class="lunbo" id="cut">
                <ul id="list">
                    <li style="display: block;"><img src="./imgs/1.jpg" ></li>
                    <li><img src="./imgs/2.jpg" ></li>
                    <li><img src="./imgs/3.jpg" ></li>
                    <li><img src="./imgs/4.jpg" ></li>
                    <li><img src="./imgs/5.jpg" ></li>
                </ul>
                <div class="button">
                    <button type="button" id="left" onclick="left()"><</button>
                    <button type="button" id="right" onclick="right()"> ></button>
                </div>
            </div>
            <div class="yuanDian">
                <ul>
                    <li style="background: red;"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
        <script>
            /** 整理一下思路 * 1.先给最基本的样式，点击左右按钮的时候，图片开始动，切换css * 样式display:none和display:block,达到基本的效果 * 2.图片上面的小圆点，点击左右按钮绑定到一起 * 3.给每个小圆点添加点击事件 * 4.鼠标移入图片区域停止自动轮播图 * 5.离开图片区域开始轮播 * */
window.onload=function(){ 
    //获取所有网节点
    var lis=document.getElementById("list").children;
    var left=document.getElementById("left");
    var right=document.getElementById("right");
    var box = document.getElementById("box");
    //监控图片每一次改变的位置数
    var tpIndex=0;
    //实现最基本的点击左右按钮时图片切换
    { 
        //接收一个参数就是图片的位置数 
        function lunBo(a1){ 
            for(var i=0;i<lis.length;i++){ 
                //给所有的图片添加display="none"属性隐藏起来
                lis[i].style.display="none"
            }
            //给当前的传进来的图片位置数给css样式display="block"
            lis[a1].style.display="block"
            tpIndex=a1
            a(tpIndex);
        } 
        //tpIndex监控图片位置
        //每点击left按钮
        /** * tpIndex自减 * 因为图片一共五张，减下去就是负数了 * 所有这里要加一个判断，然后重新赋值 * 然后给lunbo函数传当前的图片位置 */
        left.onclick= function(){ 
            tpIndex--;
            if(tpIndex<0){ 
                //和下标对应
                tpIndex=lis.length-1;//因为lis.length是长度0 1 2 3 4 5 这就多了一个数，所以减一
            }
            lunBo(tpIndex)
        }
        //
        //每点击right按钮
        /** * tpIndex自增 * 从0开始到4 * 因为图片一共五张，加上去就是大于4了 * 所有这里要加一个判断，然后重新赋值 * 然后给lunbo函数传当前的图片位置 */
        right.onclick=function (){ 
            tpIndex++;
            if(tpIndex >lis.length-1){ 
                tpIndex=0;
            }
            lunBo(tpIndex);
        }
    }
    //实现和图片和小圆点的绑定
    {    //获取所有节点
        var yuanDians=document.querySelectorAll(".yuanDian ul li")
        // 给小原点添加样式
        function a(tpIndex){ 
            for(var i=0;i<yuanDians.length;i++){ 
                yuanDians[i].style.background=""
            }
            yuanDians[tpIndex].style.background="red"
        }
        //循环给小圆点添加点击事件
        for(let i=0;i<yuanDians.length;i++){ 
            yuanDians[i].onclick=function(){ 
                tpIndex=i;// 监控图片当前位置 就是当前点击时的的下标
                a(tpIndex) // 给a函数传参,当前小圆点添加样式
                lunBo(tpIndex) // 同时也给赋值轮播的函数传参，给当前图片显示出来
                } 
            }
    }
    // 实现鼠标移入停止轮播，移出开始轮播
    {    
        //方便计时器使用，简化代码
        function run(){ 
            tpIndex++; 
            if(tpIndex >lis.length-1){ 
                tpIndex=0;
            }
            lunBo(tpIndex);
            a(tpIndex);
        }
        //添加计时器
        var x=setInterval(run,1000);
        //当鼠标离开的时候开始自动轮播
        box.onmouseleave=function(){ 
            x=setInterval(run,1000);
        }
        //鼠标进入停止轮播
        box. onmouseenter=function(){ 
            clearInterval(x)    
        }
    }
}
        </script>
    </body>
</html>