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脚本学习 比较实用的基础
Sep 07 Javascript
JavaScript 小型打飞机游戏实现原理说明
Oct 28 Javascript
Javascript小技巧之生成html元素
May 15 Javascript
js动态生成Html元素实现Post操作(createElement)
Sep 14 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
Nov 25 Javascript
三种带箭头提示框总结实例
Jun 14 Javascript
JS实现数组按升序及降序排列的方法
Apr 26 Javascript
ES6解构赋值的功能与用途实例分析
Oct 31 Javascript
JS实现对json对象排序并删除id相同项功能示例
Apr 18 Javascript
layui 实现表格某一列显示图标
Sep 19 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
May 15 Javascript
JavaScript实现班级抽签小程序
May 19 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判断变量类型常用方法
2012/04/24 PHP
php模拟服务器实现autoindex效果的方法
2015/03/10 PHP
PHP中Trait及其应用详解
2017/02/14 PHP
DOM相关内容速查手册
2007/02/07 Javascript
纯CSS打造的导航菜单(附jquery版)
2010/08/07 Javascript
JS冒泡事件的快速解决方法
2013/12/16 Javascript
javascript的switch用法注意事项分析
2015/02/02 Javascript
JS实现网页表格自动变大缩小的方法
2015/03/09 Javascript
javascript实现的固定位置悬浮窗口实例
2015/04/30 Javascript
nodejs修复ipa处理过的png图片
2016/02/17 NodeJs
javascript创建对象的3种方法
2016/11/02 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
2017/03/03 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
2017/05/10 Javascript
前端构建工具之gulp的配置与搭建详解
2017/06/12 Javascript
vuex 的简单使用
2018/03/22 Javascript
Webpack 之 babel-loader文件预处理器详解
2018/03/23 Javascript
python文件的md5加密方法
2016/04/06 Python
python使用fcntl模块实现程序加锁功能示例
2017/06/23 Python
Python Selenium Cookie 绕过验证码实现登录示例代码
2018/04/10 Python
Python 根据数据模板创建shapefile的实现
2019/11/26 Python
Python reversed函数及使用方法解析
2020/03/17 Python
python等待10秒执行下一命令的方法
2020/07/19 Python
python关于倒排列的知识点总结
2020/10/13 Python
在 Python 中使用 7zip 备份文件的操作
2020/12/11 Python
修复iPhone的safari浏览器上submit按钮圆角bug
2012/12/24 HTML / CSS
详解CSS3阴影 box-shadow的使用和技巧总结
2016/12/03 HTML / CSS
html5生成柱状图(条形图)效果的实例代码
2016/03/25 HTML / CSS
迎接领导欢迎词
2014/01/11 职场文书
俄语专业职业生涯规划
2014/02/26 职场文书
2014年教研室工作总结
2014/12/06 职场文书
2016年幼儿园教师政治学习心得体会
2016/01/23 职场文书
springboot利用redis、Redisson处理并发问题的操作
2021/06/18 Java/Android
python实现剪贴板的操作
2021/07/01 Python
redis不能访问本机真实ip地址的解决方案
2021/07/07 Redis
SQL语句中JOIN的用法场景分析
2021/07/25 SQL Server
Win11电源已接通但未充电怎么办?Win11电源已接通未充电的解决方法
2022/04/05 数码科技