1. 程式人生 > >純js做小米官網輪播圖

純js做小米官網輪播圖

在這裡插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>輪播圖</title>
    <style type="text/css">
        .wrap{
            width: 800px;
            height:400px ;
            position: relative;
            cursor: pointer; /*滑鼠變手指*/
        }
        .list{
            list-style: none;
            position: relative;
            padding-left: 0px;
        }
        .item{
            position: absolute;
            opacity: 0;
            transition: all 3s;
        }
        img{
            width: 800px;
            height: 400px;
        }
        .btn{
            width: 50px;
            height: 100px;
            position: absolute;
            top: 150px;
            font-size: 50px;
            color: rgba(0, 0, 0, 0.1);
            z-index: 100;
            border: none;
            outline: none;
            background: rgba(0,0,0,0);
        }
        .btn:hover{
            background: rgba(0, 0, 0, 0.12);
        }
        #goPro{
            left: 0px;
        }
        #goNext{
            right: 0px;
        }
        .item.active{
            opacity: 1;
            z-index: 10;
        }
        .pointList{
            padding-left: 0px;
            list-style: none;
            position: absolute;
            right: 20px;
            bottom: 20px;
            z-index: 999;
        }
        .point{
            width: 8px;
            height: 8px;
            background-color: rgba(0,0,0,0.4);
            border-radius: 100%;
            float: left;
            margin-right: 10px;
            border: 2px solid rgba(255,255,255,0.6);

        }
        .point.active{
            background-color: rgba(255,255,255,0.4);
        }
    </style>
</head>
<body>
<div class="wrap">
    <ul class="list">
        <li class="item active "><img src="images/xmad_1542718183295_gZCXT.jpg" /></li>
        <li class="item"><img src="images/xmad_1542971774587_QVYos.jpg" /></li>
        <li class="item "><img src="images/xmad_15369176983433_sWNIg.jpg"/></li>
        <li class="item "><img src="images/xmad_15419444592813_JwZlv.jpg"/></li>
        <li class="item"><img src="images/xmad_15427940817559_aubLz.jpg"/></li>
    </ul>
    <ul class="pointList">
        <li class="point active" data-index="0"></li>
        <li class="point " data-index="1"></li>
        <li class="point " data-index="2"></li>
        <li class="point" data-index="3"></li>
        <li class="point" data-index="4"></li>
    </ul>
    <button type="button" class="btn" id="goPro"><</button>
    <button type="button" class="btn" id="goNext">></button>
</div>
   <script type="text/javascript">
         var items=document.getElementsByClassName("item");
         var points=document.getElementsByClassName("point");
         var goProBtn=document.getElementById("goPro");
         var goNextBtn=document.getElementById("goNext");
         var time=0;
         var index=0;
          function  clearActive() {
             for(var i=0;i<items.length;i++)
             {
                 items[i].className="item";
             }
                 for(var i=0;i<points.length;i++)
                 {
                     points[i].className="point";
                 }
         }
         function goIndex() {
              clearActive();
             points[index].className="point active";
             items[index].className="item active";
         }
         function goNext() {
             if(index<4){
                 index++;
             }
             else{
                 index=0;
             }
             goIndex();
         }
         function goPro() {
             if(index==0){
                 index=4;
             }
             else{
                 index--;
             }
             goIndex();
         }
         goNextBtn.addEventListener("click",function () {goNext();})
         goProBtn.addEventListener("click",function () {goPro();})
         for (var i=0;i<points.length;i++){
             points[i].addEventListener("click",function () {
                 var pointIndex=this.getAttribute("data-index");
                 index=pointIndex;
                 goIndex();
                 time=0;
             })

         }
         setInterval(function () {
             time++;
             if(time==20){
                 goNext();
                 time=0;
             }
             },100);
   </script>
</body>
</html>