原生JavaScript实现轮播图


Posted in Javascript onJanuary 10, 2021

本文实例为大家分享了JavaScript实现轮播图的具体代码,供大家参考,具体内容如下

效果:

原生JavaScript实现轮播图

代码:

<!DOCTYPE html>
<html>

 <head>
 <meta charset="UTF-8">
 <title></title>
 <style>
 * {
 margin: 0;
 padding: 0;
 }
 
 ul,
 li {
 list-style: none;
 }
 
 .banner {
 width: 1200px;
 height: 535px;
 border: 1px solid red;
 margin: 0 auto;
 position: relative;
 }
 
 .slider li {
 position: absolute;
 left: 0;
 top: 0;
 }
 
 a {
 width: 40px;
 height: 50px;
 background-color: rgba(0, 0, 0, 0.1);
 font-size: 50px;
 text-align: center;
 line-height: 50px;
 position: absolute;
 text-decoration: none;
 color: gray;
 }
 
 .btnl {
 left: 0;
 top: 50%;
 margin-top: -15px;
 }
 
 .btnr {
 right: 0;
 top: 50%;
 margin-top: -25px;
 }
 
 .tabs {
 position: absolute;
 bottom: 20px;
 left: 50%;
 margin-left: -75px;
 }
 
 .tabs li {
 width: 15px;
 height: 15px;
 background-color: #ccc;
 border-radius: 50%;
 float: left;
 margin-right: 10px;
 }
 </style>
 </head>

 <body>
 <div class="banner">
 <ul class="slider">
 <li><img src="img/b1.jpg" alt="" /></li>
 <li><img src="img/b2.jpg" alt="" /></li>
 <li><img src="img/b3.jpg" alt="" /></li>
 <li><img src="img/b4.jpg" alt="" /></li>
 <li><img src="img/b5.jpg" alt="" /></li>
 <li><img src="img/b6.jpg" alt="" /></li>
 </ul>
 <a href="javascript:void(0);" class="btnl">
 <</a>
 <a href="javascript:void(0);" class="btnr">></a>
 <ul class="tabs">
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 </ul>
 </div>
 <script type="text/javascript">
 var banner = document.getElementsByClassName("banner")[0];
 var slider = document.getElementsByClassName("slider")[0];
 var li = slider.getElementsByTagName("li");
 var btnl = document.getElementsByClassName("btnl")[0];
 var btnr = document.getElementsByClassName("btnr")[0];
 var tabs = document.getElementsByClassName("tabs")[0];
 var btns = tabs.getElementsByTagName("li");

 //初始化
 btns[0].style.backgroundColor = "red";

 for(var i = 0; i < li.length; i++) {
 if(i == 0) {
 continue;
 } else {
 li[i].style.opacity = 0;
 }
 }

 var timer = setInterval(mover, 1000);

 //声明一个变量,代表当前图片的下标
 var num = 0;

 function mover() {
 num++;
 if(num == li.length) {
 num = 0;
 }
 for(var i = 0; i < li.length; i++) {
 li[i].style.opacity = 0;
 btns[i].style.backgroundColor = "#ccc";
 }
 li[num].style.opacity = 1;
 btns[num].style.backgroundColor = "red";

 }

 function movel() {
 num--;
 if(num == -1) {
 num = li.length - 1;
 }
 for(var i = 0; i < li.length; i++) {
 li[i].style.opacity = 0;
 btns[i].style.backgroundColor = "#ccc";
 }
 li[num].style.opacity = 1;
 btns[num].style.backgroundColor = "red";
 }

 banner.onmouseover = function() {
 clearInterval(timer)
 }

 banner.onmouseout = function() {
 timer = setInterval(mover, 1000)
 }

 btnl.onclick = function(e) {
 movel();
 }
 btnr.onclick = function(e) {
 mover();
 }

 // 小圆点效果
 for(var i = 0; i < btns.length; i++) {
 btns[i].index = i;
 btns[i].onmouseover = function() {
 if(this.index == num) {
 return;
 } else {
 for(var i = 0; i < li.length; i++) {
 li[i].style.opacity = 0;
 btns[i].style.backgroundColor = "#ccc";
 }
 li[this.index].style.opacity = 1;
 btns[this.index].style.background="red";
 num=this.index;
 }
 }
 }
 </script>
 </body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js可突破windows弹退效果代码
