js圖片輪播手動切換特效

先瞄一眼js圖片輪播手動切換特效圖：

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

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">圖片數量加載中......</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 = ['高冷美女','終結者','性感美女','妖嬈美女'];
 // 循環(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('已經是第一張圖片啦!');
   }
   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('已經是最后一張圖片啦!');
   } 
   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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯。

新聞名稱：js圖片輪播手動切換特效
URL分享：http://jinyejixie.com/article14/pgshge.html

成都網站建設公司_創(chuàng)新互聯，為您提供App設計、網站建設、App開發(fā)、定制開發(fā)、小程序開發(fā)、云服務器

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

猜你還喜歡下面的內容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

js圖片輪播手動切換特效