js实现简单的轮播图效果


Posted in Javascript onDecember 13, 2020

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

js实现简单的轮播图效果

代码:

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8" />
 <title></title>
 <link rel="stylesheet" type="text/css" href="css/style.css" />
 <style>
 * {
 margin: 0;
 padding: 0;
 }

 .box {
 width: 100%;
 height: 500px;
 border: 1px solid;
 }
 </style>
 <script src="./js/new_file.js"></script>
</head>

<body>
 <div class="box_1">
 <div class="c-banner">
 <div class="banner">
 <ul id="banner">
  <li><img src="img/su_ning1.png"></li>
  <li><img src="img/su_ning2.png"></li>
  <li><img src="img/su_ning3.png"></li>
  <li><img src="img/su_ning4.png"></li>
  <li><img src="img/su_ning5.png"></li>
  <li><img src="img/su_ning6.png"></li>
  <li><img src="img/su_ning7.png"></li>
  <li><img src="img/su_ning8.png"></li>
 </ul>
 </div>
 <div class="nexImg" id="nexImg">
 <img src="img/nexImg.png" />
 </div>
 <div class="preImg" id="preImg">
 <img src="img/preImg.png" />
 </div>
 <div class="jumpBtn">
 <ul id="jumpBtn">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
 </ul>
 </div>
 </div>
</body>

</html>

js:

window.onload = function() {
 //banner 自动播放
 var oBanner = document.getElementById('banner');
 var aLi = oBanner.getElementsByTagName('li');
 var oJumpBtn = document.getElementById('jumpBtn');
 var aBtn = oJumpBtn.getElementsByTagName('li');
 var oPreImg = document.getElementById('preImg');
 var oNexImg = document.getElementById('nexImg');
 var iNow = 0;
 var timer = null;
 for (var i = 0; i < aBtn.length; i++) {
 aBtn[i].index = i;
 aBtn[i].onclick = function() {
 iNow = this.index;
 tab();
 };
 }

 function tab() {
 for (var i = 0; i < aBtn.length; i++) {
 aBtn[i].style.background = '#ccc';
 aLi[i].style.opacity = 0;
 }
 aBtn[iNow].style.background = '#CF0F32';
 aLi[iNow].style.opacity = 1;
 }

 function tick() {
 iNow++;
 if (iNow == aBtn.length) {
 iNow = 0;
 }
 tab();
 }

 timer = setInterval(tick, 2000);

 oPreImg.onclick = function() {
 iNow--;
 if (iNow < 0) {
 iNow = aBtn.length - 1;
 }
 tab();
 };
 oNexImg.onclick = tick;

 oBanner.onmouseover = function() {
 clearInterval(timer);
 };
 oBanner.onmouseout = function() {
 timer = setInterval(tick, 2000);
 };
}

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

Javascript 相关文章推荐
js 弹出框 替代浏览器的弹出框
Oct 29 Javascript
$.ajax返回的JSON无法执行success的解决方法
Sep 09 Javascript
动态加载脚本提升javascript性能
Feb 24 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
Apr 06 Javascript
jquery使用hide方法隐藏指定id的元素
Mar 30 Javascript
jQuery实现的网页竖向菜单效果代码
Aug 26 Javascript
jquery ztree异步搜索(搜叶子)实践
Feb 25 Javascript
Vue.js上下滚动加载组件的实例代码
Jul 17 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
Sep 16 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
原生js实现拖拽移动与缩放效果
Aug 24 Javascript
vuex的数据渲染与修改浅析
Nov 26 Vue.js
jquery实现淡入淡出轮播图效果
Dec 13 #jQuery
JavaScript实现移动小精灵的案例代码
Dec 12 #Javascript
详解vue中使用transition和animation的实例代码
Dec 12 #Vue.js
javascript中call,apply,bind的区别详解
Dec 11 #Javascript
使用js获取身份证年龄的示例代码
Dec 11 #Javascript
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 #Vue.js
node koa2 ssr项目搭建的方法步骤
Dec 11 #Javascript
You might like
php开发留言板的CRUD(增,删,改,查)操作
2012/04/19 PHP
php实现邮件发送并带有附件
2014/01/24 PHP
php根据日期判断星座的函数分享
2014/02/13 PHP
php实现utf-8转unicode函数分享
2015/01/06 PHP
Javascript 写的简单进度条控件
2008/01/22 Javascript
JavaScript Object的extend是一个常用的功能
2009/12/02 Javascript
qq悬浮代码(兼容各个浏览器)
2014/01/29 Javascript
jQuery中end()方法用法实例
2015/01/08 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
2015/09/07 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
2016/06/26 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
2018/03/06 Javascript
微信小程序实现时间预约功能
2018/11/27 Javascript
Vue axios 将传递的json数据转为form data的例子
2019/10/29 Javascript
详解jQuery中的prop()使用方法
2020/01/05 jQuery
Node使用Nodemailer发送邮件的方法实现
2020/02/24 Javascript
[53:52]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[57:53]Secret vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python中set常用操作汇总
2016/06/30 Python
利用python打印出菱形、三角形以及矩形的方法实例
2017/08/08 Python
Python基于回溯法子集树模板实现图的遍历功能示例
2017/09/05 Python
Python计算库numpy进行方差/标准方差/样本标准方差/协方差的计算
2018/12/28 Python
使用pandas 将DataFrame转化成dict
2019/12/10 Python
python UDF 实现对csv批量md5加密操作
2021/01/01 Python
CSS3 animation ? steps 函数详解
2019/08/30 HTML / CSS
简单介绍HTML5中的文件导入
2015/05/08 HTML / CSS
荷兰手表网站:Watch2Day
2018/07/02 全球购物
施华洛世奇巴西官网:SWAROVSKI巴西
2019/12/03 全球购物
"序列点" 是什么
2016/07/29 面试题
幼儿园校车安全责任书
2015/05/08 职场文书
张丽莉事迹观后感
2015/06/16 职场文书
安全生产隐患排查制度
2015/08/05 职场文书
2016大学生社会实践心得体会范文
2016/01/14 职场文书
python如何进行基准测试
2021/04/26 Python
Vue项目打包、合并及压缩优化网页响应速度
2021/07/07 Vue.js
全新239军机修复记
2022/04/05 无线电
解决Springboot PostMapping无法获取数据的问题
2022/05/06 Java/Android