原生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样式代码

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();
        }

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