Js实现轮播图（点击指示点、上下页切换以及自动轮播）

JS实现轮播图

• 点击指示点完成切换
• 点击上下页完成切换
• 实现自动轮播

html部分

//注：获取鼠标事件的容器center没有设置大小，如果出现鼠标移出无法继续轮播
//	可向下挪动鼠标,或者给center容器设置大小
<div class="center">
        <div class="slideshow" id="slideshow">
            <img class="show" src="lunbo1.jpg" />
            <img src="lunbo2.jpg" />
            <img src="lunbo3.jpg" />
            <img src="lunbo4.jpg" />
            <img src="lunbo5.jpg" /> 
            
        </div>
        <ul id="slideshowPoints">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class="slideshowPage" id="slideshowPage">
            <img src="page_pre.png" />
            <img src="page_next.png"/>
        </div>
    </div>

CSS样式部分

<style>
        *{
     
            margin: 0;
            padding: 0;
        }
        .slideshow{
     
            width: 600px;
            height:390px ;
            margin: 0px auto;
            overflow: hidden;
        }
        .slideshow img{
     
            width: 600px;
            height:390px;
            display: none;
        }
        .slideshow .show{
     
            display: block;
        }
        
        #slideshowPoints {
     
            width: 600px;
            margin: 0 auto;
            overflow: hidden;
            
        }
        #slideshowPoints  li {
     
            list-style: none;
            width: 110px;
            height: 5px;
            background-color: lightgrey;
            margin: 5px 5px;
            float: left;
        }
        #slideshowPoints  li:hover{
     
            background-color: #5396de;
            cursor: pointer;
        }
        #slideshowPoints .active{
     
            background-color: #5396de;
            cursor: pointer;
        }
        .slideshowPage{
     
            width:600px ;      
            margin: 0 auto; 
        }
        .slideshowPage img{
     
            width: 12px;
            height: 22px;
            margin-right: 570px;
            cursor: pointer;
            
        }
        .slideshowPage img:last-child{
     
            margin: 0;
        }
    </style>

JS部分

<script>
        window.onload=function(){
     
            //记录当前索引
            var index=0;

            //通过获取id获取图片容器
            var slideshowBox=document.getElementById("slideshow");
            //通过获取标签获取容器下的图片
            var pics=slideshowBox.getElementsByTagName("img");

            //通过获取id获取指示点容器
            var slideshowPoints=document.getElementById("slideshowPoints");
            //通过获取标签获取容器下的图片
            var points=slideshowPoints.getElementsByTagName("li");

            //通过获取id获取上下切换点容器
            var slideshowPages=document.getElementById("slideshowPage");
            //通过获取标签获取容器下的图片
            var pages=slideshowPages.getElementsByTagName("img");
            
            var pre=pages[0];
            var next=pages[1];

            //点击指示点时切换图片
            for(let i=0;i<pics.length;i++){
     
                //绑定指示点点击事件
                points[i].onclick=function(){
     

                    for(var j=0;j<pics.length;j++){
     
                        //清除当前图片、指示点激活类
                        points[j].className="";
                        pics[j].className="";   
                    }
                    //给当前图片、指示点添加激活类
                    pics[i].className="show";
                    this.className="active";
                    //this是指  指向points[i]这个元素本身，在这指第i个points元素
                    index=i;  
                }
            }

            //点击上页切换时
            pre.onclick=function(){
     
                //记录索引
                if(index==0){
     
                    index=pics.length-1;
                }else{
     
                    index=index-1;
                }       
                //清除当前图片、指示点激活类
                for(var j=0;j<pics.length;j++){
     
                    pics[j].className="";
                    points[j].className="";
                }
                //更改所激活图片类名、指示点类名
                pics[index].className="show";
                points[index].className="active";       
            }

            //点击下页切换时
            next.onclick=function(){
     
                //记录索引                    
                if(index==pics.length-1){
     
                    index=0;
                }else{
     
                    index=index+1;
                }                        
                //清除当前图片、指示点激活类
                for(var j=0;j<pics.length;j++){
     
                    pics[j].className="";
                    points[j].className="";
                }
                //更改所激活图片类名、指示点类名
                pics[index].className="show";
                points[index].className="active";                 
            }

            //由于我的指示点与上下页切换键不在一个div内，且图片是自动变化的难以选中，
            //所以需要定义一个全局arr获取一个容器,以此获取鼠标的事件
            var aar=document.querySelector(".center");
            //自动轮播
            //setInterval()为计时器，后面的1000表示1000毫秒，即1s，表示每过1s切换
            var Vet=setInterval(function(){
     
                lunbo()
            },1000);
            aar.onmouseover=function(){
     
            //鼠标进入aar容器（center）时，清空轮播
                clearInterval(Vet);
            }
            aar.onmouseout=function(){
     
            //鼠标离开进入aar容器（center）时，继续轮播
            //要加上Vet变量，因为鼠标进入时清空的是Vet的轮播对象	
            //如果不加则是新建轮播对象，则会破坏轮播索引导致出错
                Vet=setInterval(function(){
     
                    lunbo()
                },1000);
                
            }
            
            function lunbo(){
     
                for(var j=0;j<pics.length;j++){
     
                    pics[j].className="";
                    points[j].className=""
                }
                

                if(index<4){
     
                    index=index+1;
                }else{
     
                    index=0;
                }
                   pics[index].className="show";
                points[index].className="active";             
            }
        }
    </script>

图片部分