溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

原生JS如何實(shí)現(xiàn)的簡(jiǎn)單輪播圖功能

發(fā)布時(shí)間：2021-04-20 10:56:20 來(lái)源：億速云 閱讀：178 作者：小新 欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)原生JS如何實(shí)現(xiàn)的簡(jiǎn)單輪播圖功能，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

js有什么特點(diǎn)

1、js屬于一種解釋性腳本語(yǔ)言；2、在絕大多數(shù)瀏覽器的支持下，js可以在多種平臺(tái)下運(yùn)行，擁有著跨平臺(tái)特性；3、js屬于一種弱類型腳本語(yǔ)言，對(duì)使用的數(shù)據(jù)類型未做出嚴(yán)格的要求，能夠進(jìn)行類型轉(zhuǎn)換，簡(jiǎn)單又容易上手；4、js語(yǔ)言安全性高，只能通過(guò)瀏覽器實(shí)現(xiàn)信息瀏覽或動(dòng)態(tài)交互，從而有效地防止數(shù)據(jù)的丟失；5、基于對(duì)象的腳本語(yǔ)言，js不僅可以創(chuàng)建對(duì)象，也能使用現(xiàn)有的對(duì)象。

本文實(shí)例講述了原生JS實(shí)現(xiàn)的簡(jiǎn)單輪播圖功能。分享給大家供大家參考，具體如下：

經(jīng)過(guò)幾天的努力，終于攻克了這一難題，于是迫不及待的想要分享給大家，編寫之前，我也看了不少其他博主的博客，大多是用偏移量寫的，對(duì)新手來(lái)說(shuō)，還是有些難以理解，雖然可能實(shí)現(xiàn)的需求不一樣，但我想先從簡(jiǎn)入手，所以自己查閱資料，修改bug，終于完成。話不多說(shuō)，上代碼：

<!DOCTYPE html>
<html lang="en">
<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>www.jb51.net JS輪播圖</title>
<script src="jquery.js"></script>
<style>
*{
margin: 0px;
padding:0px;
list-style: none;
text-decoration: none;
}
#flash{ /*根據(jù)圖片的大小來(lái)設(shè)置外層div的大小*/
width: 520px;
height: 280px;
margin: 0 auto;
position: relative; /*設(shè)置div定位，方便之后圖片及圓點(diǎn)位置的設(shè)定*/
border:1px solid black;
}
#flash img{
width: 100%;
height: 100%;
position: absolute; /*設(shè)置所有圖片重疊*/
left: 0px;
top: 0px;
display: none; /*設(shè)置所有圖片隱藏，通過(guò)改變第一個(gè)圖片的行間樣式來(lái)使第一個(gè)圖片顯示*/
}
#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; /*設(shè)置第一個(gè)圓點(diǎn)背景色為紅色*/
}
#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>
<div id="flash">
<img src="http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/Guardians-of-the-Galaxy-Poster-High-Res.jpg"  >
<img src="http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/Blade-Runner-poster-art-Harrison-Ford.jpg" >
<img src="http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/2017_alien_covenant_4k-5120x2880-1920x1080.jpg" >
<img src="http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/robocop-1987-wallpaper-2.jpg" >
<img src="http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/sJALsDXak4EehSg2F2y92rt5hPe.jpg" >
<ul>
<li class="li_1"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="span-r">
<span>></span>
</div>
<div class="span-l">
<span><</span>
</div>
</div>
<body>
<script>
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; /*設(shè)置count來(lái)顯示當(dāng)前圖片的序號(hào)*/
function run(){ /*將定時(shí)器里的函數(shù)提取到外部*/
count++;
count = count==5?0:count; /*當(dāng)圖片加載到最后一張時(shí)，使其歸零*/
for(var i=0;i<len;i++){
img[i].style.display = 'none'; /*利用for循環(huán)使除當(dāng)前count位其他圖片隱藏*/
}
img[count].style.display = 'block'; /*顯示當(dāng)前count的值所代表的圖片*/
for(var i=0;i<li.length;i++){
li[i].style.backgroundColor = "#fff"; /*原理同上*/
}
li[count].style.backgroundColor = "#f40";
}
var timer = setInterval(run,1000); /*定義定時(shí)器，使圖片每隔1s更換一次*/
div.onmouseover = function(){
clearInterval(timer);
}
div.onmouseleave = function(){ /*定義鼠標(biāo)移出事件，當(dāng)鼠標(biāo)移出div區(qū)域，輪播繼續(xù)*/
timer = setInterval(run,1000);
}
for(var i=0;i<len;i++){
li[i].index = i; /*定義index記錄當(dāng)前鼠標(biāo)在li的位置*/
li[i].onmouseenter = function(){ /*定義鼠標(biāo)經(jīng)過(guò)事件*/
for(var i=0;i<len;i++){ /*通過(guò)for循環(huán)將所有圖片隱藏，圓點(diǎn)背景設(shè)為白色*/
li[i].style.background = '#fff';
img[i].style.display = 'none';
}
this.style.background = '#f40'; /*設(shè)置當(dāng)前所指圓點(diǎn)的背景色*/
img[this.index].style.display = 'block'; /*使圓點(diǎn)對(duì)應(yīng)的圖片顯示*/
}
}
div_r.onclick = function(){ /*因?yàn)閟pan沒有設(shè)置寬高，直接把事件添加到他的父級(jí)*/
run(); /*直接調(diào)用現(xiàn)成的run函數(shù)*/
}
function reverse(){
count--;
count = count==-1?4:count;
for(var i=0;i<len;i++){
img[i].style.display = 'none'; /*利用for循環(huán)使除當(dāng)前count位其他圖片隱藏*/
}
img[count].style.display = 'block'; /*顯示當(dāng)前count的值所代表的圖片*/
for(var i=0;i<li.length;i++){
li[i].style.backgroundColor = "#fff"; /*原理同上*/
}
li[count].style.backgroundColor = "#f40";
}
div_l.onclick = function(){
reverse(); /*重新設(shè)置函數(shù)*/
}
</script>
</body>
</html>

這里使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun，測(cè)試運(yùn)行效果如下：

原生JS如何實(shí)現(xiàn)的簡(jiǎn)單輪播圖功能

關(guān)于“原生JS如何實(shí)現(xiàn)的簡(jiǎn)單輪播圖功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

js
AI
助
手