js图片轮播手动切换特效

先瞄一眼js图片轮播手动切换特效图：
代码：
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style>* {padding:0px;margin:0px;}#content {width:400px;height:400px;border:10px solid #ccc;position:absolute;top:50%;left:50%;margin-top:-200px;margin-left:-200px;}#top,#bottom {width:400px;height:40px;background:#000;color:#fff;filter（opacity:80）;opacity:0.8;text-align:center;line-height:40px;position:absolute;}#top {top:0;}#bottom {bottom:0;}#prev,#next {position:absolute;top:50%;margin-top:-20px;width:40px;height:40px;text-align:center;line-height:40px;text-decoration:none;background:#000;color:#fff;font-size:30px;font-weight:bold;}#prev {left:10px;}#next {right:10px;}#img1 {width:400px;height:400px;}#tab {position:absolute;width:400px;height:100px;margin-top:-90px;text-align:center;}#info {margin-top:10px;font-size:20px;}#tab input {width:70px;height:30px;}.active { background : yellow;}</style></head><body><div id="content"> <div id="tab"><input id="loopBtn" type="button" value="循环切换" /><input id="orderBtn" type="button" value="顺序切换" /><p id="info">图片顺序加载中......</p> </div> <p id="top">图片数量加载中......</p> <a id="prev" href="javascript:;"><</a> <a id="next" href="javascript:;">></a> <p id="bottom">图片信息加载中.....</p> <img id="img1" /></div><script>window.onload = function （） { var top = $（"top"）, bottom = $（"bottom"）,prev = $（"prev"）, next = $（"next"）,img = $（"img1"）, loopBtn = $（"loopBtn"）,orderBtn = $（"orderBtn"）, info = $（"info"）, tab = $（"tab"）; // 切换图片顺序的按钮 var btns = tab.getElementsByTagName（"input"）; // 第几张图片 var num = 0; // 图片url var picSrc = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg"]; // 图片的数量 var picLen = picSrc.length; // 图片信息 var picInfo = ["高冷美女","终结者","性感美女","妖娆美女"]; // 循环方式 var loopMethod = 1; // 1,循环切换；0，,顺序切换// 循环信息 var loopInfo = ["图片可以从最后一张转到第一种切换","图片只能切换到最后一张或者第一张"]; changePic（）; // 循环切换 loopBtn.onclick = function （） {loopMethod = 1;changeOrder（）; } // 顺序切换 orderBtn.onclick = function （） {loopMethod = 0;changeOrder（）; } // 上一张 prev.onclick = function （） {num--;// 1,循环切换；0，,顺序切换if（loopMethod） { if （num === -1） num = picLen - 1; changePic（）;} else { if （num === -1） {num = 0;alert（"已经是第一张图片啦！"）; } changePic（）;} } // 下一张 next.onclick = function （） {num++;// 1,循环切换；0，,顺序切换if（loopMethod） { if （num === picLen） num = 0; changePic（）;} else { if （num === picLen） {num = picLen - 1;alert（"已经是最后一张图片啦！"）; }changePic（）;} } // 切换顺序 function changeOrder （） {// 情况按钮的高亮for （ var i = 0, len = btns.length; i < len;i++） { btns[i].className = "";} // 循环切换 1，循环；0，顺序info.innerHTML = loopInfo[1 - loopMethod];loopMethod === 1 ?loopBtn.className = "active" : orderBtn.className = "active"; } // 切换图片 function changePic （） {changeOrder（）;top.innerHTML = num + 1 + " / " + picLen;bottom.innerHTML = picInfo[num];img.src = picSrc[num]; }// id选择器 function $（id） { return document.getElementById（id）;}}</script></body></html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。