文章詳情頁

原生JavaScript輪播圖實(shí)現(xiàn)方法

瀏覽：3日期：2023-05-30 13:03:23

本文實(shí)例為大家分享了JavaScript輪播圖的實(shí)現(xiàn)方法，供大家參考，具體內(nèi)容如下

效果截圖：

注：div容器大小和圖片路徑可以自行設(shè)置,添加img和a標(biāo)簽后瀏覽器可以自適應(yīng).

創(chuàng)建image文件夾存放圖片

原生JavaScript輪播圖實(shí)現(xiàn)方法

寫入html文本

<body>//圖片路徑可以自己更改 <div id='outer'> <ul id='imglist'> <li><img src='http://www.intensediesel.com/bcjs/image/8.jpg' alt=''></li> <li><img src='http://www.intensediesel.com/bcjs/image/6.jpg' alt=''></li> <li><img src='http://www.intensediesel.com/bcjs/image/7.jpg' alt=''></li> <li><img src='http://www.intensediesel.com/bcjs/image/6.jpg' alt=''></li> <li><img src='http://www.intensediesel.com/bcjs/image/8.jpg' alt=''></li> <li><img src='http://www.intensediesel.com/bcjs/image/7.jpg' alt=''></li> <li><img src='http://www.intensediesel.com/bcjs/image/6.jpg' alt=''></li> <li><img src='http://www.intensediesel.com/bcjs/image/8.jpg' alt=''></li> </ul> <div id='nav'> <a href='JavaScript:;'></a> <a href='JavaScript:;'></a> <a href='JavaScript:;'></a> <a href='JavaScript:;'></a> <a href='JavaScript:;'></a> <a href='JavaScript:;'></a> <a href='JavaScript:;'></a> <a href='JavaScript:;'></a> </div> </div></body>

加入Css樣式

用JavaScript實(shí)現(xiàn)功能

<!DOCTYPE html><html lang='zh'><head> <meta charset='UTF-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>輪播圖</title> <style>* { margin: 0px; padding: 0px;}/* 外框容器 */#outer { width: 1555px; height: 600px; background-color: #bfa; margin: 100px auto; position: relative; /* 隱藏 */ overflow: hidden;}/* 圖片列表 */#imglist { /* 彈性盒布局 */ display: flex; list-style: none; position: relative; /* 布局方向 */ /* flex-direct5on: row; */ /*一張圖片像素移動(dòng)`1552px*/ /* right: 1552px; */}#imglist li { margin: 10px 10px;}/* 導(dǎo)航點(diǎn) */#nav { display: flex; list-style: none; position: absolute; bottom: 50px; /* 1555/2 - 6*(20+25)/2 */ /* left: 642px; */}#nav a { width: 25px; height: 25px; margin: 0px 10px; background-color: rgb(223, 129, 52); border-radius: 5px;}/* 鼠標(biāo)移動(dòng)效果 */#nav a:hover { background-color: rgb(215, 107, 224);} </style> <script type='text/javascript'>window.onload = function () { // 獲取外框?qū)傩? var outer = document.getElementById('outer'); // 獲取imglist屬性 var imglist = document.getElementById('imglist'); // 獲取img屬性 var imgArr = document.getElementsByTagName('img'); // 獲取a屬性 var allA = document.getElementsByTagName(’a’); //獲取導(dǎo)航點(diǎn) var nav = document.getElementById('nav'); //設(shè)置導(dǎo)航點(diǎn)居中位置 nav.style.left = (outer.offsetWidth / 2) - (allA.length * 45 / 2) + 'px'; //默認(rèn)顯示索引 var index = 0; allA[index].style.backgroundColor = 'rgb(215, 107, 224)'; // 切換導(dǎo)航點(diǎn)定時(shí)器 var temer = setInterval(function () {index = (++index) % allA.length;//設(shè)置導(dǎo)航點(diǎn)背景顏色allA[index].style.backgroundColor = 'rgb(215, 107, 224)';SetA();//自動(dòng)切換圖片//修改圖片,一張圖片像素移動(dòng)左移動(dòng)1552pximglist.style.transition = 'right 1.5s'imglist.style.right = (index * 1552) + 'px';//循環(huán)顯示 }, 1800); //單擊超鏈接顯示圖片 for (var i = 0; i < allA.length; i++) {//為每個(gè)超鏈接添加索引allA[i].index = i;//為每個(gè)超鏈接綁定單擊響應(yīng)函數(shù)allA[i].onclick = function () { imgIndex = this.index; //覆蓋導(dǎo)航點(diǎn)當(dāng)前的位置 index = imgIndex; SetA(); //修改圖片,一張圖片像素移動(dòng)左移動(dòng)1552px imglist.style.transition = 'right .85s' imglist.style.right = (imgIndex * 1552) + 'px'; //修改選擇的a標(biāo)簽 allA[imgIndex].style.backgroundColor = 'rgb(215, 107, 224)';}; } //清除a的樣式 function SetA() {for (var i = 0; i < allA.length; i++) { allA[i].style.backgroundColor = '';}allA[index].style.backgroundColor = 'rgb(215, 107, 224)'; }}; </script></head><body> <div id='outer'><ul id='imglist'> <li><img src='http://www.intensediesel.com/bcjs/image/8.jpg' alt=''></li> <li><img src='http://www.intensediesel.com/bcjs/image/6.jpg' alt=''></li> <li><img src='http://www.intensediesel.com/bcjs/image/7.jpg' alt=''></li> <li><img src='http://www.intensediesel.com/bcjs/image/6.jpg' alt=''></li> <li><img src='http://www.intensediesel.com/bcjs/image/8.jpg' alt=''></li> <li><img src='http://www.intensediesel.com/bcjs/image/7.jpg' alt=''></li> <li><img src='http://www.intensediesel.com/bcjs/image/6.jpg' alt=''></li> <li><img src='http://www.intensediesel.com/bcjs/image/8.jpg' alt=''></li></ul><div id='nav'> <a href='JavaScript:;'></a> <a href='JavaScript:;'></a> <a href='JavaScript:;'></a> <a href='JavaScript:;'></a> <a href='JavaScript:;'></a> <a href='JavaScript:;'></a> <a href='JavaScript:;'></a> <a href='JavaScript:;'></a></div> </div></body></html>函數(shù)使用：

創(chuàng)建定時(shí)器:

setInterval(function () {},30)

設(shè)置圓角邊框:

border-radius: 5px;

offsetWidth 水平方向 width + 左右padding + 左右borderoffsetHeight 垂直方向 height + 上下padding + 上下border

clientWidth 水平方向 width + 左右paddingclientHeight 垂直方向 height + 上下padding

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。

JavaScript

上一條：深入淺析springboot中static和templates區(qū)別下一條：JavaScript中html畫布的使用與頁面存儲(chǔ)技術(shù)詳解

相關(guān)文章：

1. jsp實(shí)現(xiàn)登錄驗(yàn)證的過濾器2. asp批量添加修改刪除操作示例代碼3. jsp+servlet簡(jiǎn)單實(shí)現(xiàn)上傳文件功能（保存目錄改進(jìn)）4. JavaWeb Servlet中url-pattern的使用5. 微信開發(fā) 網(wǎng)頁授權(quán)獲取用戶基本信息6. 詳解瀏覽器的緩存機(jī)制7. ASP中實(shí)現(xiàn)字符部位類似.NET里String對(duì)象的PadLeft和PadRight函數(shù)8. HTML5 Canvas繪制圖形從入門到精通9. css代碼優(yōu)化的12個(gè)技巧10. msxml3.dll 錯(cuò)誤 800c0019 系統(tǒng)錯(cuò)誤:-2146697191解決方法

排行榜

					
					JavaScript中html畫布的使用與頁面存儲(chǔ)技術(shù)詳解
Python使用Appium在移動(dòng)端抓取微博數(shù)據(jù)的實(shí)現(xiàn)
IDEA 阿里JAVA規(guī)范插件的具體使用
在idea 中添加和刪除模塊Module操作
Docker 部署 Prometheus的安裝詳細(xì)教程
Python+OpenCV圖像處理—— 色彩空間轉(zhuǎn)換
vue+canvas繪制時(shí)間軸的方法
docker 使用CMD或者ENTRYPOINT命令同時(shí)啟動(dòng)多個(gè)服務(wù)
docker容器調(diào)用yum報(bào)錯(cuò)的解決辦法
為什么python為什么在“。”之后的對(duì)象和方法名稱之間要留空格？
Vue CLI4 Vue.config.js標(biāo)準(zhǔn)配置(最全注釋)
				