我是一個應屆生，來公司不久，根據需求，網站需要一個專題圖片輪播的頁面。網上確實有很多現成的插件，但是，作為一個JS還不是很牛的應屆生，我決定自己寫一個！
話說忽然想到做個這個還真不容易，一時思緒理不清楚。實際我相信一步一步來做 一定做得好！
我做這個例子的思路是這樣的：
先把需要的html和css代碼寫好，分四個大div：第一個放題目和顯示當前第幾個圖片 第二個要顯示的大圖和圖片切換按鈕，第三個 顯示圖片配的文字內容，第四個存 縮略圖和縮略圖翻頁按鈕。
隱藏選中時才顯示的內容，調制好css樣式之后，進行初始化：計算一共多少個圖片，並把數字存入顯示標簽中；並給每一個<li>內的<span>存入它的下標數字。
然后，實現圖片和文字切換功能，有兩種方式觸發：點擊大圖和點擊縮略圖。
當事件被觸發，獲取當前圖片信息，並修改顯示容器的內容：修改大圖地址，修改顯示當前下標 → （2/13），修改顯示文字。
最后添加滾動事件和透明效果。
滾動效果有兩種觸發方式：點擊縮略圖滾動按鈕 和 點擊大圖左右的圖片切換按鈕，前者一次移動最多3個縮略圖，后者一次移動1個縮略圖。
最終效果：
以下是代碼，多多指教：
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body{font-family:microsoft yahei;font-size:14px;color:#333333;} body,ul,ol,li,div,p,span,em,i,b,input,a,h1,h2,h3,h4,h5{margin:0;padding:0;} img{border:0;} a{text-decoration:none;color:#333333;} a:hover{text-decoration:none;} .f1{color:#818181;} .con{width:1000px;margin:0 auto;background:#eee;} /*背景*/ .piccon-bg{width:100%;margin-top:20px;} .pic-tit{width:1000px;float:left;margin-bottom:20px;} /*標題*/ .piccon-tit{margin-left:20px;float:left;height:30px;font-size:20px;margin-top:20px;} /*大圖*/ .big-pic{width:1000px;position:relative;text-align:center;} .big-pic img{width:expression(this.width > 950 ? 950 : true); max-width: 950px; }/*不能大於950*/ .pic-left{width:50%;height:100%;position:absolute;left:0;top:0;z-index:100;cursor:pointer;font-size:24px;font-weight:bold;text-align:left;overflow:hidden;background:#fff;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=1);opacity:0.01;}/*顯示的圖片區域的左部分，浮在圖片上層用於點擊,為兼容IE，設置了背景色，透明0.01，要不鼠標指向圖片區域會被忽略*/ .pic-right{width:50%;height:100%;position:absolute;right:0;top:0;z-index:100;cursor:pointer;font-size:24px;font-weight:bold;text-align:right;overflow:hidden;background:#fff;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=1);opacity:0.01;} #left-btn{width:80px;height:80px;background:#ccc;position:absolute;top:50%;left:10px;display:none;line-height:80px;font-size:40px;text-align:left;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);opacity:0.6;} #right-btn{width:80px;height:80px;background:#ccc;position:absolute;top:50%;right:10px;display:none;line-height:80px;font-size:40px;text-align:right;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);opacity:0.6;} /*新聞信息內容 和 當前選中圖片/一共多少圖片*/ .picnew-con{margin-top:20px;width:1000px;} .picnew-con p{padding-left:50px;line-height:25px;width:900px;display:block;margin-bottom: 30px; padding-bottom: 20px;text-align:left;} #num_now{font-size:20px;color:#333333;float:left;margin-top:20px;} #num_sum{color:#09F;font-size:20px;float:left;margin-top:20px;} .kuohao{color:#333;font-size:20px;float:left;margin-top:20px;margin-left:20px;margin-right:2px;} .kuohao2{color:#333;font-size:20px;float:left;margin-top:20px;margin-left:2px;} /*縮略圖*/ .small-pic{margin-top:10px;width:1000px;} .small-box{width:940px;overflow:hidden;height:100px;float:left;} .small-con{width:1000000px;height:100px;float:left} .small-box ul{margin:0;padding:0;height:100px;float:left} .small-box ul li{width:134px;height:100px;float:left;list-style-type:none;} .small-box ul li span{display:none;} .small-box ul li p{display:none;} .small-box ul img{margin-left:4px;margin-top:10px;width:120px;height:80px;border:3px solid #ccc; -moz-border-radius: 3px; /* Gecko browsers */ -webkit-border-radius: 3px; /* Webkit browsers */ border-radius:3px; /* W3C syntax */ } .left-btn{width:28px;height:100px;float:left;font-size:24px;line-height:100px;border:1px solid #ccc;text-decoration:none;text-align: left; text-indent:-5px;} .left-btn:hover{background:#09F;color:#fff;} .right-btn{width:28px;height:100px;float:left;font-size:24px;line-height:100px;border:1px solid #ccc;text-decoration:none;text-indent: 10px;} .right-btn:hover{background:#09F;color:#fff;} </style> </head> <body> <div class="piccon-bg"> <div class="con" > <div class="pic-tit"> <div class="piccon-tit">這里是題目</div> <span class="kuohao">(</span> <span id="num_now"></span><!--當前圖片--> <span id="num_sum"></span> <!--總共圖片--> <span class="kuohao2">)</span> </div> <div class="big-pic" id="big-pic"> <div id="left-btn">〈</div><!--正在顯示的圖片區域按鈕--> <a class="pic-left" onClick="previous()" onMouseOver="leftbtn();" onMouseOut="noleftbtn();"></a> <!--顯示的圖片區域的左部分，浮在圖片上層用於點擊--> <img src=""/> <a class="pic-right" onClick="next()" onMouseOver="rightbtn();" onMouseOut="norightbtn();"></a> <!--顯示的圖片區域的右部分，浮在圖片上層用於點擊--> <div id="right-btn">〉</div><!--正在顯示的圖片區域按鈕-->> </div> <div class="picnew-con" id="picnew-con"> <p></p> </div> </div> </div> <div class="con" > <span style="float:left;font-weight:bold;margin:10px 10px; "> <a href="#"> << 上一圖集</a> </span> <span style="float:right;font-weight:bold;margin:10px 10px;"> <a href="#"> 下一圖集>></a> </span> </div> <div class="con"> <div class="small-pic"> <!--縮略圖--> <div style="clear:both"></div> <a href="javascript:void(0);" class="left-btn" onClick="goleft(0)">〈</a> <div class="small-box" id="small-box"> <div class="small-con"> <ul id="ul"> <li> <a href="#"><img src="http://a.hiphotos.baidu.com/image/pic/item/e61190ef76c6a7ef6ece77d0fffaaf51f2de6658.jpg" alt="http://a.hiphotos.baidu.com/image/pic/item/e61190ef76c6a7ef6ece77d0fffaaf51f2de6658.jpg" /></a><!--alt是放縮略圖的，這里就直接給的原圖--> <span></span> <p>圖片新聞2的文字內容</p> </li> <li> <a href="#"><img src="http://img0.bdstatic.com/img/image/shouye/dmgongqijun.jpg" alt="http://img0.bdstatic.com/img/image/shouye/dmgongqijun.jpg" /></a> <span></span> <p>圖片新聞3的文字內容</p> </li> <li> <a href="#"><img src="http://img0.bdstatic.com/img/image/shouye/sylomo-9367181004.jpg" alt="http://img0.bdstatic.com/img/image/shouye/sylomo-9367181004.jpg" /></a> <span></span> <p>圖片新聞1的文字內容</p> </li> <li> <a href="#"><img src="http://img0.bdstatic.com/img/image/shouye/sywm-9912328258.jpg" alt="http://img0.bdstatic.com/img/image/shouye/sywm-9912328258.jpg" /></a> <span></span> <p>圖片新聞2的文字內容</p> </li> <li> <a href="#"><img src="http://img0.bdstatic.com/img/image/shouye/dmgongqijun.jpg" alt="http://img0.bdstatic.com/img/image/shouye/dmgongqijun.jpg" /></a> <span></span> <p>圖片新聞3的文字內容</p> </li> <li> <a href="#"><img src="http://img0.bdstatic.com/img/image/shouye/sylomo-9367181004.jpg" alt="http://img0.bdstatic.com/img/image/shouye/sylomo-9367181004.jpg" /></a> <span></span> <p>圖片新聞1的文字內容</p> </li> <li> <a href="#"><img src="http://img0.bdstatic.com/img/image/shouye/sywm-9912328258.jpg" alt="http://img0.bdstatic.com/img/image/shouye/sywm-9912328258.jpg" /></a> <span></span> <p>圖片新聞2的文字內容</p> </li> <li> <a href="#"><img src="http://img0.bdstatic.com/img/image/shouye/dmgongqijun.jpg" alt="http://img0.bdstatic.com/img/image/shouye/dmgongqijun.jpg" /></a> <span></span> <p>圖片新聞3的文字內容</p> </li> <li> <a href="#"><img src="http://img0.bdstatic.com/img/image/shouye/sylomo-9367181004.jpg" alt="http://img0.bdstatic.com/img/image/shouye/sylomo-9367181004.jpg" /></a> <span></span> <p>圖片新聞1的文字內容</p> </li> <li> <a href="#"><img src="http://img0.bdstatic.com/img/image/shouye/sywm-9912328258.jpg" alt="http://img0.bdstatic.com/img/image/shouye/sywm-9912328258.jpg" /></a> <span></span> <p>圖片新聞2的文字內容</p> </li> <li> <a href="#"><img src="http://img0.bdstatic.com/img/image/shouye/dmgongqijun.jpg" alt="http://img0.bdstatic.com/img/image/shouye/dmgongqijun.jpg" /></a> <span></span> <p>圖片新聞3的文字內容</p> </li> </ul> </div> </div> <a href="javascript:void(0);" class="right-btn" onClick="goright(0)">〉</a> <div style="clear:both;height:2px;"></div> </div> </div> <script language="javascript" type="text/javascript"> var speed = 1;//速度(毫秒) var space = 2;//每次移動px var ulWidth = 940;//縮略圖顯示區域的大小 var gosum = 0;//計數移動了多少px var ali = 134;//一個縮略圖li的標簽大小 var litimes = 3;//一次按鈕移動3個li var opac = 0;//透明 var mark = 0;//指向被選中的縮略圖,默認第一張 var lastpic;//最后一張圖 var source = "small-box";//縮略圖盒子ID var source2 = "picnew-con";// 文字內容和下標 var source3 ="big-pic";//大圖容器ID var source4 = "num_sum";//總共圖片 var source5 = "num_now";//第幾張 function getTag(tag,obj){if(obj==null){return document.getElementsByTagName(tag)}else{return obj.getElementsByTagName(tag)}} function getid(id){return document.getElementById(id)}; //初始化 var id = getid(source); var id2 = getid(source2); var id3 = getid(source3); var id4 = getid(source4); var id5 = getid(source5); var li = getTag("li",id); var ul=getid("ul"); //一共圖片數量，賦值后，就不用改了 id4.innerHTML = "/" + li.length; lastpic = li.length-1;//最后一張圖的下標 //給每個li標簽下的span賦值，css給這些span設置隱藏，選中時調用，賦值顯示當前選中第幾幅圖 for(var i=0;i<li.length;i++){ getTag("span",li[i])[0].innerHTML = i+1; //點擊縮略圖 li[i].onclick=function(){ getTag("img",li[mark])[0].style.border="3px solid #ccc";//取消選中背景 mark = parseInt(getTag("span",this)[0].innerHTML)-1; tochange(mark); }; } //下標默認選中為第一張圖，並為選中圖設置選中背景 tochange(mark); //選中后修改 function tochange(i){ slowout(); id5.innerHTML =getTag("span",li[i])[0].innerHTML;//賦值顯示選中的圖片編號 id2.children[0].innerHTML =getTag("p",li[i])[0].innerHTML;//賦值顯示圖片的文字 getTag("img",li[mark])[0].style.border="3px solid #409FC0";//為選中圖設置選中背景 id3.children[2].src = getTag("img",li[i])[0].alt;//賦值顯示大圖 slowin(); } function next(){//下一個 if(mark==lastpic) return; getTag("img",li[mark])[0].style.border="3px solid #ccc";//取消選中背景 mark++; tochange(mark); goright(1); } function previous(){//上一個 if(mark==0) return; getTag("img",li[mark])[0].style.border="3px solid #ccc";//取消選中背景 mark--; tochange(mark); goleft(1); } function goleft(k){//上翻 K為0移動litimes限制的條數；k為1移動一條 if(id.scrollLeft<=0||(gosum>=ali*litimes&&k==0)||(gosum>=ali&&k==1)){gosum=0;return;} id.scrollLeft-=space; gosum+=space; setTimeout('goleft('+k+')',speed) } function goright(k){//下翻 K為0移動litimes限制的條數；k為1移動一條 if(id.scrollLeft>=ul.scrollWidth-ulWidth||(gosum>=ali*litimes&&k==0)||(gosum>=ali&&k==1)){gosum=0;return;} id.scrollLeft+=space; gosum+=space; setTimeout('goright('+k+')',speed); } function slowout(){ opac=0; id3.style.filter="alpha(opacity="+opac+")";//alert(opac); } function slowin(){ if(opac==100){return;}; opac+=10; if(document.all){ id3.style.filter="alpha(opacity="+opac+")"; } else {id3.style.opacity=(opac/100);} setTimeout('slowin()',30); } function leftbtn(){ document.getElementById("left-btn").style.display = "block"; } function noleftbtn(){ document.getElementById("left-btn").style.display = "none"; } function rightbtn(){ document.getElementById("right-btn").style.display = "block"; } function norightbtn(){ document.getElementById("right-btn").style.display = "none"; } </script> </body> </html>