纯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 相关文章推荐
javascript 得到变量类型的函数
May 19 Javascript
javascript showModalDialog 内跳转页面的问题
Nov 25 Javascript
一个简单的Ext.XTemplate的实例代码
Mar 18 Javascript
JQueryEasyUI datagrid框架的基本使用
Apr 08 Javascript
JavaScript实现同时调用多个函数的方法
Nov 09 Javascript
js模式化窗口问题![window.dialogArguments]
Oct 30 Javascript
微信小程序  action-sheet详解及实例代码
Nov 09 Javascript
Vue.js实现网格列表布局转换方法
Aug 25 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
May 30 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
Aug 02 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
Dec 28 Javascript
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
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
把从SQL中取出的数据转化成XMl格式
2006/10/09 PHP
手把手教你使用DedeCms V3的在线采集图文教程
2007/04/03 PHP
php实现比较两个字符串日期大小的方法
2015/05/12 PHP
PHP实现搜索地理位置及计算两点地理位置间距离的实例
2016/01/08 PHP
php错误日志简单配置方法
2016/07/11 PHP
lnmp安装多版本PHP共存的方法详解
2018/08/02 PHP
js或者jquery判断图片是否加载完成实现代码
2013/03/20 Javascript
原生js结合html5制作小飞龙的简易跳球
2015/03/30 Javascript
JS代码防止SQL注入的方法(超简单)
2016/04/12 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
2016/06/25 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
2018/01/22 Javascript
JS实现的判断方法、变量是否存在功能示例
2020/03/28 Javascript
layui table 表格模板按钮的实例代码
2019/09/21 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
2020/05/01 Javascript
vue过滤器实现日期格式化的案例分析
2020/07/02 Javascript
针对Vue路由history模式下Nginx后台配置操作
2020/10/22 Javascript
vant 中van-list的用法说明
2020/11/11 Javascript
[01:11]回顾历届DOTA2国际邀请赛中国区预选赛
2017/06/26 DOTA
python创建进程fork用法
2015/06/04 Python
Python绘制七段数码管实例代码
2017/12/20 Python
取numpy数组的某几行某几列方法
2018/04/03 Python
Python Flask框架模板操作实例分析
2019/05/03 Python
Python二维数组实现求出3*3矩阵对角线元素的和示例
2019/11/29 Python
python中如何打包用户自定义模块
2020/09/23 Python
英国顶级足球鞋的领先零售商:Lovell Soccer
2019/08/27 全球购物
如何查找和删除数据库中的重复数据
2014/11/05 面试题
病媒生物防治方案
2014/05/13 职场文书
竞聘上岗演讲
2014/05/19 职场文书
2015会计试用期工作总结
2014/12/12 职场文书
高中生思想道德自我评价
2015/03/09 职场文书
法定代表人免职证明
2015/06/24 职场文书
小学英语教师研修感悟
2015/11/18 职场文书
《别在吃苦的年纪选择安逸》读后感3篇
2019/11/30 职场文书
十大冰系宝可梦排名,颜值最高的阿罗拉九尾,第三使用率第一
2022/03/18 日漫
Python pyecharts绘制条形图详解
2022/04/02 Python
PYTHON基于Pyecharts绘制常见的直角坐标系图表
2022/04/28 Python