原生js實現輪播圖

l1621834733發表於2020-10-25
JS

一、寫入網頁基本結構
body:
網頁的最外部設定一個id為wrap的容器，取代body，這樣方便我們做一些初始化
css:
初始化：
包括外邊距margin、內邊距padding、連結a、圖片img、輸入框input、列表ul、li、網頁html、body一系列初始化
css設定：
根據圖片數與圖片寬度設定輪播圖寬度
二、設定js邏輯
需要完成的功能有：
1、滑鼠移入輪播圖逐漸出現左右浮動塊
2、點選浮動塊切換圖片
3、點選小圓點切換圖片
4、切換圖片同時切換小圓點
5、自動播放
6、滑鼠移入輪播圖自動播放停止、移出恢復自動播放
程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    a{
        text-decoration: none;
    }
    ul,li{
        list-style: none;
    }
    img{
        display: block;
    }
    input{
       outline: none;
    }
    html,body{
        height: 100%;
        overflow: hidden;
    }
    .content{
        position: absolute;
        top: 0;
        left: 0;
    }
    .banner{
        width: 600px;
        height: 400px;
        position: relative;
        margin: 50px auto;
        overflow: hidden;
    }
    .banner .bannerList{
        position: absolute;
        left:-600px;
        top: 0;
        width: 4800px;
        height: 100%;
    }
    .banner .bannerList li{
        float: left;
        width: 600px;
        height: 400px;
       
    }
    .banner .bannerList li img{
        height: 100%;
        width: 100%;
    }
    .banner .left,.banner .right{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 30px;
        height: 50px;
        border: solid 2px gray;
        font-size:30px;
        text-align: center;
        line-height: 50px;
        color: rgb(255, 255, 255);
        opacity: 0;
        transition: 1000ms;
    }
    .banner .left{
        left: 0px;
    }
    .banner .right{
        right: 0px;
    }
    .banner .point{
        position: absolute;
        bottom: 30px;
        left:50%;
        transform: translateX(-50%);
    }
    .banner .point li{
        float: left;
        width: 15px;
        height: 15px;
		border-radius: 50%;
		background-color: gray;
        margin: 5px;
    }
    </style>
    <script type="text/javascript">
    window.onload=function(){
        var bannerLeft=document.querySelector('.banner .left');
        var bannerRight=document.querySelector('.banner .right');
        var banner=document.querySelector('.banner')
        var bannerList=document.querySelector('.banner .bannerList')
        var liList=document.querySelectorAll('.banner .bannerList li')
        var pointList=document.querySelectorAll('.banner .point li')
        var start=-600;


            timer2=setInterval(function(){              //設定定時器，自動播放
            var a=30;
            var index=bannerList.offsetLeft/-600+1;
            if(bannerList.offsetLeft==-4200){
                    bannerList.style.left=-600+'px'         //無縫操作
                    index=2;
                }
                if(bannerList.offsetLeft==-3600){
                    index=1;
                }
            for(var i=0;i<pointList.length;i++){
                   pointList[i].style.backgroundColor='grey'
               }
               pointList[index-1].style.backgroundColor='red';
            timer3=setInterval(function(){
                a=a-1
                bannerList.style.left=bannerList.offsetLeft-20+'px';
                
                if(a==0){
                    clearInterval(timer3)
                }
            },
                30)
                if(bannerList.offsetLeft==-4200){
                    bannerList.style.left=-600+'px';
                } 
        },4000)


        // 建立一個移入出現函式
        banner.addEventListener('mouseover',occur)
        function occur(){
        bannerLeft.style.opacity=1;         //移入逐漸出現
        bannerRight.style.opacity=1;        
        clearInterval(timer2);               //移入取消自動播放
    }
        banner.addEventListener('mouseout',function(){
            bannerLeft.style.opacity=0;
            bannerRight.style.opacity=0;        //移出消失
            timer2=setInterval(function(){          //移出恢復自動播放
            var a=30;
            timer3=setInterval(function(){
                a=a-1
                bannerList.style.left=bannerList.offsetLeft-20+'px';
                
                if(a==0){
                    clearInterval(timer3)
                }
            },
                30)
                if(bannerList.offsetLeft==-4200){
                    bannerList.style.left=-600+'px';
                }
        },4000)

        })
        //設定左右浮動塊點選變色以及滾動
        function colorChange(){
            this.style.color='black';
            if(this.className=='right'){        //判斷是哪邊被點選
                    var index=bannerList.offsetLeft/-600+1;
                    var a=30;
                    timer=setInterval(function(){       //點選浮動塊切換圖片
                    a=a-1;
                    bannerList.style.left=bannerList.offsetLeft-20+'px';
                    if(a!=0){
                        bannerRight.removeEventListener('mousedown',colorChange)
                        bannerLeft.removeEventListener('mousedown',colorChange)
                        
                    }
                    if(a==0){
                        clearInterval(timer);
                        bannerRight.addEventListener('mousedown',colorChange)
                        bannerLeft.addEventListener('mousedown',colorChange)
                    }
                },30)
                if(bannerList.offsetLeft==-4200){
                    bannerList.style.left=-600+'px'
                    index=2;
                }
                if(bannerList.offsetLeft==-3600){
                    index=1;
                }
               for(var i=0;i<pointList.length;i++){
                   pointList[i].style.backgroundColor='grey'
               }
               pointList[index-1].style.backgroundColor='red';
            }
            else{
                    var a=30;
                    var index=bannerList.offsetLeft/-600-1;
                    timer=setInterval(function(){
                    a=a-1;
                    bannerList.style.left=bannerList.offsetLeft+20+'px';
                    if(a!=0){
                        bannerLeft.removeEventListener('mousedown',colorChange)
                        bannerRight.removeEventListener('mousedown',colorChange)
                    }
                    if(a==0){
                        clearInterval(timer);
                        bannerLeft.addEventListener('mousedown',colorChange)
                        bannerRight.addEventListener('mousedown',colorChange)
                    }
                },30)
                if(bannerList.offsetLeft==0){
                    bannerList.style.left=-3600+'px'
                    index=5;
                }
                if(bannerList.offsetLeft==-600){
                    index=6;
                }
                for(var i=0;i<pointList.length;i++){
                   pointList[i].style.backgroundColor='grey'
               }
               pointList[index-1].style.backgroundColor='red';
            }
        }
        function colorReturn(){
            this.style.color='white'
        }
        bannerLeft.addEventListener('mousedown',colorChange)
        bannerRight.addEventListener('mousedown',colorChange)
        bannerLeft.addEventListener('mouseup',colorReturn)
        bannerRight.addEventListener('mouseup',colorReturn)
        for(var i=0;i<pointList.length;i++){
            pointList[i].onmousedown=function(){
                for(var i=0;i<pointList.length;i++){
                    pointList[i].style.backgroundColor='gray'
                }
                this.style.backgroundColor='red';
                for(var b=0;b<pointList.length;b++){
                    if(pointList[b].style.backgroundColor==this.style.backgroundColor){
                        var a=30;
                        var step=-(b+1)*600-bannerList.offsetLeft;
                        timer1=setInterval(function(){
                        a=a-1;
                        bannerList.style.left=bannerList.offsetLeft+step/30+'px';
                        if(a!=0){
                        bannerLeft.removeEventListener('mousedown',colorChange)
                        bannerRight.removeEventListener('mousedown',colorChange)

                    }
                        if(a==0){
                            clearInterval(timer1)
                            bannerLeft.addEventListener('mousedown',colorChange)
                            bannerRight.addEventListener('mousedown',colorChange)
                        }
                     },20)
                    }
                }
            }
        }
        
    }
    </script>
