html-css-javaScript实现图片轮播

素颜马尾好姑娘i 2022-05-15 11:48 184阅读 0赞

先看效果：  
![这里写图片描述][70]

有三张图片，图片两侧有左右切换按钮，右下侧的小圆点点击可以随意切换图片。  
鼠标没移动到图片上时，每隔三秒自动切换图片。

### html ###

下面是html文件：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
    <div class="main" id="main">
        
        <div class="banner" id="banner">
            
            <a href="">
                <div class="banner-slide slide1 slide-active"></div>
            </a>
            <a href="">
                <div class="banner-slide slide2"></div>
            </a>
            <a href="">
                <div class="banner-slide slide3"></div>
            </a>
            
        </div>
        
        <a href="javascript:void(0)" class="button prev" id="prev"></a>
        <a href="javascript:void(0)" class="button next" id="next"></a>
        
        <div class="dots" id="dots">
            <span class="active"></span>
            <span></span>
            <span></span>
        </div>
    </div>
    
    <script src="srcipt.js"></script>
    </body>
    </html>

**里面的**

### css ###

*{ margin: 0; padding: 0; }
    ul{ list-style: none; }
    body{ font-family: "Apple Braille"; color: #14191e; }
    /*大的main盒子*/
    .main{ width: 1200px; height: 460px; margin: 30px auto; overflow: hidden;/*超出范围隐藏*/ position: relative; }
    
    .banner{ width: 1200px; height: 460px; position: relative; overflow: hidden; }
    
    .banner-slide{ width: 1200px; height: 460px; position: absolute; background-repeat: no-repeat; display: none; /*相对于banner定位，而不是body，所以banner有relative*/ }
    .slide1{ background: url("bg1.jpg"); }
    .slide2{ background: url("bg2.jpg"); }
    .slide3{ background: url("bg3.jpg"); }
    
    .slide-active{ display: block; }
    
    .button{ /*出现在图片上方，需要定位*/ position: absolute;/*相对父盒子定位，父盒子是main，所以main：relative*/ width: 40px; height: 80px; left: 244px; top: 50%; margin-top: -40px; background: url("arrow.png") no-repeat center; }
    /*箭头划过时有半透明的效果*/
    .button:hover{ /* background: #333;/*背景颜色覆盖button背景图片*/ background-color: #333;/*滑动时改变背景颜色，在背景颜色的基础上显示图片*/ opacity: 0.8; filter: alpha(opacity=80);/*为了兼容其他浏览器*/ }
    .prev{ transform: rotate(180deg)/*水平翻转*/ }
    .next{ right:0; left: auto;/*没有左边的效果，按钮右侧出现*/ }
    .dots{ position: absolute; right: 20px;/*在右侧*/ bottom: 24px; text-align: right; }
    .dots span{ display: inline-block;/*出现在一条线上*/ width: 12px; height: 12px; border-radius: 50px; background-color: rgba(7,17,27,0.4);/*同时设置透明度*/ margin-right: 8px; line-height: 12px; box-shadow: 0 0 0 2px rgba(255,255,255,0.8) inset;/*添加白色描边 inset:内阴影*/ cursor: pointer; }
    
    .dots span.active{ box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset;/*当前背景色是白色*/ background: #fff; }

### js ###

//鼠标滑过，停止
    //封装一个代替getElementById()的方法
    function byId(id) { 
        //如果是个字符串ID，就返回他的DOM对象
       return  typeof id==="string"?document.getElementById(id):id;
    }
    
        var index=0,timer=null,banner=byId("banner").getElementsByTagName("div"),len=banner.length,dots=byId("dots").getElementsByTagName("span")
        ,prev=byId("prev"),next=byId("next");
    //span个数和div图片相同
    
    function slideImg() { 
        //获取鼠标滑动的范围
        var main=byId("main");
        //滑过清除定时器，离开继续
        main.onmouseover=function () { 
            if(timer){
                clearInterval(timer);
            }
        }
        main.onmouseout=function () { 
            timer=setInterval(function () { 
                index++;
                //len=3,index只能是0，1，2
                if(index>=len){
                    index=0;
                }
                //切换图片,点击按钮也可以实现
                changeImg();
            },3000);//每隔一段时间调用,每三秒span是active
        }
        //自动在main上触发
        main.onmouseout();
    
        //点击圆点切换图片，遍历所有圆点绑定点击事件
        for(var d=0;d<len;d++){
            //给所有span添加一个ID的属性，值为d，作为当前span的索引
            dots[d].id=d;
    
            dots[d].onclick=function () { 
    
                //改变index我饿当前span的索引，但click是最终值3，因为function改变作用域
                index=this.id;
                this.className="active";
                changeImg();
            }
        }
    
        //下一张，上一张
        next.onclick=function () { 
            index++;
            if(index>=len){
                index=0;
            }
            changeImg();
        }
    
        prev.onclick=function () { 
            index--;
            if(index<0){
                index=2;
            }
            changeImg();
        }
    
    }
    
    function changeImg() { 
       // banner[index].className='slide-active';//不管元素上有没有类，className属性设置的类会重写元素的类
        //遍历img，dots，清除div，以及dots阴影
        //先隐藏所有，再显示当前
        for(var i=0;i<len;i++){
            banner[i].style.display='none';
            dots[i].className="";
        }
        banner[index].style.display='block';
        dots[index].className="active";
    }
    
    
    slideImg();

[70]: /images/20220515/1d5fa10ea6694639996f77e7d171c076.png