前端全堆疊大佬是如何使用javaScript實作一個無縫輪播（最終版）-有解無憂

效果圖：
代碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>優化后的無縫輪播圖</title>
    <style>
        body{-webkit-user-select: none; }
        ul,li{
            list-style: none;
        }
        #outer{
            width: 400px;
            height: 300px;
            position: relative;
            margin: 50px auto;
            overflow: hidden;
            cursor: pointer;
        }
        #inner{
            width: 2000px;
            height: 300px;
            position: absolute;
            left:0;
        }
        #inner div{
            width: 400px;
            height: 300px;
            float: left;
        }
        #ulHead{
            position: absolute;
            top: 250px;
            right: 20px;
        }
        #ulHead li{
            float: left;
            width: 20px;
            height: 20px;
            line-height: 20px;
            border-radius: 50%;
            text-align: center;
            background: #CCC;
            border: 1px solid orange;
            margin-right: 10px;
        }
    </style>
</head>
<body>
<div id="outer">
    <div id="inner">
        <div style="background:olive;"> 歡迎</div>
         <div style="background:blueviolet;"> 大家</div>
         <div style="background:aquamarine;"> 來到</div>
         <div style="background:chocolate;"> 孫叫獸</div>
         <div style="background:darkgoldenrod;"> 的博客</div>
    </div>
    <ul id="ulHead">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>
<script>
    var innerDiv=document.getElementById("inner"),
            innerDivChild=innerDiv.getElementsByTagName("div");
    var ulHeadLi=document.getElementById("ulHead").getElementsByTagName("li");
    for(var i= 0,len=ulHeadLi.length;i<len;i++){
        ulHeadLi[i].index=i;
        var curNumber=null;
        /*滑鼠點擊的時候發生的；*/
        ulHeadLi[i].onclick=function(){
            startMove(innerDiv,{"left":-this.index*400});//開始運動
            autoMove.index=this.index;/*滑鼠點擊的時候，改變autoMove的索引值,這樣定時器再次運動的時候，就會以當前的索引往下一個跳轉了*/
            clearInterval(timer);
            timer=setInterval(autoMove,2000);
            /*下面是滑鼠點擊后的顏色設定*/
            liBackground();
        };
        /*滑鼠放在圖片上，離開圖片的效果*/
        innerDivChild[i].onmouseover=function(){
            clearInterval(timer);
        };
        innerDivChild[i].onmouseout=function(){
            timer=setInterval(autoMove,2000);
        }
    }
    /*復制第一張圖片添加到最后；實作無縫滾動*/
    var oFirstDiv=innerDiv.getElementsByTagName("div")[0];
    var oCopy=oFirstDiv.cloneNode(true);
    innerDiv.appendChild(oCopy);
    innerDiv.style.width=innerDiv.offsetWidth+oFirstDiv.offsetWidth+"px";
    /*下面是自動運動的*/
    autoMove.index=0;
    function autoMove(){
        autoMove.index++;
        if(autoMove.index==6){//如果索引值是6，則馬上圖片換成第一張圖片；
            innerDiv.style.left=0;
            autoMove.index=1;//從第一張，往第二張走；
        };
        liBackground();
        startMove(innerDiv,{"left":autoMove.index*-400});
    }
    var timer=window.setInterval(autoMove,2000);
    /*下面是設定LI的背景顏色*///參考了autoMove上的index屬性；
    ulHeadLi[autoMove.index].style.background="orange";/*給第一個li默認的顏色*/
    function liBackground(){
        /*設定li的顏色*/
        for(var i= 0,len=ulHeadLi.length;i<len;i++){
            ulHeadLi[i].style.background=""/*清空li的屬性；*/
        }
        if(autoMove.index==5){/*第六章圖片的時候，讓第一個li選擇*/
            ulHeadLi[0].style.background="orange";
        }else{
            ulHeadLi[autoMove.index].style.background="orange";
        }
    }
    /*運動的框架*/
    function startMove(ele, json, fnEnd) {//json是一個包含樣式的JSON格式字串；
//        var MAX=58;//如果是勻速運動，可以通過這個數控制勻速；
        clearInterval(ele.timer);
        ele.timer=setInterval(function (){
            var booleanTarget=true;
            for(var name in json) {//列舉JSON里面的屬性和目標值；
                var iTarget=json[name];//目標值；
                if(name=='opacity') {//透明度因為要寫兼容性處理,2種寫法，所以opacity需要X100；
                    var cur=Math.round(parseFloat(setCss(ele, name))*100);
                } else if(name=='background'){
                    var cur=json[name];
                } else {
                    var cur=parseInt(setCss(ele, name));//物件的初始值；
                }
                var speed=(iTarget-cur)/8;//速度=(目標值-初始值)/一個數，屬于減速運動；取速度；
                speed=speed>0?Math.ceil(speed):Math.floor(speed);//速度的取整；
//                if(Math.abs(speed)>MAX)speed=speed>0?MAX:-MAX;//如果是勻速，可以通過這個來控制速度；
                if(name=='opacity') {//如果輸入透明度，需要為80這種的，不能是0.8
                    ele.style.filter='alpha(opacity:'+(cur+speed)+')';
                    ele.style.opacity=(cur+speed)/100;
                }else if(name=='background'){
                    ele.style[name]=cur;
                } else {
                    ele.style[name]=cur+speed+'px';
                }
                if(cur!=iTarget) {
                    booleanTarget=false;
                }
            }
            if(booleanTarget) {
                clearInterval(ele.timer);
                if(typeof fnEnd==="function") {
                    fnEnd();
                }
            }
        }, 20);
    }
    function setCss(curEle,attr,value) {//設定CSS屬性值和獲取CSS；如果三個引數就是設定，2個引數就是獲取；att是attribute的縮寫；
        if(typeof value==="undefined"){//如果有第三個引數，就是設定Css；如果沒有就是獲取Css；
            var reg = /^(?:margin|padding|border|float|position|display|background|backgroundColor)$/;
            var flag="getElementsByClassName" in document;
            var value = flag ? window.getComputedStyle(curEle, null)[attr] : curEle.currentStyle[attr];
            return !reg.test(attr) ? parseFloat(value) : value;
        } else{
            switch (attr) {
                case "opacity":
                    curEle["style"][attr] = value;
                    curEle["style"]["filter"] = "alpha(opacity=" + (value * 100) + ")";
                    break;
                case "zIndex":
                    curEle["style"][attr] = value;
                    break;
                default:
                    curEle["style"][attr] = !isNaN(value) ? value += "px" : value;
            }
        }
    };
</script>
</body>
</html>
孫叫獸
CSDN認證博客專家 HTTPS Node.js JavaScript
多年的開發經驗，開發過APP,小程式，網站及系統，以前從事java相關系統研發，目前從事保險，證券，金融相關的前端全堆疊開發作業，微信公眾號：電商程式員
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/238573.html
標籤：其他
上一篇：LeetCode題解：pow(x, n)
下一篇：js實作簡單的俄羅斯方塊小游戲