原生JavaScript輪播圖實現方法
本文實例為大家分享了JavaScript輪播圖的實現方法，供大家參考，具體內容如下
效果截圖：注：div容器大小和圖片路徑可以自行設置,添加img和a標簽后瀏覽器可以自適應.
創建image文件夾存放圖片
寫入html文本
<body>//圖片路徑可以自己更改 <div id='outer'> <ul id='imglist'> <li><img src='http://www.lshqa.cn/bcjs/image/8.jpg' alt=''></li> <li><img src='http://www.lshqa.cn/bcjs/image/6.jpg' alt=''></li> <li><img src='http://www.lshqa.cn/bcjs/image/7.jpg' alt=''></li> <li><img src='http://www.lshqa.cn/bcjs/image/6.jpg' alt=''></li> <li><img src='http://www.lshqa.cn/bcjs/image/8.jpg' alt=''></li> <li><img src='http://www.lshqa.cn/bcjs/image/7.jpg' alt=''></li> <li><img src='http://www.lshqa.cn/bcjs/image/6.jpg' alt=''></li> <li><img src='http://www.lshqa.cn/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樣式
<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;}/* 導航點 */#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;}/* 鼠標移動效果 */#nav a:hover { background-color: rgb(215, 107, 224);}</style>
用JavaScript實現功能
<script type='text/javascript'> window.onload = function () { // 獲取外框屬性 var outer = document.getElementById('outer'); // 獲取imglist屬性 var imglist = document.getElementById('imglist'); // 獲取img屬性 var imgArr = document.getElementsByTagName('img'); // 獲取a屬性 var allA = document.getElementsByTagName(’a’); //獲取導航點 var nav = document.getElementById('nav'); //設置導航點居中位置 nav.style.left = (outer.offsetWidth / 2) - (allA.length * 45 / 2) + 'px'; //默認顯示索引 var index = 0; allA[index].style.backgroundColor = 'rgb(215, 107, 224)'; // 切換導航點定時器 var temer = setInterval(function () {//循環顯示index = (++index) % allA.length;//設置導航點背景顏色allA[index].style.backgroundColor = 'rgb(215, 107, 224)';SetA();//自動切換圖片//修改圖片,一張圖片像素移動左移動1552pximglist.style.transition = 'right 1.5s'imglist.style.right = (index * 1552) + 'px'; }, 1800); //單擊超鏈接顯示圖片 for (var i = 0; i < allA.length; i++) {//為每個超鏈接添加索引allA[i].index = i;//為每個超鏈接綁定單擊響應函數allA[i].onclick = function () { imgIndex = this.index; //覆蓋導航點當前的位置 index = imgIndex; SetA(); //修改圖片,一張圖片像素移動左移動1552px imglist.style.transition = 'right .85s' imglist.style.right = (imgIndex * 1552) + 'px'; //修改選擇的a標簽 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>完整代碼
<!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;}/* 導航點 */#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;}/* 鼠標移動效果 */#nav a:hover { background-color: rgb(215, 107, 224);} </style> <script type='text/javascript'>window.onload = function () { // 獲取外框屬性 var outer = document.getElementById('outer'); // 獲取imglist屬性 var imglist = document.getElementById('imglist'); // 獲取img屬性 var imgArr = document.getElementsByTagName('img'); // 獲取a屬性 var allA = document.getElementsByTagName(’a’); //獲取導航點 var nav = document.getElementById('nav'); //設置導航點居中位置 nav.style.left = (outer.offsetWidth / 2) - (allA.length * 45 / 2) + 'px'; //默認顯示索引 var index = 0; allA[index].style.backgroundColor = 'rgb(215, 107, 224)'; // 切換導航點定時器 var temer = setInterval(function () {index = (++index) % allA.length;//設置導航點背景顏色allA[index].style.backgroundColor = 'rgb(215, 107, 224)';SetA();//自動切換圖片//修改圖片,一張圖片像素移動左移動1552pximglist.style.transition = 'right 1.5s'imglist.style.right = (index * 1552) + 'px';//循環顯示 }, 1800); //單擊超鏈接顯示圖片 for (var i = 0; i < allA.length; i++) {//為每個超鏈接添加索引allA[i].index = i;//為每個超鏈接綁定單擊響應函數allA[i].onclick = function () { imgIndex = this.index; //覆蓋導航點當前的位置 index = imgIndex; SetA(); //修改圖片,一張圖片像素移動左移動1552px imglist.style.transition = 'right .85s' imglist.style.right = (imgIndex * 1552) + 'px'; //修改選擇的a標簽 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.lshqa.cn/bcjs/image/8.jpg' alt=''></li> <li><img src='http://www.lshqa.cn/bcjs/image/6.jpg' alt=''></li> <li><img src='http://www.lshqa.cn/bcjs/image/7.jpg' alt=''></li> <li><img src='http://www.lshqa.cn/bcjs/image/6.jpg' alt=''></li> <li><img src='http://www.lshqa.cn/bcjs/image/8.jpg' alt=''></li> <li><img src='http://www.lshqa.cn/bcjs/image/7.jpg' alt=''></li> <li><img src='http://www.lshqa.cn/bcjs/image/6.jpg' alt=''></li> <li><img src='http://www.lshqa.cn/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>函數使用：
創建定時器:
setInterval(function () {},30)
設置圓角邊框:
border-radius: 5px;
offsetWidth 水平方向 width + 左右padding + 左右borderoffsetHeight 垂直方向 height + 上下padding + 上下border
clientWidth 水平方向 width + 左右paddingclientHeight 垂直方向 height + 上下padding
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
網公網安備