原生JS實現輪播圖

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

要求：
在和上一任務同一目錄下面建立一個task0002_3.html檔案，在js目錄中建立task0002_3.js，並在其中編碼，實現一個輪播圖的功能。

圖片數量及URL均在HTML中寫好
可以配置輪播的順序（正序、逆序）、是否迴圈、間隔時長
圖片切換的動畫要流暢
在輪播圖下方自動生成對應圖片的小點，點選小點，輪播圖自動動畫切換到對應的圖片

html程式碼：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" 
 />
    <title></title>
    <style>
        div, ul, il, img, body
        {
            margin: 0px;
            padding: 0px;
        }

        #div1
        {
            position: relative;
            overflow: hidden;
            height: 500px;
            width: 1000px;
        } 


            #div1 ul
            {
                position: relative;
            }

                #div1 ul li
                {
                    float: left;
                    list-style: none;
                }

                    #div1 ul li img
                    {
                        height 
: 300px;
                    }

        #btn
        {
            position: absolute;
            width: 100%;
            text-align: center; 
        }

            #btn a
            { 
                cursor: pointer; /*讓滑鼠移入的時候滑鼠樣式改變*/
                display: inline-block;
                width: 10px;
                height: 5px;
                background-color: #808080;
                margin-top:250px;
            }

                #btn a.active, #btn a:hover
                {
                    background-color: white;
                }
    </style>
</head>
<body>
    <div id="div1">
        <ul id="ul"><!--為了動畫效果連貫 在列表開始加上末尾的圖片 在列表末尾加上開始的一張圖片-->
            <li>
                <img src="pic/3.jpg" /></li>
            <li>
                <img src="pic/1.jpg" /></li>
            <li>
                <img src="pic/2.jpg" /></li>
            <li>
                <img src="pic/3.jpg"/></li>
            <li>
                <img src="pic/1.jpgg" /></li>
        </ul>
        <div id="btn">
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
        </div>
    </div>
    <script src="js/task0002_3.js"></script>
    <script>
        window.onload = function () {
            var di = document.getElementById('div1');
            var ul = di.getElementsByTagName('ul')[0];
            var li = ul.getElementsByTagName('li');
            var img = ul.getElementsByTagName('img');
            var obtn = document.getElementById('btn');
            var aa = obtn.getElementsByTagName('a');
            var wid = screen.width;
            di.style.width = wid + 'px';
            function reSize() {//把圖片的寬度調整到和螢幕寬度一致
                for (i = 0; i < li.length; i++) {
                    img[i].style.width = wid + 'px';
                }
                ul.style.width = wid * li.length + 'px';
            }
            reSize();
            changeBtnStyle(aa);
            aa[0].addEventListener("click", met1);
            aa[1].addEventListener("click", met2);
            aa[2].addEventListener("click", met3);
            setInterval(loop, 1000, 50, 1,3); //設定圖片迴圈函式
            setInterval(changeBtn, 100, aa,ul);//每隔0.1秒獲取當前圖片的序號 並讓其對應的按鈕改變樣式
        }
    </script>
</body>
</html>

Js程式碼：

