这篇文章主要介绍“JS实现轮播图效果的脚本怎么写”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“JS实现轮播图效果的脚本怎么写”文章能帮助大家解决问题。
以下是具体的代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>w3cschool-亿速云</title> <!-- css样式 --> <style type="text/css"> /*清除边距*/ div,ul,li{ margin: 0; padding: 0; } /*首先准备一个放图片的容器*/ .container{ width: 500px; height: 280px; position: relative; top: 100px; left: 30%; /*border: 1px solid #ccc;*/ } /*图片样式*/ .container img{ position: absolute; /*把所有图片放在同一个位置*/ width: 100%; transition-duration: 0.5s; /*设置过渡时间*/ opacity: 0; /*把所有图片变透明*/ } /*图片显示开关*/ .container img.on{ opacity: 1; /*用于显示图片*/ } /*左右按钮 按钮用图片更好点,这里为了简便就用大于小于号*/ .left, .right{ position: absolute; top: 30%; width: 60px; height: 100px; line-height: 100px; background-color: #666; opacity: 0.5; text-align: center; font-size: 60px; color: #ccc; display: none; /*先隐藏按钮*/ cursor: pointer; /*设置鼠标悬停时的样式*/ } .left{ left: 0; } .right{ right: 0; } .container:hover .left, .container:hover .right{ display: block; /*鼠标悬停才容器范围内时显示按钮*/ } .left:hover, .right:hover{ color: #fff; } /*焦点*/ .container ul{ position: absolute; bottom: 0; max-width: 500px; padding: 5px 200px; } .container ul li{ list-style: none; float: left; background-color: #ccc; width: 10px; height: 10px; border-radius: 50%; margin-left: 10px; cursor: pointer; } .container ul li.active{ background-color: #282923; /*焦点激活时的样式*/ } </style> </head> <body> <div class="container"> <!-- 先把第一张图片显示出来 --> <img class="on" src="image/42.png" /> <img src="image/43.png" /> <img src="image/44.png" /> <img src="image/45.png" /> <!-- 左右切换 --> <div class="left"><</div> <div class="right">></div> <!-- 焦点 --> <ul> <li class="active"></li> <li></li> <li></li> <li></li> </ul> </div> <!-- js部分 --> <script type="text/javascript"> //1、找到container下的所有img标签,li标签,左右按钮 var aImgs = document.querySelectorAll('.container img'); var aLis = document.querySelectorAll('.container li'); var btnLeft = document.querySelector('.container .left'); var btnRight = document.querySelector('.container .right'); //点击事件 //点击按钮图片切换 var index = 0; //当前图片下标 var lastIndex = 0; btnRight.onclick = function(){ //记录上一张图片的下标 lastIndex = index; //清除上一张图片的样式 aImgs[lastIndex].className = ''; aLis[lastIndex].className = ''; index++; index %= aImgs.length; //实现周期性变化 //设置当前图片的样式 aImgs[index].className = 'on'; aLis[index].className = 'active'; } //左边按钮类似 btnLeft.onclick = function(){ //记录上一张图片的下标 lastIndex = index; //清除上一张图片的样式 aImgs[lastIndex].className = ''; aLis[lastIndex].className = ''; index--; if (index < 0) { index = aImgs.length - 1; } //设置当前图片的样式 aImgs[index].className = 'on'; aLis[index].className = 'active'; } </script> </body> </html>关于“JS实现轮播图效果的脚本怎么写”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