</head>
<body>
    <div id="wrap">
        <!-- 寫出輪播圖框架 -->
        <div class="banner">
            <ul class="bannerList">
                <li>
                    <img src="./img/james6.jpeg">
                </li>
                <li>
                    <img src="./img/james1.jpg">
                </li>
                <li>
                    <img src="./img/james2.jpg">
                </li>
                <li>
                    <img src="./img/james3.jpg">
                </li>
                <li>
                    <img src="./img/james4.jpg">
                </li>
                <li>
                    <img src="./img/james5.jpeg">
                </li>
                <li>
                    <img src="./img/james6.jpeg">
                </li>
                <li>
                    <img src="./img/james1.jpg">
                </li>
            </ul>
             <!-- 左右兩個箭頭 -->
             <span class="left"> < </span>
            <span class="right"> > </span>
             <!-- 新增小圓點 -->
             <ul class="point">
                 <li style="background-color: red;"></li>
                 <li></li>
                 <li></li>
                 <li></li>
                 <li></li>
                 <li></li>
             </ul>
        </div>
    </div>
    
</body>
</html>

其中，將圖片替換為其他圖片可以實現不同的輪播圖，值得一提的是，六張圖片的輪播圖需要放八張圖，第八張與第二張一致，第一張與第七張一致，真正呈現出來的僅僅是第二張到第七張

相關文章