最簡單的原生js輪播圖（適合新手）

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

經過幾天的努力，終於攻克了這一難題，於是迫不及待的想要分享給大家，編寫之前，我也看了不少其他博主的部落格，大多是用偏移量寫的，對新

手來說，還是有些難以理解，雖然可能實現的需求不一樣，但我想先從簡入手，所以自己查閱資料，修改bug，終於完成。話不多說，上程式碼：如果

可以的話，順手給個贊，給新手點鼓勵唄~~~

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

margin: 0px;

padding:0px;

list-style: none;

text-decoration: none;

}

#flash{ /*根據圖片的大小來設定外層div的大小*/

width: 520px;

height: 280px;

margin: 0 auto;

position: relative; /*設定div定位，方便之後圖片及圓點位置的設定*/

border:1px solid black;

}

#flash img{

width: 100%;

height: 100%;

position: absolute; /*設定所有圖片重疊*/

left: 0px;

top: 0px;

display: none; /*設定所有圖片隱藏，通過改變第一個圖片的行間樣式來使第一個圖片顯示*/

}

#flash ul{

width: 150px;

height: 25px;

border-radius: 20px;

background-color:rgba(255,255,255,0.5);

position: absolute;

left: 35%;

bottom: 10%;

}

#flash ul li{

width: 12px;

height: 12px;

margin-top:5px;

background-color: #fff;

border-radius: 50%;

margin-left: 15px;

float: left;

}

#flash ul .li_1{

background-color: #f40; /*設定第一個圓點背景色為紅色*/

}

#flash .span-r{

width: 50px;

height: 50px;

border-radius: 50%;

position: absolute;

right: 2%;

top: 45%;

background-color: rgba(255,255,255,0.5);

}

#flash .span-r span{

width: 100%;

height:100%;

color:rgba(0,0,0,0.5);

font-size: xx-large;

font-weight: 700;

line-height: 50px;

margin-left: 15px;

cursor: pointer;

}

#flash .span-l{

width: 50px;

height: 50px;

border-radius: 50%;

position: absolute;

left: 2%;

top: 45%;

background-color: rgba(255,255,255,0.5);

}

#flash .span-l span{

width: 100%;

height:100%;

color:rgba(0,0,0,0.5);

font-size: xx-large;

font-weight: 700;

line-height: 50px;

margin-left: 15px;

cursor: pointer;

}

</style>

</head>

<ul>

</ul>

</div>

</div>

<body>

var div = document.getElementById('flash');

var img = div.getElementsByTagName('img'); /*選中div下所有的圖片*/

var ul = document.getElementsByTagName('ul')[0];

var li = ul.getElementsByTagName('li');

var div_r = document.getElementsByTagName('div')[1];

// var span_r = div_r.getElementsByTagName('span');

var div_l = document.getElementsByTagName('div')[2];

// var sapn_l = div_l.getElementsByTagName('span');

var len = img.length;

var count = 0; /*設定count來顯示當前圖片的序號*/

function run(){ /*將定時器裡的函式提取到外部*/

count++;

count = count==5?0:count; /*當圖片載入到最後一張時，使其歸零*/

for(var i=0;i<len;i++){

img[i].style.display = 'none'; /*利用for迴圈使除當前count位其他圖片隱藏*/

}

img[count].style.display = 'block'; /*顯示當前count的值所代表的圖片*/

for(var i=0;i<li.length;i++){

li[i].style.backgroundColor = "#fff"; /*原理同上*/

}

li[count].style.backgroundColor = "#f40";

}

var timer = setInterval(run,1000); /*定義定時器，使圖片每隔1s更換一次*/

div.onmouseover = function(){

clearInterval(timer);

}

div.onmouseleave = function(){ /*定義滑鼠移出事件，當滑鼠移出div區域，輪播繼續*/

timer = setInterval(run,1000);

}

for(var i=0;i<len;i++){

li[i].index = i; /*定義index記錄當前滑鼠在li的位置*/

li[i].onmouseenter = function(){ /*定義滑鼠經過事件*/

for(var i=0;i<len;i++){ /*通過for迴圈將所有圖片隱藏，圓點背景設為白色*/

li[i].style.background = '#fff';

img[i].style.display = 'none';

}

this.style.background = '#f40'; /*設定當前所指圓點的背景色*/

img[this.index].style.display = 'block'; /*使圓點對應的圖片顯示*/

}

}

