JS图片轮播
Posted Andy 胡
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS图片轮播相关的知识，希望对你有一定的参考价值。
轮播就是一组图，每次显示一张
1. 先定义两个函数：显示某图，隐藏某图
2. 写自动轮播
3. 写点击按钮的图片切换
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Carousel·轮播</title> <style> div.outer { width: 200px; height: 200px; border: 1px solid #CCC; /*留点边界,美观*/ padding: 5px; } div.per { /*充满父div*/ width: 100%; height: 100%; /*border: 1px solid #CCC;这个留着的话，ahShadow层有一个px的误差对不齐*/ /*默认不显示*/ display: none; } .per .pic { height: 100%; width: 100%; } .per .title { color: blue; font-family: "微软雅黑"; /*位置调整*/ position: relative; bottom: 25px; left: 5px; } div.ahShadow { height: 20px; width: 100%; background-color: #666; /*位置调整*/ position: relative; bottom: 20px; /*透明度*/ opacity: 0.5; /*透明度——IE不支持opacity*/ filter: alpha(opacity=50); } /*↓↓↓按钮*/ .divBtns { position: relative; bottom: 40px; right: 5px; /*右置*/ float: right; } .divBtns a { width: 20px; height: 20px; background-color: #50F0D8; /*文字处理*/ text-align: center; text-decoration: none; /*行内块显示*/ display: inline-block; } </style> </head> <body> <div class="outer"> <div class="per"> <img class="pic" src="img/sh1.png" /> <div class="title">图片1</div> </div> <div class="per"> <img class="pic" src="img/sh2.png" /> <div class="title">图片2</div> </div> <!---------------------------------------> <div class="ahShadow"></div> <!---------------------------------------> <div class="divBtns" id="btn-ahref"> <!--加一张图，就需要加一个按钮--> <a href="javascript:void(0)" class="abtn">1</a> <a href="javascript:void(0)" class="abtn">2</a> </div> </div> <script> var divlist = document.getElementsByClassName("per"); var btns = document.getElementsByClassName("abtn"); function picShow(idx) { // 图片显示 divlist[idx].style.display = "block"; // 按钮变色 btns[idx].style.backgroundColor = "#FFF"; } function picHiden(idx) { divlist[idx].style.display = "none"; btns[idx].style.backgroundColor = "#50F0D8"; } //自动轮播 function autoShow() { for (var i = 0; i < divlist.length; i++) { if (divlist[i].style.display == "block") { // 让显示的图片不显示 picHiden(i); // 下一张显示 if (i == divlist.length - 1) { picShow(0); } else { picShow(i + 1); } // 做完了就撤 break; } } } // 初始化 picShow(0); // 定时轮播 setInterval("autoShow()", 5000); </script> <script> // 手动轮播 debugger; for (i = 0; i < btns.length; i++) { //i是不停在变的，每次循环要把i的当前值固定下来 // 自定义一个属性“idx”来存放i的值 btns[i].idx = i; btns[i].onclick = function() { // 当前下标对应的图片可见，其余图片不可见 for (j = 0; j < divlist.length; j++) { picHiden(j); } picShow(this.idx); } } </script> </body> </html>
以上是关于JS图片轮播的主要内容，如果未能解决你的问题，请参考以下文章