站長(zhǎng)資訊網(wǎng)
圖片點(diǎn)擊切換
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload=function(){ var btn1=document.getElementById("pre"); var btn2=document.getElementById("next"); var img=document.getElementById("img1"); var imgarr=["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg","images/6.jpg"]; var index=0; var info=document.getElementById("pd"); info.innerHTML="一共"+imgarr.length+"張 圖片 ，當(dāng)前 第"+(index+1)+"張"; btn1.onclick=function(){ index--; if(index<0){ index=imgarr.length-1; } img.src=imgarr[index]; info.innerHTML="一共"+imgarr.length+"張 圖片 ，當(dāng)前 第"+(index+1)+"張"; }; btn2.onclick=function(){ index++; if(index>imgarr.length-1){ index=0; } img.src=imgarr[in000dex]; info.innerHTML="一共"+imgarr.length+"張 圖片 ，當(dāng)前 第"+(index+1)+"張"; }; }; </script> <style type="text/css"> *{ padding: 0; margin:0; } .outer{ width:640px; height:453px; margin:100px auto; text-align: center; } </style> </head> <body> <p class="outer"> <p id="pd"></p> <img src="images/1.jpg" id="img1" /> <button id="pre">上一張</button> <button id="next">下一張</button> </p> </body> </html>
實(shí)現(xiàn)效果
輪播
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding:0px; margin: 0px; } #outer{ position: relative; width:660px; height:425px; margin:50px auto ; background:yellow; padding:10px 0; overflow: hidden; } #imglist{ position: absolute; list-style: none; /* * 設(shè)置偏移量 * * */ left:0px; } #imglist li{ margin: 0 10px; float:left; } #navp{ position: absolute; bottom: 15px; /* * 設(shè)置left值 * outer寬度 640 * navp寬度 30*5=125 * 640-125=515 * 515/2=257.5 * left:257.5px; */ left:0; } #navp a{ float:left; width:20px; height:20px; background:#ff1; opacity: 0.5; /*兼容IE8的透明*/ filter:alpha(opacity=50); margin: 0 5px; } #navp a:hover{ background:red; } </style> <script type="text/javascript" src="tools.js"></script> <script type="text/javascript"> window.onload=function(){ var imglist=document.getElementById("imglist"); var navp=document.getElementById("navp"); var outer=document.getElementById("outer"); //獲取頁(yè)面所有的img標(biāo)簽 var imgarr=document.getElementsByTagName("img"); //獲取頁(yè)面所有的A標(biāo)簽 var allA=document.getElementsByTagName("a"); //默認(rèn)顯示圖片的索引 var index=0; //設(shè)置 allA[index].style.background="black"; //設(shè)置ul的長(zhǎng)度 imglist.style.width=660*imgarr.length+"px"; //設(shè)置navp的left值 navp.style.left=(outer.offsetWidth-navp.offsetWidth)/2+"px"; //定義一個(gè)定時(shí)器標(biāo)識(shí) var timer; //點(diǎn)擊超鏈接切換到指定的圖片 //為所有的超鏈接綁定單擊響應(yīng)函數(shù) for(var i=0;i<allA.length;i++){ //為每一個(gè)超鏈接都添加一個(gè)NUM屬性 allA[i].num=i; //為超鏈接綁定單擊響應(yīng)函數(shù) allA[i].onclick=function(){ //關(guān)閉自動(dòng)切換 clearInterval(timer); //獲取點(diǎn)擊超鏈接的索引，并將其設(shè)置為index index=this.num; //切換圖片 //imglist.style.left=index*-660+"px"; setA(); move(imglist,20,-660*index,"left",function(){ //動(dòng)畫(huà)執(zhí)行完后，再執(zhí)行自動(dòng)切換 autoChange(); }); }; } //自動(dòng)切換圖片 autoChange(); //創(chuàng)建一個(gè)方法來(lái)設(shè)置選中的A function setA(){ //判斷是不是最后一張照片 if(index>=imgarr.length-1){ index=0; //如果是最后一張，就把imglist移到0 imglist.style.left=0+"px"; } for(var j=0;j<allA.length;j++){ //去掉內(nèi)聯(lián)樣式，只剩下樣式表的樣式 allA[j].style.background=""; } allA[index].style.background="black"; }; function autoChange(){ timer=setInterval(function(){ index++; index%=imgarr.length; move(imglist,20,-660*index,"left",function(){ setA(); }); },3000); }; }; </script> </head> <body> <!--創(chuàng)建一個(gè)外部的p，來(lái)作為大的容器--> <p id="outer"> <!--創(chuàng)建一個(gè)ul，用來(lái)放置圖片--> <ul id="imglist"> <li> <img src="images/1.jpg" /> </li> <li> <img src="images/2.jpg" /> </li> <li> <img src="images/3.jpg" /> </li> <li> <img src="images/4.jpg" /> </li> <li> <img src="images/5.jpg" /> </li> <li> <img src="images/1.jpg" /> </li> </ul> <p id="navp"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> </p> </p> </body> </html>
tools.js
//動(dòng)畫(huà)函數(shù) /*參數(shù) * -1.obj 對(duì)象 * -2.speed 速度 * -3.target 執(zhí)行動(dòng)畫(huà)的目標(biāo) * -4.arrt 要變化的樣式 * -5.callback:回調(diào)函數(shù) 將會(huì)在動(dòng)畫(huà)執(zhí)行完后執(zhí)行 */ function move(obj,speed,target,arrt,callback){ //關(guān)閉上一次定時(shí)器 clearTimeout(obj.timer); //判斷速度的正負(fù)值 //如果從0向800移動(dòng)則為正 //如果從800向0移動(dòng)則為負(fù) var current=parseInt(getStyle(obj,arrt)); if(current>target){ speed=-speed; } //開(kāi)啟一個(gè)定時(shí)器 //為obj添加一個(gè)timer屬性，用來(lái)保存它1自己的定時(shí)器的標(biāo)識(shí) obj.timer=setInterval(function(){ //獲取原來(lái)的left值 var oldvalue=parseInt(getStyle(obj,arrt)); //在舊值的基礎(chǔ)上增加 var newvalue=oldvalue+speed; if(speed<0&&newvalue<target||speed>0&&newvalue>target) { newvalue=target; } obj.style[arrt]=newvalue+"px"; //當(dāng)元素到達(dá)target關(guān)閉定時(shí)器 if(newvalue===target||newvalue===target){ clearTimeout(obj.timer); //動(dòng)畫(huà)執(zhí)行完 執(zhí)行函數(shù) callback&&callback(); } },30); };
實(shí)現(xiàn)效果
推薦教程：《PHP》
