好例题------轮播图_轮播图题目-CSDN博客

本文链接：https://blog.csdn.net/weixin_44389868/article/details/87735215
<style>
        #box{width: 590px;height: 470px;position: relative;margin-left: 400px}
        #con div{display: none}
        #con div.one{display: inline-block;}
        #head{width: 100%;position: absolute;top: 50%;margin-top: -16px}
        #head .pic{background: rgba(0, 0,0, 0.3)}
        #head .pic1{float: left;}
        #head .pic2{float: right;}
        #pc{position: absolute;bottom: 10px;left: 50%;transform: translateX(-50%);}
        #pc li{list-style: none;width: 10px;height: 10px;border-radius: 50%;border: 1px solid #f4f4f4;float: left;margin-left: 10px}
        #pc .two{background: #fff;}
</style>
<body>
    <div id="box">
        <!-- 轮播图 -->
        <div id="con">
            <div class="one"><img src="img/02.jpg"></div>
            <div><img src="img/03.jpg"></div>
            <div><img src="img/04.jpg"></div>
            <div><img src="img/05.jpg"></div>
        </div>
        <!-- 箭头 -->
        <div id="head">
            <img src="img/l1.png" class="pic pic1">
            <img src="img/l2.png" class="pic pic2">
        </div>
        <!-- 小圆点插件 -->
        <ul id="pc">
            <li class="two"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        //获取轮播图片
        var con=document.getElementById('con').getElementsByTagName('div');
        //获取箭头图片
        var head=document.getElementById('head').getElementsByTagName('img');
        //获取最大盒子轮播区域
        var box=document.getElementById('box');
        //获取小圆点插件
        var pc=document.getElementById('pc').getElementsByTagName('li');
        var index=0;//图片索引
        var t;//定时器编号
        //每隔2秒执行一次cont函数
        t=setInterval(cont,2000);
        //小圆点插件点击事件
        for(var j=0;j<pc.length;j++){
            pc[j]._index=j;
            pc[j].onclick=function(){
                //清除当前样式
                pc[index].className='';
                con[index].className='';
                //修改下一个的样式
                con[this._index].className='one';
                pc[this._index].className='two';
                index=this._index;
            }
        }

        //鼠标放在图片上图片不再轮播
        box.onmouseenter=function(){
            this.style.cursor='pointer';
            clearInterval(t);
        };
        //鼠标离开图片上图片继续轮播
        box.onmouseleave=function(){
            this.style.cursor='default';
            setInterval(cont,2000);
        }
        //箭头触碰事件
        for(var i=0;i<head.length;i++){
            head[i].onmouseenter=function(){
                this.style.background='rgba(0,0,0,0.6)'
            };
            head[i].onmouseleave=function(){
                this.style.background='rgba(0,0,0,0.3)'
            }
        }
        //右箭头点击事件
        head[1].onclick=function(){
            cont();
        }
        //左箭头点击事件
        head[0].onclick=function(){
            conts();
        }
        
        //下一张变换
        function cont(){
            //清除当前样式
            pc[index].className='';
            con[index].className='';
            index++;
            if(index==con.length){
                index=0;
            }
            con[index].className='one';
            pc[index].className='two';
        }
        //上一张变换
        function conts(){
            //清除当前样式
            pc[index].className='';
            con[index].className='';
            index--;
            if(index==-1){
                index=con.length-1;
            }
            con[index].className='one';
            pc[index].className='two';
        }
    </script>
</body>