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中typeof的用法汇总
Dec 12 Javascript
angularjs学习笔记之双向数据绑定
Sep 26 Javascript
如何提高javascript加载速度
Dec 26 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
Apr 13 Javascript
详解axios在vue中的简单配置与使用
May 10 Javascript
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
es6学习之解构时应该注意的点
Aug 29 Javascript
原生JS实现$.param() 函数的方法
Aug 10 Javascript
ES6 class的应用实例分析
Jun 27 Javascript
浅析js实现网页截图的两种方式
Nov 01 Javascript
js实现鼠标拖拽div左右滑动
Jan 15 Javascript
对vuex中store和$store的区别说明
Jul 24 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
Discuz!5的PHP代码高亮显示插件(黑暗中的舞者更新)
2007/01/29 PHP
phpMyAdmin无法登陆的解决方法
2017/04/27 PHP
js读写(删除)Cookie实例详解
2013/04/17 Javascript
jQuery处理xml格式的返回数据(实例解析)
2013/11/28 Javascript
jquery选择器之属性过滤选择器详解
2014/01/27 Javascript
jQuery函数map()和each()介绍及异同点分析
2014/11/08 Javascript
node.js中的fs.symlinkSync方法使用说明
2014/12/15 Javascript
理解和运用JavaScript的闭包机制
2015/08/13 Javascript
jQuery入门基础知识学习指南
2015/08/14 Javascript
每天一篇javascript学习小结(Boolean对象)
2015/11/12 Javascript
CSS或者JS实现鼠标悬停显示另一元素
2016/01/22 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
2016/11/24 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
2016/12/28 Javascript
浅谈webpack下的AOP式无侵入注入
2017/11/12 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
2018/04/20 Javascript
vue鼠标悬停事件实例详解
2019/04/01 Javascript
浅析Vue中拆分视图层代码的5点建议
2019/08/15 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
2019/12/16 Javascript
vue中用 async/await 来处理异步操作
2020/07/18 Javascript
[02:20]DOTA2英雄基础教程 黑暗贤者
2013/12/19 DOTA
[14:25]教你分分钟做大人:主宰(HEROS)
2014/12/08 DOTA
python将.ppm格式图片转换成.jpg格式文件的方法
2018/10/27 Python
Python OpenCV对本地视频文件进行分帧保存的实例
2019/01/08 Python
python文件选择对话框的操作方法
2019/06/27 Python
Python解析json时提示“string indices must be integers”问题解决方法
2019/07/31 Python
自适应线性神经网络Adaline的python实现详解
2019/09/30 Python
使用python实现男神女神颜值打分系统(推荐)
2019/10/31 Python
解决Jupyter notebook中.py与.ipynb文件的import问题
2020/04/21 Python
Python pandas 列转行操作详解(类似hive中explode方法)
2020/05/18 Python
在什么时候需要使用"常引用"
2015/12/31 面试题
一年级班主任感言
2014/03/08 职场文书
就业推荐表自我鉴定范文
2014/03/21 职场文书
大学生就业意向书范文
2014/04/01 职场文书
2014年医院后勤工作总结
2014/12/06 职场文书
个人催款函范文
2015/06/23 职场文书
springboot+VUE实现登录注册
2021/05/27 Vue.js