纯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 Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
Jan 11 Javascript
jQuery焦点图切换特效插件封装实例
Aug 18 Javascript
jQuery产品间断向下滚动效果核心代码
May 08 Javascript
编程语言JavaScript简介
Oct 16 Javascript
jQuery on()方法示例及jquery on()方法的优点
Aug 27 Javascript
js简单网速测试方法完整实例
Dec 15 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
Jan 23 Javascript
JS脚本实现动态给标签控件添加事件的方法
Jun 02 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
vue 过滤器filter实例详解
Mar 14 Javascript
总结4个方面优化Vue项目
Feb 11 Javascript
在antd Table中插入可编辑的单元格实例
Oct 28 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完全过滤HTML,JS,CSS等标签
2009/01/16 PHP
PHP 各种排序算法实现代码
2009/08/20 PHP
php实现利用phpexcel导出数据
2013/08/24 PHP
php结合正则获取字符串中数字
2015/06/19 PHP
thinkphp在低版本Nginx 下支持PATHINFO的方法分享
2016/05/27 PHP
教你在header中隐藏php的版本信息
2016/08/10 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
JS定时关闭窗口的实例
2013/05/22 Javascript
用js判断输入是否为中文的函数
2014/03/10 Javascript
2014 HTML5/CSS3热门动画特效TOP10
2014/12/07 Javascript
node.js中的fs.rename方法使用说明
2014/12/16 Javascript
JavaScript 函数模式详解及示例
2016/09/07 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
2017/02/07 Javascript
详解AngularJs ui-router 路由的简单介绍
2017/04/26 Javascript
JavaScript实现移动端轮播效果
2017/06/06 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
2018/01/02 Javascript
vue 组件中添加样式不生效的解决方法
2018/07/06 Javascript
axios+Vue实现上传文件显示进度功能
2019/04/14 Javascript
微信小程序自定义顶部组件customHeader的示例代码
2020/06/03 Javascript
基于python操作ES实例详解
2019/11/16 Python
Python time库基本使用方法分析
2019/12/13 Python
keras model.fit 解决validation_spilt=num 的问题
2020/06/19 Python
python脚本和网页有何区别
2020/07/02 Python
详解如何修改jupyter notebook的默认目录和默认浏览器
2021/01/24 Python
H5页面适配iPhoneX(就是那么简单)
2019/12/02 HTML / CSS
台湾前三大B2C购物网站:MOMO购物网
2017/04/27 全球购物
世界上最大的罕见唱片、CD和音乐纪念品网上商店:991.com
2018/05/03 全球购物
Bluebella法国官网:英国性感内衣品牌
2019/05/03 全球购物
德国自然时尚和有机产品购物网站:Waschbär
2019/05/29 全球购物
意大利网上购书网站:Libraccio.it
2021/02/03 全球购物
幼儿教师演讲稿
2014/05/06 职场文书
员工安全生产承诺书
2014/05/22 职场文书
委托开发合同书(标准版)
2019/08/07 职场文书
2019升学宴主持词范本5篇
2019/10/09 职场文书
「魔导具师妲莉亚永不妥协~从今天开始的自由职人生活~」1、2卷发售宣传CM公开
2022/03/21 日漫
详解ZABBIX监控ESXI主机的问题
2022/06/21 Servers