輪播圖插件基于大神的代碼掘譬,進行優(yōu)化。

在上一篇文章基礎(chǔ)上優(yōu)化后的代碼,主要是刪掉了不必要的第一張前面的那張圖片

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首尾無縫銜接輪播圖</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style: none;
        }
        .wrapall{
            overflow: hidden; /* 一定要設(shè)置8橥埂C闹怠! */
            margin: auto;
        }
    </style>
</head>
<body>
    <div id="lll_slide" class="wrapall">
    </div>
    
    <script type="text/javascript">
        let imgarr = [  // 請確保每一張圖片的寬高比都一樣护糖。
            './imgs/1.jpg',
            './imgs/2.jpg',
            './imgs/3.jpg'
        ];
        
        function Slideshow(obj){
            this.id = obj.id;   // 容器id
            this.container = document.getElementById(this.id); // 獲取容器
            this.resetimgarr = obj.imgarr; // 圖片數(shù)組
            this.curIndex = 0; //當(dāng)前的圖片索引
            this.wdwidth = obj.wdwidth // 獲取當(dāng)前body的寬度褥芒,注意,這里不能用 window.innerWidth;
        }
        
        Slideshow.prototype = {
            resetImgarr(){
                let firstone = this.resetimgarr[0];
                this.resetimgarr.push(firstone); // 尾部加入第一張照片
            },
            setPosition: function(){
                this.setImgList();
                this.setBtns();
            },
            setImgList(){
                this.listbox = document.createElement('ul');    // 創(chuàng)建圖片列表
                this.resetimgarr.map((item,i)=>{
                    let li = document.createElement('li');
                    let img = document.createElement('img');
                    img.src = item;
                    li.appendChild(img);
                    this.listbox.appendChild(li);
                });
                this.container.appendChild(this.listbox);   // 將圖片列表添加進 對應(yīng) id 的容器里嫡良。
                let styleE = document.createElement('style'); // 動態(tài)添加css樣式
                styleE.innerHTML = `
                    #`+this.id+`{
                        width: `+ this.wdwidth +`px;
                    }
                    #`+this.id+` ul{
                        width: `+ this.resetimgarr.length * this.wdwidth +`px;
                        display: flex;
                        position: relative; /* 相對定位锰扶,用于移動 */
                        left: 0;    /* 設(shè)置初始移動位置 */
                    }
                    #`+this.id+` ul li{
                        width: `+this.wdwidth+`px;
                    }
                    #`+this.id+` ul li img{
                        width: 100%;
                        height: auto;
                        display: block;
                    }`;
                this.container.appendChild(styleE); // 將style標(biāo)簽放進文檔里
            },
            setBtns(){
                let btnBox = document.createElement('div');
                let prevBtn = document.createElement('button');
                let nextBtn = document.createElement('button');
                prevBtn.innerHTML = '上一張';
                nextBtn.innerHTML = '下一張';
                prevBtn.className = 'prevBtn';
                nextBtn.className = 'nextBtn';
                btnBox.appendChild(prevBtn);
                btnBox.appendChild(nextBtn);
                this.container.appendChild(btnBox);
            },
            scrollE(direction){ // 一張圖移動完成
                let eachMove = direction * 10; // 每一步移動的距離,并且控制方向
                let tmpMoveAll = 0
                if(direction === 1){
                    if(this.curIndex >= 3){ //到尾部最后一張后,重置到第一張
                        this.curIndex = 0;
                    }
                }else if(direction === -1){
                    if(this.curIndex <= 0){ //到尾部最后一張后寝受,重置到第一張
                        this.curIndex = 3;
                    }
                }
                
                let beginE = setInterval(()=>{
                    if(Math.abs(tmpMoveAll)>=this.wdwidth){
                        clearInterval(beginE);
                        this.curIndex += direction;
                    }else{
                        tmpMoveAll += eachMove;                     
                        this.listbox.style.left = -tmpMoveAll - this.curIndex*this.wdwidth  +"px";
                    }
                },1);
            },
            scrollAll(){    // 多張圖輪播
                let beginAll = setInterval(()=>{
                    this.scrollE(1);
                },4000);
            },
            Init(){
                this.resetImgarr();
                this.setPosition();
                this.scrollAll();
                
                this.container.querySelector('.prevBtn').addEventListener('click',()=>{ // 使用箭頭函數(shù)少辣,防止this指向改變
                    this.scrollE(-1);
                });
                this.container.querySelector('.nextBtn').addEventListener('click',()=>{ // 使用箭頭函數(shù),防止this指向改變
                    this.scrollE(1);
                });
            }
        }
        
        let myslide = new Slideshow({id:"lll_slide",imgarr:imgarr,wdwidth:600});
        myslide.Init();
    </script>
</body>
</html>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末羡蛾,一起剝皮案震驚了整個濱河市漓帅,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌痴怨,老刑警劉巖忙干,帶你破解...
    沈念sama閱讀 221,406評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異浪藻,居然都是意外死亡捐迫,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,395評論 3 398
  • 文/潘曉璐 我一進店門爱葵,熙熙樓的掌柜王于貴愁眉苦臉地迎上來施戴,“玉大人,你說我怎么就攤上這事萌丈≡藁” “怎么了?”我有些...
    開封第一講書人閱讀 167,815評論 0 360
  • 文/不壞的土叔 我叫張陵辆雾,是天一觀的道長肪笋。 經(jīng)常有香客問我,道長度迂,這世上最難降的妖魔是什么藤乙? 我笑而不...
    開封第一講書人閱讀 59,537評論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮惭墓,結(jié)果婚禮上坛梁,老公的妹妹穿的比我還像新娘。我一直安慰自己腊凶,他們只是感情好划咐,可當(dāng)我...
    茶點故事閱讀 68,536評論 6 397
  • 文/花漫 我一把揭開白布毅人。 她就那樣靜靜地躺著,像睡著了一般尖殃。 火紅的嫁衣襯著肌膚如雪丈莺。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,184評論 1 308
  • 那天送丰,我揣著相機與錄音缔俄,去河邊找鬼。 笑死器躏,一個胖子當(dāng)著我的面吹牛俐载,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播登失,決...
    沈念sama閱讀 40,776評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼遏佣,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了揽浙?” 一聲冷哼從身側(cè)響起状婶,我...
    開封第一講書人閱讀 39,668評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎馅巷,沒想到半個月后膛虫,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,212評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡钓猬,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,299評論 3 340
  • 正文 我和宋清朗相戀三年稍刀,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片敞曹。...
    茶點故事閱讀 40,438評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡账月,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出澳迫,到底是詐尸還是另有隱情局齿,我是刑警寧澤,帶...
    沈念sama閱讀 36,128評論 5 349
  • 正文 年R本政府宣布纲刀,位于F島的核電站项炼,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏示绊。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,807評論 3 333
  • 文/蒙蒙 一暂论、第九天 我趴在偏房一處隱蔽的房頂上張望面褐。 院中可真熱鬧,春花似錦取胎、人聲如沸展哭。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,279評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽匪傍。三九已至您市,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間役衡,已是汗流浹背茵休。 一陣腳步聲響...
    開封第一講書人閱讀 33,395評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留手蝎,地道東北人榕莺。 一個月前我還...
    沈念sama閱讀 48,827評論 3 376
  • 正文 我出身青樓,卻偏偏與公主長得像棵介,于是被迫代替她去往敵國和親钉鸯。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,446評論 2 359

推薦閱讀更多精彩內(nèi)容