先瞄一眼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>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
