纯JavaScript手写图片轮播代码


Posted in Javascript onOctober 20, 2016

废话不多说了,直接给大家贴js代码实现手写图片轮播的代码了,代码非常简单,具体代码如下所示:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js图片轮播切换</title>
<style type="text/css">
.imgCon{width: 400px;height: 400px;border: 2px solid #DCDCDC;margin: 100px auto;position: relative;}

.imgCon span{display: block;position: absolute;left: 0px;width: 100%;height: 30px;background: #808080;text-align: center;font-size: 18px;line-height: 30px;}

.numStyle{top: 0px;}

.textStyle{bottom: 0px;}

.imgCon strong{font-size: 30px;color: #000000;position: absolute;top: 50%;display: block;background: gray;cursor: pointer;}

.imgCon .prev{left: 10px;}

.imgCon .next{left: 370px;}

img{width:400px;height: 400px;}
</style>
</head>
<body>

<div class="imgCon">


<span id="numCon" class="numStyle">加载中...</span>


<span id="textCon" class="textStyle">加载中...</span>


<strong id="prev" class="prev"><</strong>


<strong id="next" class="next">></strong>


<img src="" id="imgChange"/>

</div>

<script type="text/javascript">


var numCon = document.getElementById('numCon');


var textCon = document.getElementById('textCon');


var prev = document.getElementById('prev');


var next = document.getElementById('next');


var imgChange = document.getElementById('imgChange');


var imgArr = ['img/ad1.jpg','img/ad2.jpg','img/ad3.jpg','img/ad4.jpg'];


var imgText = ['第一张','第二张','第三张','第四张'];


var num = 0;


//数字 图片变化函数


function imgTab(){



numCon.innerHTML = num+1 + '/' + imgArr.length; //数字变化



textCon.innerHTML = imgText[num]; //底部文字内容变化



imgChange.src = imgArr[num]; //图片变化


}


imgTab();


//下一张 按钮


next.onclick = function(){


num++;


if(num == imgArr.length){



num = 0;


}


imgTab();


}


//上一张 按钮


prev.onclick = function(){



num--;


if(num == -1){



num = imgArr.length-1;


}


imgTab();


}

</script>
</body>
</html>

以上所述是小编给大家介绍的纯JavaScript手写图片轮播代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用AJAX返回HTML片段中的JavaScript脚本
Jan 04 Javascript
为调试JavaScript添加输出窗口的代码
Feb 07 Javascript
jquery实现文本框鼠标右击无效以及不能输入的代码
Nov 05 Javascript
使用JavaScript 实现各种跨域的方法
May 08 Javascript
jQuery与JS加载事件用法分析
Sep 04 Javascript
AngularJS中如何使用echart插件示例详解
Oct 26 Javascript
JavaScript原生数组Array常用方法
Apr 06 Javascript
Javascript创建类和对象详解
May 31 Javascript
JavaScript实现简单的双色球(实例讲解)
Jul 31 Javascript
关于vue.extend和vue.component的区别浅析
Aug 16 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
Sep 18 Javascript
js简单实现自动生成表格功能示例
Jun 02 Javascript
Zabbix添加Node.js监控的方法
Oct 20 #Javascript
Javascript实现图片懒加载插件的方法
Oct 20 #Javascript
Vue.js Ajax动态参数与列表显示实现方法
Oct 20 #Javascript
探究Vue.js 2.0新增的虚拟DOM
Oct 20 #Javascript
Javascript 创建类并动态添加属性及方法的简单实现
Oct 20 #Javascript
javascript匀速动画和缓冲动画详解
Oct 20 #Javascript
js设置和获取自定义属性的方法
Oct 20 #Javascript
You might like
IIS php环境配置PHP5 MySQL5 ZendOptimizer phpmyadmin安装与配置
2008/11/18 PHP
WordPress自定义时间显示格式
2015/03/27 PHP
ThinkPHP 5.1 跨域配置方法
2019/10/11 PHP
ext 同步和异步示例代码
2009/09/18 Javascript
JavaScript 原型与继承说明
2010/06/09 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
2014/01/28 Javascript
jquery实现的一个文章自定义分段显示功能
2014/05/23 Javascript
jQuery弹出窗口打开链接的实现代码
2016/12/24 Javascript
整理关于Bootstrap表单的慕课笔记
2017/03/29 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
2019/09/26 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
2020/04/10 Javascript
微信小程序学习总结(五)常见问题实例小结
2020/06/04 Javascript
JavaScript 监听组合按键思路及代码实现
2020/07/28 Javascript
vue操作dom元素的3种方法示例
2020/09/20 Javascript
对于Python中线程问题的简单讲解
2015/04/03 Python
Python RabbitMQ消息队列实现rpc
2018/05/30 Python
Python线程同步的实现代码
2018/10/03 Python
使用Python获取并处理IP的类型及格式方法
2018/11/01 Python
Python使用while循环花式打印乘法表
2019/01/28 Python
Python提取转移文件夹内所有.jpg文件并查看每一帧的方法
2019/06/27 Python
Python3 tkinter 实现文件读取及保存功能
2019/09/12 Python
如何基于Python实现电子邮件的发送
2019/12/16 Python
Python logging模块handlers用法详解
2020/08/14 Python
NYX Professional Makeup俄罗斯官网:世界知名的化妆品品牌
2019/12/26 全球购物
英语专业学生个人求职信
2014/01/28 职场文书
药品促销活动方案
2014/02/14 职场文书
地球一小时倡议书
2014/04/15 职场文书
委托书的写法
2014/09/16 职场文书
关于运动会广播稿300字
2014/10/05 职场文书
2014年初一班主任工作总结
2014/11/08 职场文书
幼儿教师远程研修感悟
2015/11/18 职场文书
熟背这些句子,让您的英语口语突飞猛进(135句)
2019/09/06 职场文书
Vue实现导入Excel功能步骤详解
2021/07/03 Vue.js
JavaScript原型链详解
2021/11/07 Javascript
MySQL数据库索引的最左匹配原则
2021/11/20 MySQL
Spring事务管理下synchronized锁失效问题的解决方法
2022/03/31 Java/Android