纯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的$(document).ready()和onload的加载顺序
May 26 Javascript
关于js中for in的缺陷浅析
Dec 02 Javascript
javascript回车完美实现tab切换功能
Mar 13 Javascript
JQuery实现的图文自动轮播效果插件
Jun 19 Javascript
js实现短信发送倒计时功能(正则验证)
Feb 10 Javascript
详解vue.js的devtools安装
May 26 Javascript
React-Native 组件之 Modal的使用详解
Aug 08 Javascript
写给vue新手们的vue渲染页面教程
Sep 01 Javascript
关于微信小程序map组件z-index的层级问题分析
Jul 09 Javascript
layui自定义ajax左侧三级菜单
Jul 26 Javascript
node.js实现带进度条的多文件上传
Mar 27 Javascript
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
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写的简单数字验证码实例
2017/05/23 PHP
PHP利用pdo_odbc实现连接数据库示例【基于ThinkPHP5.1搭建的项目】
2019/05/13 PHP
js 操作css实现代码
2009/06/11 Javascript
JS截取字符串常用方法整理及使用示例
2013/10/18 Javascript
原生JS实现加入收藏夹的代码
2013/10/24 Javascript
判断客户浏览器是否支持cookie的示例代码
2013/12/23 Javascript
多个checkbox被选中时如何判断是否有自己想要的
2014/09/22 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
2014/10/29 Javascript
js实现Select下拉框具有输入功能的方法
2015/02/06 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
2015/08/24 Javascript
JS自定义选项卡函数及用法实例分析
2015/09/02 Javascript
jquery判断输入密码两次是否相等
2020/04/22 Javascript
JavaScript实现短暂提示框功能
2018/04/04 Javascript
详解如何使用koa实现socket.io官网的例子
2018/11/04 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
2019/04/14 Javascript
鸿蒙系统中的 JS 开发框架
2020/09/18 Javascript
[02:42]决战东方!DOTA2亚洲邀请赛重启荣耀之争
2017/03/17 DOTA
Python Matplotlib库入门指南
2015/05/18 Python
Python sys.argv用法实例
2015/05/28 Python
Python中map,reduce,filter和sorted函数的使用方法
2015/08/17 Python
安装ElasticSearch搜索工具并配置Python驱动的方法
2015/12/22 Python
Python线性方程组求解运算示例
2018/01/17 Python
python3+PyQt5重新实现QT事件处理程序
2018/04/19 Python
python opencv将图片转为灰度图的方法示例
2019/07/31 Python
python 循环数据赋值实例
2019/12/02 Python
python列表的逆序遍历实现
2020/04/20 Python
什么造成了Java里面的异常
2016/04/24 面试题
毕业生自荐信的主要内容
2013/10/29 职场文书
行政经理的岗位职责
2013/11/23 职场文书
助人为乐表扬信范文
2014/01/14 职场文书
单身联谊活动方案
2014/01/29 职场文书
弘扬雷锋精神演讲稿
2014/05/10 职场文书
优秀共产党员主要事迹材料
2015/11/05 职场文书
PostgreSQL 插入INSERT、删除DELETE、更新UPDATE、事务transaction
2022/04/12 PostgreSQL
Jmerte 分布式压测及分布式压测配置
2022/04/30 Java/Android
netty 实现tomcat的示例代码
2022/06/05 Servers