Js實現圖片點擊切換與輪播
圖片點擊切換
<!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+"張 圖片 ，當前 第"+(index+1)+"張"; btn1.onclick=function(){ index--; if(index<0){ index=imgarr.length-1; } img.src=imgarr[index]; info.innerHTML="一共"+imgarr.length+"張 圖片 ，當前 第"+(index+1)+"張"; }; btn2.onclick=function(){ index++; if(index>imgarr.length-1){ index=0; } img.src=imgarr[in000dex]; info.innerHTML="一共"+imgarr.length+"張 圖片 ，當前 第"+(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>
<div class="outer">
<p id="pd"></p>
<img src="images/1.jpg" id="img1" />
<button id="pre">上一張</button>
<button id="next">下一張</button>
</div>
</body>
</html>
實現效果：javascript
輪播
<!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; /* * 設置偏移量 * * */ left:0px; } #imglist li{ margin: 0 10px; float:left; } #navDiv{ position: absolute; bottom: 15px; /* * 設置left值 * outer寬度 640 * navDiv寬度 30*5=125 * 640-125=515 * 515/2=257.5 * left:257.5px; */ left:0; } #navDiv a{ float:left; width:20px; height:20px; background:#ff1; opacity: 0.5; /*兼容IE8的透明*/ filter:alpha(opacity=50); margin: 0 5px; } #navDiv 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 navDiv=document.getElementById("navDiv"); var outer=document.getElementById("outer"); //獲取頁面全部的img標籤
var imgarr=document.getElementsByTagName("img"); //獲取頁面全部的A標籤
var allA=document.getElementsByTagName("a"); //默認顯示圖片的索引
var index=0; //設置
allA[index].style.background="black"; //設置ul的長度
imglist.style.width=660*imgarr.length+"px"; //設置navDiv的left值
navDiv.style.left=(outer.offsetWidth-navDiv.offsetWidth)/2+"px";
//定義一個定時器標識
var timer; //點擊超連接切換到指定的圖片
//爲全部的超連接綁定單擊響應函數
for(var i=0;i<allA.length;i++){ //爲每個超連接都添加一個NUM屬性
allA[i].num=i; //爲超連接綁定單擊響應函數
allA[i].onclick=function(){ //關閉自動切換
clearInterval(timer); //獲取點擊超連接的索引，並將其設置爲index
index=this.num; //切換圖片
//imglist.style.left=index*-660+"px";
setA(); move(imglist,20,-660*index,"left",function(){ //動畫執行完後，再執行自動切換
autoChange(); }); }; } //自動切換圖片
autoChange(); //建立一個方法來設置選中的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++){ //去掉內聯樣式，只剩下樣式表的樣式
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>
<!--建立一個外部的div，來做爲大的容器-->
<div id="outer">
<!--建立一個ul，用來放置圖片-->
<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>
<div id="navDiv">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
</body>
</html>
tools.js
//動畫函數 /*參數 * -1.obj 對象 * -2.speed 速度 * -3.target 執行動畫的目標 * -4.arrt 要變化的樣式 * -5.callback:回調函數 將會在動畫執行完後執行 */ function move(obj,speed,target,arrt,callback){ //關閉上一次定時器 clearTimeout(obj.timer); //判斷速度的正負值 //若是從0向800移動則爲正 //若是從800向0移動則爲負 var current=parseInt(getStyle(obj,arrt)); if(current>target){ speed=-speed; } //開啓一個定時器 //爲obj添加一個timer屬性，用來保存它1本身的定時器的標識 obj.timer=setInterval(function(){ //獲取原來的left值 var oldvalue=parseInt(getStyle(obj,arrt)); //在舊值的基礎上增長 var newvalue=oldvalue+speed; if(speed<0&&newvalue<target||speed>0&&newvalue>target) { newvalue=target; } obj.style[arrt]=newvalue+"px"; //當元素到達target關閉定時器 if(newvalue===target||newvalue===target){ clearTimeout(obj.timer); //動畫執行完 執行函數 callback&&callback(); } },30); };
實現效果：css