JS实现轮播图

CSS样式

HTML样式

 
    <div class="main">
        
        <ul class="cs">
            <li class="on"><a href="javascript:void(0)"><img src="images/1.jpg" alt="">a>li>
            <li><a href="javascript:void(0)"><img src="images/2.jpg" alt="">a>li>
            <li><a href="javascript:void(0)"><img src="images/3.jpg" alt="">a>li>
            <li><a href="javascript:void(0)"><img src="images/4.jpg" alt="">a>li>
        ul>
        
        <ol class="slt">
            <li class="current">li>
            <li>li>
            <li>li>
            <li>li>
        ol>
        
        <a href="javascript:void(0)" class="arrow al"><a>
        <a href="javascript:void(0)" class="arrow ar">>a>
    div>

JS样式

<script>
        var main = document.querySelector('.main');
        var img = document.querySelectorAll('div.main ul>li');
        var li = document.querySelectorAll('div.main .slt>li');
        var al = document.querySelector('.al');
        var ar = document.querySelector('.ar');
        var len=lis.length;//轮播图的个数
        var index = 0;//保存显示的轮播图的索引
        var t;//轮播的id
        //1.自动轮播
        t = setInterval(show, 1000);
        //2.鼠标经过轮播区，暂停轮播
        main.onmouseenter = function () {
     
            clearInterval(t);
        }
        //鼠标离开轮播区，继续轮播
        main.onmouseleave = function () {
     
            t = setInterval(show, 1000)
        }
        //3.箭头轮播
        //左箭头
        al.onclick = function () {
     
            show1();
        }
        //右箭头
        ar.onclick = function () {
     
            show();
        }
        //4.指示器轮播
  		for(var i=0;i<li.length;i++){
     
            li[i]._index=i;//添加属性，保存位置
            li[i].onclick=function(){
     
            	//上一次被选中的改为非选中
                li[index].className='';
                //上一个显示的轮播图，消失
                img[index].className = '';
                //被点击的li添加class
				img[this._index].className="on";
				//显示对应的轮播图
                this.className='current';
                //修改被选中的索引
                index=this._index;
            }
        }
         //向右轮播
        function show() {
     
            img[index].className = '';//当前显示的轮播图变为隐藏
            li[index].className='';//上一个指示器改变
            index++;//索引递增
            if (index == img.length) {
     
                index = 0;//最后一张时，切换为第一张
            }
            img[index].className = 'on';//下一张显示
            li[index].className='current'//下一个指示器改变
        }
		//显示上一张
        function show1() {
     
            img[index].className = '';//当前显示的轮播图变为隐藏
            li[index].className='';//上一个指示器改变
            index--;
            if (index == -1) {
     
                index = img.length - 1;
            }
            img[index].className = 'on';//上一张显示
            li[index].className='current'//下一个指示器改变
        }
    </script>