纯JavaScript手写图片轮播代码

2019-11-20 08:42:12

字体：大中小

来源：转载

供稿：网友

废话不多说了，直接给大家贴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手写图片轮播代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！

上一篇：基于原生js淡入淡出函数封装（兼容IE）

下一篇：Zabbix添加Node.js监控的方法