纯JavaScript手写图片轮播代码
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了纯JavaScript手写图片轮播代码,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含1742字,纯文字阅读大概需要3分钟。
内容图文
![纯JavaScript手写图片轮播代码](/upload/InfoBanner/zyjiaocheng/305/af44fa814e3f42efba5cc6165f5da0f4.jpg)
<!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手写图片轮播代码所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。