| 本文实例为大家分享了JavaScript轮播图的实现方法，供大家参考，具体内容如下 效果截图：注：div容器大小和图片路径可以自行设置,添加img和a标签后浏览器可以自适应. 
创建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;}/* 导航点 */#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(); //自动切换图片 //修改图片,一张图片像素移动左移动1552px imglist.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(); //自动切换图片 //修改图片,一张图片像素移动左移动1552px imglist.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="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>函数使用：创建定时器: setInterval(function () {},30)设置圆角边框: offsetWidth 水平方向 width + 左右padding + 左右border
offsetHeight 垂直方向 height + 上下padding + 上下border clientWidth 水平方向 width + 左右padding
clientHeight 垂直方向 height + 上下padding
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持wanshiok.com。
js实现简单拼图小游戏
vue实现登录验证码 |
