纯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事件 delegate()使用方法介绍
Oct 30 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
Jan 16 Javascript
js定时调用方法成功后并停止调用示例
Apr 08 Javascript
jQuery控制cookie过期时间的方法
Apr 07 Javascript
jquery实现标题字体变换的滑动门菜单效果
Sep 07 Javascript
JS实现弹出居中的模式窗口示例
Jun 20 Javascript
jQuery插件fullPage.js实现全屏滚动效果
Dec 02 Javascript
node安装--linux下的快速安装教程
Mar 21 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
Apr 11 Javascript
JavaScript阻止表单提交方法(附代码)
Aug 15 Javascript
JavaScript学习笔记之函数记忆
Sep 06 Javascript
微信小程序实现左侧滑动导航栏
Apr 08 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&amp;mysql(一)
2006/10/09 PHP
thinkphp的c方法使用示例
2014/02/24 PHP
ThinkPHP中where()使用方法详解
2016/04/19 PHP
PHP根据session与cookie用户登录状态操作类的代码
2016/05/13 PHP
php无法连接mysql数据库的正确解决方法
2016/07/01 PHP
laravel 实现根据字段不同值做不同查询
2019/10/23 PHP
Javascript String.replace的妙用
2009/09/08 Javascript
图片img的src不变让浏览器重新加载实现方法
2013/03/29 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
2014/06/22 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
2015/03/14 Javascript
JavaScript操作XML文件之XML读取方法
2015/06/09 Javascript
谈谈AngularJs中的隐藏和显示
2015/12/09 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
2016/10/10 Javascript
详解VUE的状态控制与延时加载刷新
2017/03/27 Javascript
深入理解Vue官方文档梳理之全局API
2017/11/22 Javascript
vue2.0使用swiper组件实现轮播效果
2017/11/27 Javascript
Vue进度条progressbar组件功能
2018/04/17 Javascript
[43:33]EG vs Spirit Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
Python中文分词实现方法(安装pymmseg)
2016/06/14 Python
Python numpy实现二维数组和一维数组拼接的方法
2018/06/05 Python
解决python3运行selenium下HTMLTestRunner报错的问题
2018/12/27 Python
python添加模块搜索路径和包的导入方法
2019/01/19 Python
使用Pandas对数据进行筛选和排序的实现
2019/07/29 Python
修改Pandas的行或列的名字(重命名)
2019/12/18 Python
Python读写操作csv和excle文件代码实例
2020/03/16 Python
基于Python正确读取资源文件
2020/09/14 Python
python 如何把docker-compose.yaml导入到数据库相关条目里
2021/01/15 Python
使用python tkinter开发一个爬取B站直播弹幕工具的实现代码
2021/02/07 Python
音乐专业应届生教师求职信
2013/11/04 职场文书
执行总经理岗位职责
2014/02/03 职场文书
实习生求职自荐信
2014/02/07 职场文书
八项规定整改措施
2014/02/12 职场文书
小摄影师教学反思
2014/04/27 职场文书
CSS3实现的水平标题菜单
2021/04/14 HTML / CSS
解决vue中provide inject的响应式监听
2022/04/19 Vue.js
CentOS7环境下MySQL8常用命令小结
2022/06/10 Servers