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

Dear 丶 2022-12-28 14:16 256阅读 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>