Aug 09 Javascript
jquery获取tagName再进行判断
May 29 Javascript
jQuery.holdReady()方法用法实例
Dec 27 Javascript
JavaScript中使用Math.floor()方法对数字取整
Jun 15 Javascript
Node.js中常规的文件操作总结
Oct 13 Javascript
jQuery之动画效果大全
Nov 09 Javascript
移动端手指放大缩小插件与js源码
May 22 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
Mar 06 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
Aug 25 Javascript
Angular脚手架开发的实现步骤
Apr 09 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
Jan 21 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
Apr 08 Javascript
原生JavaScript实现留言板
Jan 10 #Javascript
JavaScript实现点击切换验证码及校验
Jan 10 #Javascript
JavaScript canvas实现雨滴特效
Jan 10 #Javascript
多种类型jQuery网页验证码插件代码实例
Jan 09 #jQuery
利用JS判断元素是否为数组的方法示例
Jan 08 #Javascript
JS实现页面侧边栏效果探究
Jan 08 #Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 #Vue.js
You might like
服务器变量 $_SERVER 的深入解析
2013/07/02 PHP
PHP 面向对象程序设计(oop)学习笔记(一) - 抽象类、对象接口、instanceof 和契约式编程
2014/06/12 PHP
laravel通用化的CURD的实现
2019/12/13 PHP
PHP使用PDO 连接与连接管理操作实例分析
2020/04/21 PHP
jquery构造器的实现代码小结
2011/05/16 Javascript
解析javascript 浏览器关闭事件
2013/07/08 Javascript
学JavaScript七大注意事项【必看】
2016/05/04 Javascript
一个例子轻松学会Vue.js
2017/01/02 Javascript
详解vue中使用express+fetch获取本地json文件
2017/10/10 Javascript
jsonp跨域及实现百度首页联想功能的方法
2018/08/30 Javascript
[07:54]DOTA2-DPC中国联赛 正赛 iG vs VG 选手采访
2021/03/11 DOTA
python 中文乱码问题深入分析
2011/03/13 Python
pygame学习笔记(4):声音控制
2015/04/15 Python
Python内存读写操作示例
2018/07/18 Python
python爬虫获取新浪新闻教学
2018/12/23 Python
Django ImageFiled上传照片并显示的方法
2019/07/28 Python
python django model联合主键的例子
2019/08/06 Python
python global关键字的用法详解
2019/09/05 Python
python使用beautifulsoup4爬取酷狗音乐代码实例
2019/12/04 Python
python使用pymongo与MongoDB基本交互操作示例
2020/04/09 Python
python sitk.show()与imageJ结合使用常见的问题
2020/04/20 Python
python判断是空的实例分享
2020/07/06 Python
java关于string最常出现的面试题整理
2021/01/18 Python
澳大利亚珠宝商:Shiels
2019/10/06 全球购物
Tomcat中怎么使用log4j输出所有的log
2016/07/07 面试题
怎么样写好简历中的自我评价
2013/10/25 职场文书
产品销售员岗位职责
2013/12/18 职场文书
简历上的自我评价怎么写
2014/01/28 职场文书
运动会广播稿20字
2014/02/18 职场文书
怎么写好自荐书
2014/03/02 职场文书
保研导师推荐信
2015/03/25 职场文书
法定授权委托证明书
2015/06/18 职场文书
python必学知识之文件操作(建议收藏)
2021/05/30 Python
Vue OpenLayer 为地图绘制风场效果
2022/04/24 Vue.js
Redis基本数据类型Zset有序集合常用操作
2022/06/01 Redis
Spring Boot 的创建和运行示例代码详解
2022/07/23 Java/Android