div_r.onclick = function(){ /*因為span沒有設定寬高，直接把事件新增到他的父級*/

run(); /*直接呼叫現成的run函式*/

}

function reverse(){

count--;

count = count==-1?4:count;

for(var i=0;i<len;i++){

img[i].style.display = 'none'; /*利用for迴圈使除當前count位其他圖片隱藏*/

}

img[count].style.display = 'block'; /*顯示當前count的值所代表的圖片*/

for(var i=0;i<li.length;i++){

li[i].style.backgroundColor = "#fff"; /*原理同上*/

}

li[count].style.backgroundColor = "#f40";

}

div_l.onclick = function(){

reverse(); /*重新設定函式*/

}

var div = document.getElementById('flash');

var img = div.getElementsByTagName('img'); /*選中div下所有的圖片*/

var ul = document.getElementsByTagName('ul')[0];

var li = ul.getElementsByTagName('li');

var div_r = document.getElementsByTagName('div')[1];

// var span_r = div_r.getElementsByTagName('span');

var div_l = document.getElementsByTagName('div')[2];

// var sapn_l = div_l.getElementsByTagName('span');

var len = img.length;

var count = 0; /*設定count來顯示當前圖片的序號*/

function run(){ /*將定時器裡的函式提取到外部*/

count++;

count = count==5?0:count; /*當圖片載入到最後一張時，使其歸零*/

for(var i=0;i<len;i++){

img[i].style.display = 'none'; /*利用for迴圈使除當前count位其他圖片隱藏*/

}

img[count].style.display = 'block'; /*顯示當前count的值所代表的圖片*/

for(var i=0;i<li.length;i++){

li[i].style.backgroundColor = "#fff"; /*原理同上*/

}

li[count].style.backgroundColor = "#f40";

}

var timer = setInterval(run,1000); /*定義定時器，使圖片每隔1s更換一次*/

div.onmouseover = function(){

clearInterval(timer);

}

div.onmouseleave = function(){ /*定義滑鼠移出事件，當滑鼠移出div區域，輪播繼續*/

timer = setInterval(run,1000);

}

