2. 程式人生 > >例子---JS無縫輪播圖

例子---JS無縫輪播圖

阿新 • • 發佈：2019-01-19

DuangDuang，今天我們來一起說說JS實現無縫輪播。沒錯，顧名思義，就是我們腦子中浮現的類似淘寶主頁面中間部分的那個滾動圖。這個輪播圖的使用頻率還是很大的，所以還是很有必要好好研究一下的。
哈哈，按照慣例我們先來說一下它的實現原理吧。
第一步，
需要在body中建立3層div，第一層是顯示給大家看的那個wrap，第二個是包含所有div圖片的box，第三個就是每個圖片的item（我們這個用顏色區分每頁，就不新增圖片了）；另外還要在box同級上，新增上一個、下一個按鈕，也需要加下面那幾個小點點（通俗的說，就是圖片跳到第幾張，對應的小點點改變樣式的那堆），OK，上結構程式碼~

<body
 
>
        <div class="wrap">
            //這裡需要解釋一下，前後各多加一個原因是為了造成假象，然後再讓位置瞬間跳到對應的位置
            <div class="box">
                <div class="item5 item">子</div>
                <div class="item1 item">碼</div>
                <div class="item2 item">丫</div
 
>
                <div class="item3 item">頭</div>
                <div class="item4 item">萍</div>
                <div class="item5 item">子</div>
                <div class="item1 item">碼</div>
            </div>
            //這裡標籤裡的onclick是點選的行間使用，引號裡面的pre()和next()就是JS程式碼中封裝的上一個下一個函式
            <div
 
 class="pre" onclick="pre()"><</div>
            <div class="next" onclick="next()">></div>
            <div class="dian">
                <div class="div">1</div>
                <div class="div">2</div>
                <div class="div">3</div>
                <div class="div">4</div>
                <div class="div">5</div>
            </div>
        </div>
    </body>

前後各加一張的效果圖如下：
這裡寫圖片描述

第二步,
在寫JS程式碼的時候，需要的注意的有兩點：
1️⃣ 無論box需要移動多少距離，都需要讓使用的時間一樣，所以我們在用定時器去移動的時候，需要把它的距離按比例去運算，讓20毫秒一次的定時器移動所有需要移動的距離的十分之一，定時器執行十次，全部移動完畢，來保證無論距離多少所花費的時間是一樣的；
2️⃣ 當移動到加在最後面的第一頁的時候，如果還想繼續往後移，說明接下來想看到的那張是第二張，所以當index為想要顯現的那張的index的時候，需要讓index等於想要看到的位置的index，把box的left值也改到這裡

        //代表當前看到的是第幾張,方便計算box的偏移量（index*(-500)）
        var index = 1;
        var moveTimer;
        //下一張
        function next(){    
            index++;
            //index等於7的時候是想到第二張的位置
            if(index == 7){
                index=2;
                box.style.left = "-500px";//瞬間移動到前面的第一張的位置
            }
            //呼叫根據自定義變數index移動的函式
            moveByIndex();
        }
        function moveByIndex(){
            //要移動的總距離
            var l = index*(-500)-box.offsetLeft;
            var count = 0;
            clearInterval(moveTimer);//為了不讓執行的定時器越來越多
            moveTimer = setInterval(function(){
                count++;
                //目的是無論移動多少距離，所用的時間相同，都是20毫秒的定時器執行十次
                box.style.left = box.offsetLeft + l/10 + "px";
                //保證定時器執行十次
                if(count>=10){
                    clearInterval(moveTimer);
                    box.style.left = index*(-500) + "px";
                }
            },20);
        }

寫到這裡，點選next按鈕，就已經可以一直往下點了，這樣就完成了三分之一了，那接下來的三分之一—-點選上一個往前去的程式碼跟下一個的差不多，我就不多說了，畢竟小夥伴們都辣麼聰明~

相關推薦

例子---JS無縫輪播圖

DuangDuang，今天我們來一起說說JS實現無縫輪播。沒錯，顧名思義，就是我們腦子中浮現的類似淘寶主頁面中間部分的那個滾動圖。這個輪播圖的使用頻率還是很大的，所以還是很有必要好好研究一下的。 哈哈，按照慣例我們先來說一下它的實現原理吧。 第一步， 需要

JS 無縫輪播圖1-節點操作