// JavaScript source code
var wid = screen.width; //獲取螢幕寬度
function getDis(ul) { //獲取列表的偏移量
    var dis;
    if (ul.currentStyle) {
        dis = ul.currentStyle["left"];
    } else {
        var res = window.getComputedStyle(ul, null);
        dis = res["left"];
    }
    dis = parseInt(dis);
    return dis;
}
function getNum(ul) { //計算當前播放的是第幾張圖片
    var dis = getDis(ul);
    dis = parseInt(dis * -1 / wid);
    return dis;
}
function an(from, to, time) { //動畫函式 from 是當前圖片的序號 to代表目標圖片序號 time為動畫執行時間
    var speed = -(to - from) * wid / time; //計算圖片的偏移速度
    var left = -from * wid;
    var interval;
    function move() {
        if (speed < 0) {  //當速度為負時 偏移量大於目標偏移量 則停止動畫
            if (left > -to * wid) {
                ul.style.left = left + 'px';
                left += speed;
            }
            else {
                left = -to * wid;
                ul.style.left = left + 'px';
                clearInterval(interval);
            }
        }
        else {//當速度為正時 偏移量小於目標偏移量 則停止動畫
            if (left < -to * wid) {
                ul.style.left = left + 'px';
                left += speed;
            }
            else {
                left = -to * wid;
                ul.style.left = left + 'px';
                clearInterval(interval);
            }
        }
    }
    interval = setInterval(move, 1); //迴圈播放
}
function getSec() {
    var now = new Date();
    return now.getSeconds(); //獲取現在時間秒數
}
function click(aa) {  //給按鈕新增點選事件 同時改變樣式
    for (i = 0; i < aa.length; i++) {
        aa[i].onclick = function () {
            for (j = 0; j < aa.length; j++)
            { aa[j].className = ' ' }
            this.className = 'active'
        }
    }
}
function loop(time, dir, len) {
 //實現每隔固定時間迴圈  引數為 動畫執行的時間，運動方向 +1為正方向 -1為負方向 len是當前圖片列表的長度 當圖片列表長度改變 修改len值即可
    var index = getNum(ul);
    var sec = getSec();
    if (sec % 5 == 0) { //設定為五秒迴圈一次
        if (dir > 0) { //方向為正時
            if (index < len) { 
                an(index, index + 1, time) 
            }
            else {//當動畫到最後一張圖片時，重第一張開始 
                an(1, 2, time);
            }
        }
        else { //方向為負
            if (index > 0) {
                an(index, index - 1, time)
            }
            else { //播放到第一張圖片時 從最後一張重新開始
                an(len - 1, len - 2, time);
            }
        }
    }
}
function met1() { //按鈕事件
    var dis = getNum(ul);
    an(dis, 1, 10);
}
function met2() { //按鈕事件
    var dis = getNum(ul);
    an(dis, 2, 10);
}
function met3() { //按鈕事件
    var dis = getNum(ul);
    an(dis, 3, 10);
}
function changeBtn(aa,ul) {  //改變按鈕樣式
    var index = getNum(ul) +2 ;
    index = index % aa.length; //獲取當前圖片對應的按鈕序號
    for (j = 0; j < aa.length; j++) //先把所有按鈕的樣式置為空
    { aa[j].className = ' ' }
    aa[index].className = 'active' //給當前的按鈕加上樣式
}

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實現輪播圖原理分析

一、輪播圖需求輪播圖需要實現左右翻頁的無縫連線需要點選左右切換需要實現跳轉顯示當前位置的小圓點二、輪播圖的原理 1.圖片移動實現原理：利用浮動將所有所有照片依次排成一行，給這一長串圖片新增一個父級的遮罩，每次只顯示一張圖，其餘的都隱

原生js實現輪播圖原理

輪播圖的原理1.圖片移動實現原理：利用浮動將所有所有照片依次排成一行，給這一長串圖片新增一個父級的遮罩，每次只顯示一張圖，其餘的都隱藏起來。對圖片新增絕對定位，通過控制left屬性，實現照片的移動。 2.圖片移動動畫原理：從a位置移動到b位置，需要先計算兩點之間的差值，通過差值和時間間隔，計算出每次移動的步

使用原生js實現輪播圖效果

這幾天在逛網站的時候，發現很多網站都有輪播圖這個效果，所以我就仿照小米的官網用原生js寫了一個輪播圖效果，希望大家喜歡。這是我釋出在github上的最後實現的效果：https://heternally.github.io/banner/ 下面我簡單跟大家說一下

用原生js實現輪播圖

今天分享一下簡單的輪播圖製作過程，用原生js實現。雖然網上有各種外掛製作的高大上又好用的輪播圖，但還是要清楚它的基本原理。 1.基本原理將所有圖片並排放到一個div中，然後再放到展示視窗當中，讓裝有所有圖片的div通過改變left值，從而左右移動實現圖片切換。 2.htm