for(var i=0;i<len;i++){

li[i].index = i; /*定義index記錄當前滑鼠在li的位置*/

li[i].onmouseenter = function(){ /*定義滑鼠經過事件*/

for(var i=0;i<len;i++){ /*通過for迴圈將所有圖片隱藏，圓點背景設為白色*/

li[i].style.background = '#fff';

img[i].style.display = 'none';

}

this.style.background = '#f40'; /*設定當前所指圓點的背景色*/

img[this.index].style.display = 'block'; /*使圓點對應的圖片顯示*/

}

div_r.onclick = function(){ /*因為span沒有設定寬高，直接把事件新增到他的父級*/

run(); /*直接呼叫現成的run函式*/

}

function reverse(){

count--;

count = count==-1?4:count;

for(var i=0;i<len;i++){

img[i].style.display = 'none'; /*利用for迴圈使除當前count位其他圖片隱藏*/

}

img[count].style.display = 'block'; /*顯示當前count的值所代表的圖片*/

for(var i=0;i<li.length;i++){

li[i].style.backgroundColor = "#fff"; /*原理同上*/

}

li[count].style.backgroundColor = "#f40";

}

div_l.onclick = function(){

reverse(); /*重新設定函式*/

}

</script>

</body>

</html>

執行效果如下：

最簡單的原生js輪播圖（適合新手）

經過幾天的努力，終於攻克了這一難題，於是迫不及待的想要分享給大家，編寫之前，我也看了不少其他博主的部落格，大多是用偏移量寫的，對新手來說，還是有些難以理解，雖然可能實現的需求不一樣，但我想先從簡入手，所以自己查閱資料，修改bug，終於完成。話不多說，上程式碼：如果可以

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

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

原生js實現無縫滾動輪播圖（移動端）-自動輪播

想不依賴任何外掛和庫，就用原生js實現移動端自動輪播，發現網上的都不盡如人意，乾脆自己寫一個，程式碼有部分參考，廢話少說，上程式碼。 head部分，沒什麼好說的： <meta charset="utf-8"> <me

最簡單的jq輪播圖

nbsp ont har ++ htm libs com fad color 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U

原生js輪播圖實現

索引獲取 mouseout abs length ati point css ack 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta chars

適合【前端入門者】的原生JS輪播圖實現

學前端已經一年多了，在JavaScript方面，學會了基本語法，頁面操作之後，慢慢走向了框架這條不歸路，框架用起來真的是省時省力，效果好、程式碼少、還節省時間。在前幾天去做一個頁面的時候，要求只能是用以前版本的框架，我就去找框架之前的版本，可是在某些官網上老版本的框架已經不存在了，就我這暴脾氣

vue-原生輪播圖（非連續）

效果思路與之前的連續輪播圖不同，每個圖片按順序排列成一條，只用改變條的位置，不需要改變圖片的順序。程式碼 template <template> <div

一個原生JS輪播圖外掛的全部實現

前段時間把模組化開發的學習整理了之後就想著做個小外掛。本文記錄個人獨立完成的一個原生JS輪播圖外掛的實現過程。嗯，東西很簡單，大佬勿噴。github求start 涉及知識點：模組化開發 ES6 JS HTML5和css

最簡單的無限輪播圖

有人說iOS輪播圖很簡單，我覺得他們說的很多本來不打算寫demo的，然而我發現我找的一些資源都不是太好，不是邏輯不夠清晰明瞭就是程式碼量多的嚇人，本來一個很簡單的東西搞得這麼複雜那麼，來看看我的輪播圖（直接程式碼+demo） 1， ViewController.m檔案

iOS最笨的辦法實現無限輪播圖（網路載入）

簡單的做了一下：使用方法：把請求返回的圖片地址（字串型別）放進陣列中就行可以使用SDWebImage（我就是用的這個）等。。需要自己匯入並引用，然後修改部分程式碼 .h檔案 // ScrollViewTimerView.h // Scrol

Banner和ImageLoder輪播圖（精簡版）

1.首先先在程式中匯入我們要使的依賴 implementation 'com.youth.banner:banner:1.4.9' implementation 'com.nostra13.universalimageloader:universal-image-loade

Banner和ImageLoder無限輪播圖（精簡版）

1.首先先在程式中匯入我們要使的依賴 implementation 'com.youth.banner:banner:1.4.9' implementation 'com.nostra13.universalimageloader:universal-image-loader:1.9.5'

原生js實現簡單移動端輪播圖

1、程式碼部分　　分為四個檔案：　　slideshow.html 　　slideshow.css 　　base.js 　　slideshow.js 1.1、slideshow.html <!DOCTYPE html> <html lang="en"&g

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

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

JS實現簡單的輪播圖（非常簡單，一看就懂）

主要思路：先將需要輪播的4張圖使用絕對定位讓其重疊在banner這個盒子中，然後遍歷所有的圖片將其隱藏，再獲取當前圖片的index值，根據當前的index值設定當前的圖片顯示出來。設定間歇定時器setI

焦點輪播圖（7）原生JS實現焦點輪播圖--完整程式碼

輪播圖終於更完了，附上完整程式碼： <html> <head> <meta charset="utf-8" /> <title>焦點輪播圖</title> <style type=

js原生實現輪播圖效果（面向對象編程）

alt 狀態 off wid 編程） .proto eat doc 持續時間面向對象編程js原生實現輪播圖效果 1.先看效果圖 2.需要實現的功能：自動輪播點擊左右箭頭按鈕無縫輪播點擊數字按鈕切換圖片分析：如何實現無縫輪播？在一個固定大小的相框裏有一個ul

JavaScript的案例（數據校驗，js輪播圖，頁面定時彈窗）

頁面 span one align 數據校驗 lse 格式用戶輸入 ade 1.數據校驗步驟 1.確定事件（onsubmit）並綁定一個函數 2.書寫這個函數，獲取數據，並綁定id

簡單輪播圖（從本地資源獲取圖片）

MainActivity package com.example.lunbotu; import android.os.Handler; import android.os.Message; import android.support.v4.view.ViewPager; impo

JS-----輪播圖封裝（新手）

效果圖：3D旋轉+切割 //輪播圖 //使用例子: //1.在需要的位置放置一個元素，樣式什麼的自己給，不影響 <div id="lunbotu" style="width: 400px;height: 200px;"> &

最簡單的原生js輪播圖（適合新手）

相關推薦