這周用jquery來實現網頁上常見的圖片輪播效果，下邊是效果圖：
當我們用鼠標點擊上圖中的向左以及向右按鈕時候，圖片會發生相應的切換效果，代碼如下：
index.html源代碼：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>圖片輪播</title>
<link href='./index.css' type='text/css' rel='stylesheet'/>
<script type="text/javascript" src="jquery-2.1.1.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div id="pox">
<img id='pre' src='./imgs/pre1.png'/>
<div id='box'>
<ul id='ul1_1'>
<li><a href=''><img src='./imgs/1.png'></a></li>
<li><a href=''><img src='./imgs/2.png'></a></li>
<li><a href=''><img src='./imgs/3.png'></a></li>
<li><a href=''><img src='./imgs/4.png'></a></li>
<li><a href=''><img src='./imgs/5.png'></a></li>
<li><a href=''><img src='./imgs/6.png'></a></li>
<li><a href=''><img src='./imgs/7.png'></a></li>
<li><a href=''><img src='./imgs/8.png'></a></li>
<li><a href=''><img src='./imgs/9.png'></a></li>
<li><a href=''><img src='./imgs/10.png'></a></li>
</ul>
</div>
<img id='next' src='./imgs/next1.png'/>
</div>
</body>
</html>
inindex.css源代碼
*{
margin:0px;
padding:0px;
}
li{
list-style:none;
}
#pox{
width:1000px;
height:130px;
border-top:2px solid blue;
border-bottom:1px solid blue;
border-left:1px solid blue;
border-right:1px solid blue;
margin:0px auto;
}
#ul1_1{
width:1850px;
height:110px;
margin-left:0px;
}
#ul1_1 li{
float:left;
padding-left:12px;
padding-right:12px;
margin-top:5px;
}
#pre{
float:left;
margin-left:10px;
margin-top:60px;
}
#next{
float:right;
margin-right:10px;
margin-top:-115px;
}
#box{
width:920px;
height:160px;
margin-left:40px;
margin-top:15px;
overflow: hidden;
}
#box #ul1_2{
width:1850px;
height:20px;
float:left;
margin-top:10px;
}
#box #ul1_2 li{
float:left;
padding-left:15px;
line-height:20px;
}
#box #ul1_2 li a{
color:black;
}
#box #ul1_2 li a:hover{
text-decoration:underline;
}
index.js源代碼
$(function(){
$('#next').on('click',function(){
var res=$('#ul1_1').css('margin-left');
var leftNum=parseInt(res.substr(0,res.length-2));
if(leftNum<=0&&leftNum>=-860)
$('#ul1_1').css('margin-left',((leftNum-183)+'px'));
});
$('#pre').on('click',function(){
var res=$('#ul1_1').css('margin-left');
var leftNum=parseInt(res.substr(0,res.length-2));
if(leftNum<0){
$('#ul1_1').css('margin-left',((leftNum+183)+'px'));
}
});
});
特別說明：本實例采用jquery2.0以后的版本，如果是之前版本，可能部分函數無法使用，請自行改成之前對應函數。
圖片輪播原理：首先設置一個大的div盒子，用來包括圖片（只需要包括呈現出來的圖片就好），就如之上圖片上顯示出圖片的那部分（還用邊框包括起來了），對應index.html代碼 里面id為pox的那個div。 之后呢，創建兩個<img>標簽來顯示那兩個向前向后的圖片（不然沒法點擊怎么切換啊？），將對應位置設置好就可以。再然后就創建一個ul列表來存放需要展示的十張圖片（吐槽：上邊怎么只顯示五張？？ me：拜托，只有五張圖片你切換你大頭貼啊？？），然后設置之前那個id為pox的div的一個屬相為溢出隱藏，也就是：overflow：hidden。這個屬性的意思就是當ul的圖片超出之前div時候就隱藏了，也就是說，其實十張圖片都是存在的，只是超出div盒子的部分被我們隱藏了。當我們點擊那兩個按鈕時候，只需要改變ul中呈現在盒子里面的內容就可以了，簡單來說，讓ul的margin-left對應增加減少就可以了。