原生JS實現輪播圖1---勻速動畫

JS實現輪播圖專案實現結果圖：需求：1 根據圖片動態新增小圓點 2 目標移動到小圓點輪播圖片 3 滑鼠離開圖片，定時輪播圖片；滑鼠在圖片上時暫

利用原生js實現輪播圖效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js原生輪播圖</title> <style type="text

animate動畫、原生JS實現輪播圖

寫在前面最近在寫專案的時候，才發現自己對css3這部分的內容已經生疏了，複習css3的時候，看到animate屬性，就用其寫了個焦點輪播圖，當然自己也用原生JS碼了個，當然css3動畫無疑是錦上添花，還是要多總結啊，原始碼我們會在最後附上git地址，好了，下

原生JS實現輪播圖的幾種方式

I 絕對定位+透明度原理：首先，將所有輪播圖以絕對定位的方式定位父元素的相同位置；接著，實現上下鍵按鈕修改active的下標；最後，將所有圖片透明度重置為0，而被啟用的圖片透明度設定為1；優點：實現最為簡單，程式碼量小，圖片過渡自然；缺點：沒有左右滑

原生JS實現輪播圖

要求：在和上一任務同一目錄下面建立一個task0002_3.html檔案，在js目錄中建立task0002_3.js，並在其中編碼，實現一個輪播圖的功能。圖片數量及URL均在HTML中寫好可以配置輪播的順序（正序、逆序）、是否迴圈、間隔時長圖片切換的

JS原生程式碼實現輪播圖（無左右滑動，底下圓點按鈕）

先上效果圖：由於動態圖太大，所以只能截圖了；大致效果，圖片輪播的過程中，底下的灰色提示漸漸出現；現在來說實現思路： HTML部分： <div id="content"> <img id="img1" /> &

js實現輪播圖

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

原生js實現輪播

tex tom enter utf-8 定義 radi absolut tco query <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">

用原生js封裝輪播圖

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

授人以漁式解析原生JS寫輪播圖

需求與分析需求：迴圈無縫自動輪播五張圖，按左右箭頭可以手動切換圖片，滑鼠點選輪播圖下面按鈕 1 2 3 4 5會跳轉到對應的第1 2 3 4 5張圖片。滑鼠放到輪播圖的圖片上時不再自動輪播並且左右箭頭顯示出來，滑鼠移開時左右箭頭隱藏掉並且自動輪播。效果圖：分析：佈局：準備七張圖片

Jquery和純JS實現輪播圖（一）--左右切換式

var cur = 0, //當前的圖片序號 imgLis = getElementsByClassName("imgList")[0].getElementsByTagName("li"), //獲取圖片組 imgLen = imgLis.length, //獲取圖片的

最簡單最詳細的原生js寫輪播圖

最簡單最詳細的原生js寫輪播圖該輪播圖實現了自動輪播，圖片切換，滑鼠移入移出事件，佈局簡單，容易上手。希望能幫到大家。效果圖如下：佈局擴充套件裡面用了幾種方式實現了div的垂直居中，可見樣式程式碼註釋。 HTML

原生JS實現輪播效果

<div id="playImages" class="play"> <ul class="big_pic"> <div class="prev"></div> <div class

js實現輪播圖--淡入淡出的效果。

window.onload = function(){ mv.app.toBanner(); }; var mv = {}; mv.tools = {}; mv.ui = {}; //淡入淡出也算是是一個公用元件 mv.ui.fadein = function(obj)

Jquery和純JS實現輪播圖（二）--淡入淡出切換式

之前有寫過一篇輪播圖，是左右切換式的，可以參考 Jquery和純JS實現輪播圖（一）–左右切換式今天分享一下淡入淡出式的輪播圖，同樣也是用純js和Jquery兩種方法來實現： JQUERY實現

原生JS實現輪播圖

相關推薦