js实现简单的轮播图效果

更新时间：2020年12月13日 09:18:41 作者：i大男孩

这篇文章主要为大家详细介绍了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);
 };
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

js
轮播图

微信小程序模板与设置WXML实例讲解
这篇文章主要介绍了微信小程序模板与设置WXML，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-08-08
JavaScript数组常用方法实例讲解总结
这篇文章主要介绍了JavaScript数组及常见方法,结合实例形式总结分析了JavaScript数组的基本获取、添加、删除、排序、翻转等相关操作技巧,需要的朋友可以参考下
2021-09-09
JavaScript取得键盘按下方向键是哪个的方法
这篇文章主要介绍了JavaScript取得键盘按下方向键是哪个的方法,涉及javascript针对键盘按键事件的判定技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-08-08
详细谈谈JS中的内存与变量存储
js中的变量在内存中的具体存储形式是我们学习使用JS必会的,下面这篇文章主要给大家介绍了关于JS中内存与变量存储的相关资料,需要的朋友可以参考下
2021-08-08
使用JavaScript和CSS实现简单的字符计数器
在本文中，你将学习如何使用 JavaScript 创建字符计数器。计数的数字可以在小显示屏中看到。文中示例代码讲解详细，感兴趣的小伙伴可以了解一下
2022-08-08
实现JavaScript高性能的数据存储
本文主要对JavaScript的数据存储，产生性能问题的原因，内存泄露的几种情况等做了简要分析介绍，需要的朋友可以看下
2016-12-12
BootStrap 动态添加验证项和取消验证项的实现方法
这篇文章主要介绍了BootStrap 动态添加验证项和取消验证项的实现方法的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-09-09
微信小程序点击生成朋友圈分享图(遇到的坑)
这篇文章主要介绍了微信小程序点击生成朋友圈分享图,本文给大家分享小编在实现此功能时遇到的各种坑，通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-06-06
Javascript中常用的检测方法小结
这篇文章主要给大家总结了Javascript中常用的检测方法，通过这些总结的方法相信对大家学习或者使用Javascript能有所帮助，有需要的朋友们下面来一起看看吧。
2016-10-10
Javascript动态创建表格及删除行列的方法
这篇文章主要介绍了Javascript动态创建表格及删除行列的方法,涉及javascript动态操作表格的相关技巧,需要的朋友可以参考下
2015-05-05