快捷導(dǎo)航

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

更新時(shí)間：2017年01月12日 11:52:36 作者：光明大神棍

這篇文章主要為大家詳細(xì)介紹了js圖片輪播手動(dòng)切換特效，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

代碼：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標(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>

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: