JavaScript 實現圖片輪播
今天給大家介紹下怎麼用 JS 實現圖片輪播效果。
原理描述：
使用JS實現輪播的原理是這樣的：
假設初始的情況，下圖一個網格代表一個圖，初始時，顯示1 ：
當進行一次輪播後，顯示變為下圖 顯示2：
依次類推。
程式碼實現：
1 JS 程式碼：
<script type="text/javascript">
window.onload=function(){
//獲得ul的元素
var imgList=document.getElementById("imgList");
//獲得圖片的陣列
var imgArr=document.getElementsByTagName("img");
var navId=document.getElementById("navId");
var outer=document.getElementById("outer");
imgList.style.width=520*imgArr.length+"px";
//設定navId的位置 使其居中
navId.style.left=(outer.offsetWidth-navId.offsetWidth)/2+"px";
//得到所有的a 標籤 如果有其他的A的話 這裡需要注意要使用navId子元素的a
var allA=document.getElementsByTagName("a");
var index=0;
allA[index].style.backgroundColor='black';//設定預設的a為黑色
for(var i=0;i<allA.length;i++){
allA[i].num=i;
//alert(allA[i].num);
allA[i].onclick=function(){
clearInterval(timer);
index=this.num;
/* imgList.style.left= -520*index+"px"; */
setA();
move(imgList,"left",-520*index,50,function(){
autoChange();
});
};
}
function setA(){
//alert(index);
//當indcx值比圖片的數目多的時候 就歸0
if(index>=imgArr.length-1){
index=0;
imgList.style.left=0;
}
for(var i=0;i<allA.length;i++){
//去掉未點選的顏色 仍然保留a : hover有用
allA[i].style.backgroundColor="";
}
allA[index].style.backgroundColor="black";
}
var timer;
function autoChange(){
timer=setInterval(function(){
index++;
index%=imgArr.length;
move(imgList,"left",-520*index,20,function(){
setA();
});
},2000);
}
autoChange();
//可以根據 target 引數進行判斷 向哪個方向移動
function move(obj,attr,target,speed,callback){
var current=parseInt(getStyle(obj,attr));
//alert(current);
//根據目標的位置來判定 speed的值是正是負
if(current>target){
speed=-speed;
}
//自定義物件定時器 防止物件之間的混亂操作
clearInterval(obj.timer);
//alert(oldValue);
obj.timer=setInterval(function(){
var oldValue=parseInt(getStyle(obj,attr));
var newVal=oldValue+speed;
//如果移動的越界 進行重置
if((speed<0 && newVal<=target) || (speed>0 && newVal>=target)){
newVal=target;
}
obj.style[attr]=newVal+"px";
if(newVal==target){
clearInterval(obj.timer);
callback && callback();//回掉函式 先判斷 有就執行 沒有不執行
}
},30);
}
//obj:獲取樣式元素
//name:獲取樣式名
function getStyle(obj,name){
if(window.getComputedStyle){
return getComputedStyle(obj,null)[name];
}else{
return obj.currentStyle[name];
}
}
}
</script>
2 HTML 程式碼：
<div id="outer">
<ul id="imgList">
<li><img src="img/1.jpg"></li>
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
<li><img src="img/1.jpg"></li><!-- 增加這個為了實現輪播無縫切換 -->
</ul>
<div id="navId">
<a href="javascript:0"></a>
<a href="javascript:0"></a>
<a href="javascript:0"></a>
</div>
</div>
3 CSS程式碼：
<style type="text/css">
*{
margin:0px;
padding:0px;
}
#outer{
width:520px;
height:500px;
margin:50px auto;
background-color:greenyellow;
padding:10px 0;
/* 開啟相對定位*/
position:relative;
overflow:hidden;/* 將超出的部分隱藏 */
/* border:3px solid greenyellow */
}
#imgList{
/*去除li的點*/
list-style:none;
/*開啟絕對定位 */
position:absolute;
/*設定ul的寬度*/
/* width:1560px; */
}
#imgList li{
/*為圖片設定浮動*/
float:left;
margin:0 10px;/*設定左右外邊距*/
}
#navId{
/* 開啟絕對定位 */
position:absolute;
/*設定位置*/
bottom:15px;
/*設定該塊的左偏移量，使其可以居中
由於outer 寬 520 每個連結寬15+2*5=25 目前共三張圖，則共寬75*/
/* left:212px; */
}
#navId a{
width:15px;
height:15px;
float:left;/* 設定超連結浮動 */
margin:0 5px;
background-color:red;
opacity:0.5;
/*相容 IE8 設定透明度*/
filter:alpha(opacity=50);
}
/*設定滑鼠移入效果*/
#navId a:hover{
background-color:black;
}
</style>
4 實現效果：
