纯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 相关文章推荐
通过继承IHttpHandle实现JS插件的组织与管理
Jul 13 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
Apr 26 Javascript
JS 毫秒转时间示例代码
Sep 22 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
Sep 20 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
Jan 18 Javascript
vue.js做一个简单的编辑菜谱功能
May 08 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
Apr 26 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
Dec 22 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
Jan 12 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
Mar 23 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
Jun 16 Javascript
分享15个Webpack实用的插件!!!
Mar 31 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
php项目打包方法
2008/02/18 PHP
php删除文件夹及其文件夹下所有文件的函数代码
2013/01/23 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
PHP重载基础知识回顾
2020/09/10 PHP
javascript比较文档位置
2008/04/08 Javascript
Js 中debug方式
2010/02/07 Javascript
仅用[]()+!等符号就足以实现几乎任意Javascript代码
2010/03/01 Javascript
javascript 常用功能总结
2012/03/18 Javascript
display和visibility的区别示例介绍
2014/02/26 Javascript
将form表单中的元素转换成对象的方法适用表单提交
2014/05/02 Javascript
javascript控制在光标位置插入文字适合表情的插入
2014/06/09 Javascript
nodejs初步体验篇
2015/11/23 NodeJs
js 定位到某个锚点的方法
2016/11/19 Javascript
Javascript之深入浅出prototype
2017/02/06 Javascript
Ionic + Angular.js实现图片轮播的方法示例
2017/05/21 Javascript
node.js中express-session配置项详解
2017/05/31 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
2017/06/14 Javascript
在Vue中使用echarts的实例代码(3种图)
2017/07/10 Javascript
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
微信小程序异步处理详解
2017/11/10 Javascript
JavaScript实现创建自定义对象的常用方式总结
2018/07/09 Javascript
webpack4 CSS Tree Shaking的使用
2018/09/03 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
2019/03/13 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
2020/07/27 Javascript
jQuery实现朋友圈查看图片
2020/09/11 jQuery
python判断端口是否打开的实现代码
2013/02/10 Python
python导入坐标点的具体操作
2019/05/10 Python
python原类、类的创建过程与方法详解
2019/07/19 Python
妙用itchat! python实现久坐提醒功能
2019/11/25 Python
Django haystack实现全文搜索代码示例
2020/11/28 Python
移动端Html5页面生成图片解决方案
2018/08/07 HTML / CSS
ANINE BING官方网站:奢华的衣橱基本款和时尚永恒的单品
2019/11/26 全球购物
小区门卫工作职责
2013/12/14 职场文书
群众路线教育实践活动心得体会(四风)
2014/11/03 职场文书
保护环境建议书作文400字
2015/09/14 职场文书
如何计划开一家便利店?
2019/07/31 职场文书