首頁 > 開發者 > JavaScript
標籤：
最近迷上javascript，每天不寫點什麼都不舒服哈~
儘管自己能力有限，還是盡自己所能寫點東西出來。
實現效果：
效果預覽：http://codepen.io/anon/pen/BNjxXj
該外掛程式分為兩種模式：迴圈播放模式，以及，單向播放模式
1# 沒有選擇播放模式時：
2# 選擇迴圈模式的時候，當圖片播放至第一頁，或者最後一頁的時候，直接跳到最後一頁，或者第一頁繼續播放
3# 選擇單向播放模式的時候，當播放至第一頁，或者最後一頁的時候，給予提醒，圖片不能向前，或者向後繼續播放
貼代碼：
javascript部分：
var oCircle=document.getElementById(‘circle‘); var oSingle=document.getElementById(‘single‘); var oImg=document.getElementById(‘img‘); var oPrevBtn=document.getElementById(‘prevBtn‘); var oNextBtn=document.getElementById(‘nextBtn‘); var oPageCount=document.getElementById(‘pageCount‘); var oImgDes=document.getElementById(‘imgDes‘); var imgCount=[‘0.jpg‘,‘1.jpg‘,‘2.jpg‘,‘3.jpg‘]; var imgTitle=[‘1tree‘,‘2run‘,‘3hit‘,‘4sun‘]; var num=0; //提取公用執行部分 function commonFun(){ oImg.src=‘img/‘+imgCount[num]; oPageCount.innerHTML=num+1 +‘/‘+imgCount.length; oImgDes.innerHTML=imgTitle[num]; } commonFun(); //當使用者沒有選擇播放模式時候，先提醒其選擇播放模式 if (oSingle.classList.contains(‘btnSelect‘)==false && oCircle.classList.contains(‘btnSelect‘)==false ) { oNextBtn.onclick=function(){ alert("請選擇圖片播放模式"); } oPrevBtn.onclick=function(){ alert("請選擇播放模式"); } } //開啟迴圈播放模式 oCircle.onclick=function(){ //添加按鈕選中時按鈕樣式變化 if (oSingle.classList.contains(‘btnSelect‘)) { oSingle.classList.remove(‘btnSelect‘); } oCircle.classList.add(‘btnSelect‘); //迴圈播放函數主體 oNextBtn.onclick=function(){ num++; if (num>imgCount.length-1) { num=0; } commonFun(); } oPrevBtn.onclick=function(){ num--; if (num<0) { num=imgCount.length-1; } commonFun(); } } //開啟單向播放模式 oSingle.onclick=function(){ //添加按鈕選中時按鈕樣式變化 if (oCircle.classList.contains(‘btnSelect‘)) { oCircle.classList.remove(‘btnSelect‘); } oSingle.classList.add(‘btnSelect‘); oNextBtn.onclick=function(){ num++; if (num>imgCount.length-1) { alert("~wow~已是最後一張,請向前播放"); num=imgCount.length-1; } commonFun(); } //迴圈播放函數主體 oPrevBtn.onclick=function(){ num--; if (num<0) { alert("~wow~已是第一張,請向後播放"); num=0; } commonFun(); } }
CSS部分：比較簡單，圖片的自適應顯示用的flex
*{ margin: 0; padding: 0; } a{ text-decoration: none; } .container{ position: relative; margin: 0 auto; width: 400px; height: 400px; font-size: 13px; overflow: hidden; background-color: #333; display: -webkit-flex; display: flex; align-items: center; } .btnBox{ width: 400px; height: 44px; line-height: 44px; margin: 25px auto; background-color: #eee; } .btn { float: left; width: 49.9%; height: 100%; border: 0; outline: 0; background-color: #eee; border-left: 1px solid rgba(0,0,0,0.15); } .btn:first-child{ border-left: 0; } .btnSelect{ background-color: #00bb9c; color: #fff; } .singleSelect{ background-color: #00bb9c; color: #fff; } .imgStyle{ max-width: 100%; } .prev,.next{ position: absolute; top:180px; width: 40px; height: 40px; line-height: 40px; text-align: center; background-color: rgba(0,0,0,0.6); font-size: 18px; font-family: cursive; color: #fff; } .prev{ left:0; } .next{ right: 0; } .pageCount,.imgDes{ position: absolute; left:0; width: 100%; height: 36px; line-height: 36px; text-align: center; background-color: rgba(0,0,0,0.3); color: #fff; } .pageCount{ top: 0; } .imgDes{ bottom: 0; }
HTML部分：
<head> <meta charset="utf-8"><title>圖片切換</title> <style type="text/css"> </style></head><body><div class="btnBox"><button class="btn" id="circle">迴圈播放</button><button class="btn" id="single">單向播放</button> </div><div class="container"><img src="" class="imgStyle" id="img"><div class="pageCount" id="pageCount">正在載入頁數...</div><a class="prev" id="prevBtn" href="javascript:void(0)"><</a><a class="next" id="nextBtn" href="javascript:void(0)">></a><div class="imgDes" id="imgDes">正在載入圖片描述...</div></div></body>
Javascript:一款簡易的圖片切換外掛程式
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
