原生JavaScript輪播圖實(shí)現(xiàn)方法
本文實(shí)例為大家分享了JavaScript輪播圖的實(shí)現(xiàn)方法,供大家參考,具體內(nèi)容如下
效果截圖:
注:div容器大小和圖片路徑可以自行設(shè)置,添加img和a標(biāo)簽后瀏覽器可以自適應(yīng).
創(chuàng)建image文件夾存放圖片
寫入html文本
<body> //圖片路徑可以自己更改 <div id="outer"> <ul id="imglist"> <li><img src="image/8.jpg" alt=""></li> <li><img src="image/6.jpg" alt=""></li> <li><img src="image/7.jpg" alt=""></li> <li><img src="image/6.jpg" alt=""></li> <li><img src="image/8.jpg" alt=""></li> <li><img src="image/7.jpg" alt=""></li> <li><img src="image/6.jpg" alt=""></li> <li><img src="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樣式
<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; */ /*一張圖片像素移動`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)移動效果 */ #nav a:hover { background-color: rgb(215, 107, 224); } </style>
用JavaScript實(shí)現(xiàn)功能
<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 () { //循環(huán)顯示 index = (++index) % allA.length; //設(shè)置導(dǎo)航點(diǎn)背景顏色 allA[index].style.backgroundColor = "rgb(215, 107, 224)"; SetA(); //自動切換圖片 //修改圖片,一張圖片像素移動左移動1552px imglist.style.transition = "right 1.5s" imglist.style.right = (index * 1552) + "px"; }, 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(); //修改圖片,一張圖片像素移動左移動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 = ""; } //給當(dāng)前導(dǎo)航設(shè)定 allA[index].style.backgroundColor = "rgb(215, 107, 224)"; } }; </script>
完整代碼
<!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; */ /*一張圖片像素移動`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)移動效果 */ #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(); //自動切換圖片 //修改圖片,一張圖片像素移動左移動1552px imglist.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(); //修改圖片,一張圖片像素移動左移動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="image/8.jpg" alt=""></li> <li><img src="image/6.jpg" alt=""></li> <li><img src="image/7.jpg" alt=""></li> <li><img src="image/6.jpg" alt=""></li> <li><img src="image/8.jpg" alt=""></li> <li><img src="image/7.jpg" alt=""></li> <li><img src="image/6.jpg" alt=""></li> <li><img src="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 + 左右border
offsetHeight 垂直方向 height + 上下padding + 上下borderclientWidth 水平方向 width + 左右padding
clientHeight 垂直方向 height + 上下padding
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- js實(shí)現(xiàn)輪播圖的完整代碼
- 原生js實(shí)現(xiàn)輪播圖的示例代碼
- js實(shí)現(xiàn)支持手機(jī)滑動切換的輪播圖片效果實(shí)例
- JS輪播圖實(shí)現(xiàn)簡單代碼
- js實(shí)現(xiàn)點(diǎn)擊左右按鈕輪播圖片效果實(shí)例
- JS實(shí)現(xiàn)自動輪播圖效果(自適應(yīng)屏幕寬度+手機(jī)觸屏滑動)
- 使用html+js+css 實(shí)現(xiàn)頁面輪播圖效果(實(shí)例講解)
- JS實(shí)現(xiàn)左右無縫輪播圖代碼
- 原生js實(shí)現(xiàn)無限循環(huán)輪播圖效果
- js實(shí)現(xiàn)從左向右滑動式輪播圖效果
相關(guān)文章
webpack學(xué)習(xí)--webpack經(jīng)典7分鐘入門教程
這篇文章主要介紹了webpack學(xué)習(xí)--webpack經(jīng)典7分鐘入門教程,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06用按鈕控制iframe顯示的網(wǎng)頁實(shí)現(xiàn)方法
在iframe中顯示的網(wǎng)頁已經(jīng)是一件平凡無奇的事了,不過可能依然有很多的童鞋沒不知所措吧,沒關(guān)系,因?yàn)楸疚牡某霈F(xiàn)將會帶你脫離苦海,感性的朋友可以了解下啊,或許對你有所幫助2013-02-02uniapp使用H5調(diào)試時(shí)跨域問題解決
本文主要介紹了uniapp使用H5調(diào)試時(shí)跨域問題解決,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07