JS实现轮播图效果的脚本怎么写
短信预约 -IT技能 免费直播动态提醒
这篇文章主要介绍“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%; } .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" class="lazy" data-src="image/42.png" /> <img class="lazy" data-src="image/43.png" /> <img class="lazy" data-src="image/44.png" /> <img class="lazy" data-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实现轮播图效果的脚本怎么写”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网行业资讯频道，小编每天都会为大家更新不同的知识点。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
