轮播图（小栗子）

最新推荐文章于 2023-10-17 22:48:47 发布

jiaqi2016

最新推荐文章于 2023-10-17 22:48:47 发布

阅读量289

点赞数

分类专栏：备忘

本文链接：https://blog.csdn.net/u010507920/article/details/52705209

版权

备忘专栏收录该内容

23 篇文章 0 订阅

订阅专栏

备忘：

<!doctype html>
 <html lang="zh-cn">
 <head>
   <meta charset="UTF-8">
   <title>轮播图</title>
    <link rel="stylesheet" type="text/css" href="css/lunbostyle.css">
    <link rel="stylesheet" type="text/css" href="css/reset.css">
 </head>
 <body>
    <div class="banner" id="banner-box">
        <img src="images/banner-1.jpg" alt="" id="pic">
        <div class="btn-container clearfix">
            <div class=" btn btn1" id="btn1"> < </div>
            <div class=" btn btn2" id="btn2"> > </div>
        </div>
    </div>
    
 <script>
    var imgArr=["images/banner-1.jpg","images/banner-2.jpg","images/banner-3.jpg","images/banner-4.jpg"];
    var index=0;
    var interval;
    function change(){
        index=(index+1)%4;
        show();
    }
    function show(){
        var imgObj=document.getElementById('pic');
            imgObj.src=imgArr[index];
    }
    function timer(){
        interval=setInterval(change,2000);
    }
    timer();
   
    var btn1=document.getElementById('btn1');
    var btn2=document.getElementById('btn2');
        btn1.οnclick=function(){
            clearInterval(interval);
            index-=1;
            if(index<0){
                index=imgArr.length-1;
            }
            show();
            timer(); 
        }
        btn2.οnclick=function(){
            clearInterval(interval);
            index+=1;
            if(index>imgArr.length-1){
                index=0;
            }
            show();
            timer();
        }
 </script> 
 </body>
 </html>

CSS

*{
    margin:0;
    padding:0;
}
.banner{
    height: 460px;
    width: 1226px;
    position: relative;
    margin: 0 auto;
}
.btn-container{
    width: 1226px;
    height: 80px;
    position: absolute;
    bottom:50%;
    margin-bottom: -40px;
}
.btn{
     color:#000;
     font-size: 40px;
     text-align: center;
     line-height: 80px;
     width: 50px;
     height:80px;
     background: rgba(0,0,0,0.2);
     z-index: 1;
     cursor:pointer;
}
.btn1{
    float:left;
}
.btn2{
    float:right;
}