原生JS写轮播效果

一、设计概述

这次的轮播图功能很全面，里面有鼠标事件效果，比如鼠标移入，停止自动播放，鼠标离开图片开始自动播放，当鼠标移入是会有箭头出现，鼠标离开始时箭头就会消失，图片可以通过点击左右箭头来切换，也可以通过点击li里面的小圆点来切换。这个轮播图主要运用到DOM，事件，Date对象里面自动调用函数和清空自动调用函数的知识了。

二、程序运行效果

三、代码

body代码

<div id="banner" onmouseover="oClear()" onmouseout="oStart()">
        <img src="img/1.jpg" id="img" >
        <ul id="list">
            <li class="bg" onclick="bannerIcon(0)"></li>
            <li onclick="bannerIcon(1)"></li>
            <li onclick="bannerIcon(2)"></li>
            <li onclick="bannerIcon(3)"></li>
            <li onclick="bannerIcon(4)"></li>
        </ul>
        <a  onclick="leftBtn()" id="left" class="leftBtn" href="javascript:void (0)">&lt;</a>
        <a  onclick="rightBtn()" id="right" class="rightBtn" href="javascript:void (0)">&gt;</a>
</div>

css样式代码

<style>
        *{padding: 0;margin: 0;text-decoration: none;border: 0;list-style: none;}
        #banner{width: 500px;height: 333px;position: relative;margin: auto;}
        #banner #list{width: 100px;height: 20px;position: absolute;bottom: 0;left: 50%;margin-left: -50px;}
        #banner #list li{width: 10px;height: 10px;border-radius: 5px;background: black;float: left;margin-right: 10px;margin-top: 5px;}
        #banner #list li:hover{cursor: pointer;background: darkred;}
        .bg{background: darkred !important;}
        #banner .leftBtn{left: 0;}
        #banner .rightBtn{right: 0;}
        #banner .leftBtn ,.rightBtn{display:none;width:30px; height:50px;color: black;background: rgba(0,0,0,.3);position: absolute;top: 50%;margin-top: -25px;line-height: 50px;text-align: center;}
        #banner .leftBtn:hover, .rightBtn:hover{background: rgba(0,0,0,.8);color: #fff;}
</style>

js代码

 var index = 0;
        var arr = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
        function oBannerImg() {
            index++;
            if (index>=arr.length){
                index=0;
            }
            var img = document.getElementById("img");
            img.src=arr[index];
            oDot();
        }
        function oDot() {
            var list = document.getElementById("list");
            var li= list.getElementsByTagName("li");
            for(var i = 0;i<li.length;i++){
               li[i].className="";
            }
            li[index].className="bg";
        }
        var h = setInterval("oBannerImg()",1000);
        function oClear() {
            clearInterval(h);
            var left = document.getElementById("left");
            var right = document.getElementById("right");
            left.style.display="block";
            right.style.display="block";
        }
        function oStart() {
            h = setInterval("oBannerImg()",1000);
            var left = document.getElementById("left");
            var right = document.getElementById("right");
            left.style.display="none";
            right.style.display="none";
        }
        function leftBtn() {
            index == 0 ? index=arr.length-1:index--;
            var img = document.getElementById("img");
            img.src=arr[index];
            oDot();
        }
        function rightBtn() {
            index == arr.length-1?index=0:index++;
            var img = document.getElementById("img");
            img.src=arr[index];
            oDot();
        }
        //点点图片跟着变
        function bannerIcon(p) {
            index = p;
            var img = document.getElementById("img");
            img.src=arr[index];
            oDot();
        }

如果你感觉我这篇文章对您有帮助的话，或者感觉这篇文章写的不错，可以给我点个赞，作为我的鼓励！如果有什么对代码不理解的问题，随时可以私信我，我会帮你解答哒~