纯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 相关文章推荐
jQuery autocomplate 自扩展插件、自动完成示例代码
Mar 28 Javascript
JavaScript实现快速排序(自已编写)
Dec 19 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
Aug 30 Javascript
table insertRow、deleteRow定义和用法总结
May 14 Javascript
javascript控制在光标位置插入文字适合表情的插入
Jun 09 Javascript
JS+CSS实现表格高亮的方法
Aug 05 Javascript
详解js私有作用域中创建特权方法
Jan 25 Javascript
Javascript之Date对象详解
Jun 07 Javascript
JS公共小方法之判断对象是否为domElement的实例
Nov 25 Javascript
纯js代码生成可搜索选择下拉列表的实例
Jan 11 Javascript
webpack file-loader和url-loader的区别
Jan 15 Javascript
vue 插件的方法代码详解
Jun 06 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
解析web文件操作常见安全漏洞(目录、文件名检测漏洞)
2013/06/29 PHP
ThinkPHP之A方法实例讲解
2014/06/20 PHP
CodeIgniter与PHP5.6的兼容问题
2015/07/16 PHP
Laravel中前端js上传图片到七牛云的示例代码
2017/09/04 PHP
基于PHP实现生成随机水印图片
2020/12/09 PHP
jquery插件之easing 动态菜单
2010/08/21 Javascript
简单的前端js+ajax 购物车框架(入门篇)
2011/10/29 Javascript
原生javascript实现Tab选项卡切换功能
2015/01/12 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
2015/07/17 Javascript
JavaScript Uploadify文件上传实例
2017/02/28 Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
2017/04/20 jQuery
Vue.js在数组中插入重复数据的实现代码
2017/11/17 Javascript
vue一个页面实现音乐播放器的示例
2018/02/06 Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
2018/09/08 Javascript
jQuery序列化form表单数据为JSON对象的实现方法
2018/09/20 jQuery
Vue2.0 实现页面缓存和不缓存的方式
2019/11/12 Javascript
JavaScript定时器常见用法实例分析
2019/11/15 Javascript
nodeJs项目在阿里云的简单部署
2020/11/27 NodeJs
Python解释执行原理分析
2014/08/22 Python
Python下的常用下载安装工具pip的安装方法
2015/11/13 Python
Python作用域用法实例详解
2016/03/15 Python
Django给admin添加Action的步骤详解
2019/05/01 Python
python实现DEM数据的阴影生成的方法
2019/07/23 Python
解决Pycharm中恢复被exclude的项目问题(pycharm source root)
2020/02/14 Python
Python HTMLTestRunner如何下载生成报告
2020/09/04 Python
物业管理员岗位职责范文
2013/11/25 职场文书
思想汇报格式
2014/01/05 职场文书
我们的节日清明节活动方案
2014/03/05 职场文书
专业技术职务聘任书
2014/03/29 职场文书
房地产广告策划方案
2014/05/15 职场文书
信息与计算机科学职业规划范文:成为一艘有方向的船
2014/09/11 职场文书
党员群众路线剖析材料
2014/10/08 职场文书
群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
大学生创业事迹材料
2014/12/30 职场文书
计划生育个人总结
2015/03/02 职场文书
Python图像处理库PIL详细使用说明
2022/04/06 Python