轮播图（小栗子）

来源：互联网发布：java语言入门知识编辑：程序博客网时间：2024/05/02 01:01

备忘：

<!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.onclick=function(){            clearInterval(interval);            index-=1;            if(index<0){                index=imgArr.length-1;            }            show();            timer();         }        btn2.onclick=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;}

0 0