JS实现图片轮播效果

来源：互联网发布：淘宝返利机器人骗局编辑：程序博客网时间：2024/05/19 13:27
看了教程后，又写了一个图片轮播页面。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>JS图片轮播作业</title></head><style>*{margin:0;padding:0;}.wrap{width:500px;height:500px;margin:70px auto;border:solid 15px gray;position:relative;}.img{width:500px;height:500px;clear:both;}.div_btn{margin:30px auto;width:250px;height:50px;}.btn1,.btn2{width:100px;height:30px;text-align:center;line-height:25px;/*这里用30px为什么不能垂直居中呢？？*/font-size: 20px;color:white;background:#b2e281;}.left{float:left;clear:both;}.right{float:right;}.prev,.next  {width:40px;height:40px;margin-top:250px;border:solid 1px gray;font-size: 25px;position:absolute;top:0px;text-decoration:none;color:gray;text-align:center;line-height:40px;background: white;filter:alpha(opacity=80%);opacity:0.8;}a:hover{filter:alpha(opacity=30%);opacity:0.3;}.prev{left:10px;}.next{right:10px;}.p_top,.p_bottom{width: 500px;height:30px;background: black;filter:alpha(opacity=60%);opacity:0.6;position:absolute;color:white;text-align:center;line-height: 30px;}.p_top{position:absolute;top:0;left:0;}.p_bottom{bottom:0;left:0;}#span1{position: absolute;top:-70px;text-align:center;line-height:30px;width:400px;height:30px;left:50px;}</style><script>window.onload = function(){var oPrev = document.getElementById('prev');//前一张图片按钮声明var oNext = document.getElementById('next');//后一张图片按钮声明var oP_top = document.getElementById('p_top');//顶部显示的图片张数声明var oP_bottom = document.getElementById('p_bottom');//底部显示的图片信息声明var oImg = document.getElementById('img');//插入图片变量声明var oBtn1 = document.getElementById('btn1');//循环播放按钮var oBtn2 = document.getElementById('btn2');//顺序播放按钮var oSpan = document.getElementById('span1');//初始化时候提示文字var arrUrl = ['http://t-1.tuzhan.com/71af8ce29e83/c-2/l/2014/01/19/01/dea700465eb94b01b6e68407182e3a99.jpg','http://gb.cri.cn/mmsource/images/2015/03/28/74/14921801016817831234.jpg','http://attachments.gfan.com/attachments2/day_110315/110315113890464bfbd7af0262.jpg','http://img8.zol.com.cn/bbs/upload/24289/24288117_0800.jpg'];var arrText = ['清纯AK美女','迷人眼神','暴力美学','狙击步'];var num = 0;//声明一个初始值var onOff = true;function fnTab(){oP_top.innerHTML = num + 1 + '/' + arrUrl.length;oP_bottom.innerHTML = arrText[num];oImg.src = arrUrl[num];}//将要经常执行的几个步骤写在一个函数里，便于以后调用fnTab();//初始化，先执行一次函数，以显示图片张数和信息oBtn1.onclick = function(){oSpan.innerHTML = '图片可以循环播放';onOff = true;//利用布尔值，来对循环方式进行判别执行,此时为不循环};oBtn2.onclick = function(){oSpan.innerHTML = '图片不可以循环播放';onOff = false;//此时布尔值决定按照顺序播放};oPrev.onclick = function(){num --;if(num == -1){if(onOff){num = arrUrl.length - 1;}else{alert('这已经是第一张图片了，不能再往前了。。');num = 0;//这里要指定num值，否则num会一直减小}}fnTab();};//每次匿名函数后边这个分号要记得写oNext.onclick = function(){num ++;if(num == 4){if(onOff){num = 0;}else{alert('这已经是最后一张图片啦');num = 3;//这里注意还要再次指定num值，否则num会一直增加}}fnTab();};}</script><body><div class="div_btn"><input type="button" value="循环播放" id="btn1" class="btn1 left" /><input type="button" name="" value="顺序播放" id="btn2" class="btn2 right"/></div><div id="wrap" class="wrap"><span id="span1">图片轮播有两种方式，一种循环，一种不循环</span><a href="javascript:;" id="prev" class="prev"><</a><a href="javascript:;" id="next" class="next">></a><p class="p_top" id="p_top">图片张数</p><p class="p_bottom" id="p_bottom">文字</p><img src="img/1.jpg" alt="图片" class="img" id="img"></div></body></html>
这次注意写了很多注释，确实任重而道远。写的过程中，第一次深刻理解了利用布尔值的重要性，通过布尔值的选取，来决定轮播的方式。
效果图：
0 0