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 相关文章推荐
jQuery中attr()和prop()在修改checked属性时的区别
Jul 18 Javascript
7个有用的jQuery代码片段分享
May 19 Javascript
js确认框confirm()用法实例详解
Jan 07 Javascript
JS控制伪元素的方法汇总
Apr 06 Javascript
JavaScript  cookie 跨域访问之广告推广
Apr 20 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
Sep 20 Javascript
JS禁止查看网页源代码的实现方法
Oct 12 Javascript
基于JS实现限时抢购倒计时间表代码
May 09 Javascript
swiper自定义分页器使用方法详解
Sep 14 Javascript
ajax请求+vue.js渲染+页面加载的示例
Feb 11 Javascript
vue axios基于常见业务场景的二次封装的实现
Sep 21 Javascript
vue-router 前端路由之路由传值的方式详解
Apr 30 Javascript
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 Static 关键字之旅模式
2015/11/13 PHP
微信支付开发告警通知实例
2016/07/12 PHP
PHP中$GLOBALS['HTTP_RAW_POST_DATA']和$_POST的区别分析
2017/07/03 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
解决php extension 加载顺序问题
2019/08/16 PHP
经常用的图片在容器中的水平垂直居中实例
2007/06/10 Javascript
javascript 用原型继承来实现对象系统
2010/03/22 Javascript
自己动手开发jQuery插件教程
2011/08/25 Javascript
随窗体滑动的小插件sticky源码
2013/06/21 Javascript
JavaScript禁止页面操作的示例代码
2013/12/17 Javascript
JS实现黑色大气的二级导航菜单效果
2015/09/18 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
2016/05/15 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
2017/02/27 Javascript
axios拦截设置和错误处理方法
2018/03/05 Javascript
JavaScript类数组对象转换为数组对象的方法实例分析
2018/07/24 Javascript
JS中数据结构之栈
2019/01/01 Javascript
利用JS如何获取form表单数据
2019/12/19 Javascript
jQuery操作事件完整实例分析
2020/01/10 jQuery
python 示例分享---逻辑推理编程解决八皇后
2014/07/20 Python
python使用两种发邮件的方式smtp和outlook示例
2017/06/02 Python
实现Python与STM32通信方式
2019/12/18 Python
python爬虫利用代理池更换IP的方法步骤
2021/02/21 Python
加拿大花店:1800Flowers.ca
2016/11/16 全球购物
美国大码时尚女装购物网站:ELOQUII
2017/12/28 全球购物
世界上最值得信赖的多日游在线市场:TourRadar
2018/07/20 全球购物
上海期货面试题
2014/01/31 面试题
全国税务系统先进集体事迹材料
2014/05/19 职场文书
党的群众路线教育实践活动对照检查材料
2014/09/22 职场文书
西安兵马俑导游词
2015/02/02 职场文书
个人年终总结怎么写
2015/03/09 职场文书
通知书大全
2015/04/27 职场文书
反腐倡廉主题教育活动总结
2015/05/07 职场文书
运动会入场词
2015/07/18 职场文书
中学语文教学反思
2016/02/16 职场文书
2016大学生诚信考试承诺书
2016/03/25 职场文书
导游词之广州陈家祠
2019/10/21 职场文书