溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
先瞄一眼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="循環(huán)切換" />
<input id="orderBtn" type="button" value="順序切換" />
<p id="info">圖片順序加載中......</p>
</div>
<p id="top">圖片數(shù)量加載中......</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'];
// 圖片的數(shù)量
var picLen = picSrc.length;
// 圖片信息
var picInfo = ['高冷美女','終結者','性感美女','妖嬈美女'];
// 循環(huán)方式
var loopMethod = 1; // 1,循環(huán)切換；0，,順序切換
// 循環(huán)信息
var loopInfo = ['圖片可以從最后一張轉到第一種切換','圖片只能切換到最后一張或者第一張'];
changePic();
// 循環(huán)切換
loopBtn.onclick = function () {
loopMethod = 1;
changeOrder();
}
// 順序切換
orderBtn.onclick = function () {
loopMethod = 0;
changeOrder();
}
// 上一張
prev.onclick = function () {
num--;
// 1,循環(huán)切換；0，,順序切換
if(loopMethod) {
if (num === -1) num = picLen - 1;
changePic();
} else {
if (num === -1) {
num = 0;
alert('已經(jīng)是第一張圖片啦!');
}
changePic();
}
}
// 下一張
next.onclick = function () {
num++;
// 1,循環(huán)切換；0，,順序切換
if(loopMethod) {
if (num === picLen) num = 0;
changePic();
} else {
if (num === picLen) {
num = picLen - 1;
alert('已經(jīng)是最后一張圖片啦!');
}
changePic();
}
}
// 切換順序
function changeOrder () {
// 情況按鈕的高亮
for ( var i = 0, len = btns.length; i < len;i++) {
btns[i].className = '';
}
// 循環(huán)切換 1，循環(huán)；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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內容。
