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 相关文章推荐
javascript Ext JS 状态默认存储时间
Feb 15 Javascript
用JQuery模仿淘宝的图片放大镜显示效果
Sep 15 Javascript
javascript获取元素偏移量的方法有哪些
Jun 24 Javascript
原生JavaScript生成GUID的实现示例
Sep 05 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
Aug 05 Javascript
jQuery动态添加与删除tr行实例代码
Oct 18 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
Jan 24 Javascript
详解Vue 全局引入bass.scss 处理方案
Mar 26 Javascript
从零开始学习搭建React脚手架项目
Aug 23 Javascript
vue环形进度条组件实例应用
Oct 10 Javascript
Vue核心概念Getter的使用方法
Jan 18 Javascript
JavaScript中的宏任务和微任务详情
Nov 27 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
CURL的学习和应用(附多线程实现)
2013/06/03 PHP
php时间戳转换的示例
2014/03/31 PHP
PHP连接sql server 2005环境配置及问题解决
2014/08/08 PHP
PHP附件下载中文名称乱码的解决方法
2015/12/17 PHP
jQuery 操作下拉列表框实现代码
2010/02/22 Javascript
javascript 精粹笔记
2010/05/09 Javascript
js实现幻灯片播放图片示例代码
2013/11/07 Javascript
原生javascript实现图片弹窗交互效果
2015/01/12 Javascript
jQuery增加自定义函数的方法
2015/07/18 Javascript
Angular2利用组件与指令实现图片轮播组件
2017/03/27 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
2017/11/22 Javascript
利用JS实现一个同Excel表现的智能填充算法
2018/08/13 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
2018/08/27 Javascript
vue 基于element-ui 分页组件封装的实例代码
2018/12/10 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
2019/04/30 Javascript
jQuery删除/清空指定元素的所有子节点实例代码
2019/07/04 jQuery
使用JavaScript通过前端发送电子邮件
2020/05/22 Javascript
JavaScript中的几种继承方法示例
2020/12/06 Javascript
[01:36]极致酷炫!TI9典藏宝瓶+撼地者至宝展示
2019/06/11 DOTA
python爬取网站数据保存使用的方法
2013/11/20 Python
python字典序问题实例
2014/09/26 Python
python3生成随机数实例
2014/10/20 Python
用Python下载一个网页保存为本地的HTML文件实例
2018/05/21 Python
pytorch中的卷积和池化计算方式详解
2020/01/03 Python
Python实现Canny及Hough算法代码实例解析
2020/08/06 Python
html5 postMessage前端跨域并前端监听的方法示例
2018/11/01 HTML / CSS
eDreams意大利:南欧领先的在线旅行社
2018/11/23 全球购物
客服端调用EJB对象的几个基本步骤
2012/01/15 面试题
会计专业毕业生自我鉴定
2013/10/29 职场文书
军校本科大学生自我评价
2014/01/14 职场文书
工作表现自我评价
2014/02/08 职场文书
2014年挂职干部工作总结
2014/12/06 职场文书
幼儿园校车安全责任书
2015/05/08 职场文书
2015年电厂工作总结范文
2015/05/13 职场文书
2016元旦晚会主持人开场白和结束语
2015/12/03 职场文书
2016暑期社会实践心得体会范文
2016/01/14 职场文书