idt radius nbsp black -o flow 開開 接下來 con 無縫輪播圖 (使用節點操作) <!DOCTYPE html> <html lang="en"> <head> <meta charset="U

關於js物件中兩個函式互相呼叫，其中一個為定時器宣告，定時器迴圈報錯問題（記錄一次嘗試新寫法的報錯經歷）附帶無縫輪播圖程式碼

先上之前的錯誤程式碼吧，注意計時器這個方法（是想把之前寫的的輪播圖演示重構一下） var obj = { sleepTime: 2000,//輪播延時 cont: 0,//第幾張 origin: document.getElementsByClassName('main-

JS寫一個最簡單的無縫輪播圖

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=d

js面向物件---無縫輪播圖（附面向過程程式碼）

window.onload = function(){ var t1 = new Lb("box"); t1.l(); //設定包含圖片的ul寬度 t1.dot(); //點哪個圓,相對應的圖片顯示

純js實現無縫輪播圖

很多時候我們都會用到無縫輪播圖，那麼下面我就把無縫輪播獻給大家 1.左右無縫輪播 <!DOCTYPE html > <html> <head> <

js特效-無縫輪播圖，簡單上手

首先，讓大家看效果： 然後給大家介紹一下無縫輪播圖的原理 1.我們在一個ul中會使用很多的li，每一個li中嵌入一個圖片，如果把輪播圖比喻成慢視訊的話，每一張圖片就是一幀(注意:很多新手會認為一些圖

js 案例-6 無縫輪播圖

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

js實現輪播圖

display lex tee 添加 har scrip con tle win 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF

h5原生js實現輪播圖

list sla head log startx creat ase hit eve 預覽地址：http://s.xnimg.cn/a90529/wap/wechatLive/test/slide.html <!DOCTYPE html> <html l

js網站輪播圖怎麽做如何做？雞哥教你簡單制作效果炫酷

多人 tle 哪裏 round 下載 簡單的 文件 但是 cell 日了狗啦，剛剛雞哥辛苦碼了那麽多字全丟了又要重新寫，這是第二遍寫了...今天雞哥給小白寫個不需要寫js原生代碼，只需要幾個插件和一段通俗易懂得jquery代碼就能搞定的輪播圖，當然js原生代碼寫著也不算很繁

JS之輪播圖自動切換效果

poi 自動切換 relative amp index 點擊 mouseover 更新 adding 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=

JS原生輪播圖

val set blog html gin adding 部分 原生 left 哈嘍！我的朋友們，最近有一個新項目。所以一直沒更新！有沒有想我啊！！ 今天咱們來說一下JS原生輪播圖！ 話不多說： 直接來代碼吧：下面是CSS部分： 1 *{ 2

jQuery----無縫輪播圖

bottom blog dex :hover fin taobao .com ont append 1、效果 2、html代碼 <!DOCTYPE html> <html> <head> <meta chars

原生JavaScript實現無縫輪播圖

原生 原生js ted 結束 阻止 time == 實現圖 put 無縫輪播圖是頁面常用的特效之一，然而在實際的開發過程中，大部分的開發者都會使用插件來對輪播圖進行開發，那麽它的底層到底是怎麽實現的呢，本文章將圍繞這一問題展開探討。 在討論如何利用原生JS實現圖片之間無縫切

用原生js封裝輪播圖

round this getc 行間樣式 gets -m ++ fun ted 原生js封裝輪播圖 對於初學js的同學來說，輪播圖還是一個難點，尤其是原生js封裝輪播圖代碼，下面是我之前做的一個輪播圖項目中封裝好的一些代碼，有需要的同學可以看一下，有什麽不懂的可以看註釋，

無縫輪播圖

else radius -s () var lns body tint tex html: <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><met

js無縫輪播 和淡入淡出輪播

java true bottom lang 操作 rgba gets 定時 box <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

每次移一張圖片的無縫輪播圖

end 3.0 doctype () 定時 ora title order console <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

JS原生輪播圖實現

作為一個PHP全棧攻城獅，不僅要會後端PHP和資料庫，還要會前端JS。今天原始碼時代 PHP培訓 學科老師要和大家分享一下JS原生編寫輪播圖的外掛。 說起輪播圖，很多人會選擇使用各種外掛，比如基於JQuery或其它框架的。不瞞大家，我也用過，甚至還用過Flash的輪播圖。總體來說，用起來是比較簡