js圖片輪播手動(dòng)切換特效

先瞄一眼js圖片輪播手動(dòng)切換特效圖：

公司主營(yíng)業(yè)務(wù)：網(wǎng)站建設(shè)、成都網(wǎng)站制作、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶(hù)真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶(hù)帶來(lái)驚喜。創(chuàng)新互聯(lián)推出東昌府免費(fèi)做網(wǎng)站回饋大家。

js圖片輪播手動(dòng)切換特效

代碼：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無(wú)標(biāo)題文檔</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 = ['高冷美女','終結(jié)者','性感美女','妖嬈美女'];
 // 循環(huán)方式
 var loopMethod = 1; // 1,循環(huán)切換；0，,順序切換 
 // 循環(huán)信息
 var loopInfo = ['圖片可以從最后一張轉(zhuǎn)到第一種切換','圖片只能切換到最后一張或者第一張'];
 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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

新聞名稱(chēng)：js圖片輪播手動(dòng)切換特效
URL分享：http://www.rwnh.cn/article14/pgshge.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、網(wǎng)站建設(shè)、App開(kāi)發(fā)、定制開(kāi)發(fā)、小程序開(kāi)發(fā)、云服務(wù)器

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

js圖片輪播手動(dòng)切換特效