编程 Javascript

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);
 };
}

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

js实现简单的轮播图效果

- Author -

i大男孩

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JQuery为textarea添加maxlength属性的代码

Apr 07 Javascript

javscript对象原型的一些看法

Sep 19 Javascript

javascript中对Attr(dom中属性)的操作示例讲解

Dec 02 Javascript

Javascript数组操作函数总结

Feb 05 Javascript

JavaScript内存管理介绍

Mar 13 Javascript

jQuery实现checkbox全选的方法

Jun 10 Javascript

跨域请求的完美解决方法(JSONP, CORS)

Jun 12 Javascript

jQuery图片轮播实现并封装(一)

Dec 03 Javascript

解决Jstree 选中父节点时被禁用的子节点也会选中的问题

Dec 27 Javascript

Vue中使用create-keyframe-animation与动画钩子完成复杂动画

Apr 09 Javascript

JS将时间秒转换成天小时分钟秒的字符串

Jul 10 Javascript

javascript之分片上传，断点续传的实际项目实现详解

Sep 05 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