使用 jQuery 實(shí)現(xiàn)輪播效果并不難，這里分享一種做異形輪播效果的思路和做法。所謂的異形就是在圖片進(jìn)出的時候顯示出不同的大小，達(dá)到一種突出當(dāng)前的圖片的效果。
頁面顯示出3張圖，中間為當(dāng)前主要圖片；
左右兩邊的縮小一點(diǎn)副圖，點(diǎn)擊副圖切換上一張下一張；
下方有分頁指示的小圓點(diǎn)，表示當(dāng)前的圖片是第幾張，也可點(diǎn)擊相應(yīng)的小圓點(diǎn)跳到相應(yīng)的圖片；
效果圖如下：
loop.gif
思路：
多張圖片輪播實(shí)現(xiàn)的思路就是把多張圖片按左右順序拼接在一起順序顯示；而異形則多了一步設(shè)置圖片的大小和位置，通過設(shè)置 opacity 來調(diào)整透明度，設(shè)置圖片的 z-index 值，突出立體的感覺；jQuery 動態(tài)部分就是下一張直接順序替換，到最后一張時替換到第一張，動態(tài)調(diào)整的是什么？是樣式，當(dāng)點(diǎn)擊下一張的時候，直接通過 js 賦予頁面標(biāo)簽不同的樣式。
代碼很容易看懂，就不一行一行解釋了。
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index2</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#loopBtn{
width: 989px;
height: 360px;
margin: 100px auto;
position: relative;
overflow: hidden;
}
#loopBtn ul{
list-style: none;
}
#loopBtn .imgUl li{
position: absolute;
background-color: black;
}
#loopBtn li img{
width: 100%;
height: 100%;
}
#loopBtn .myBtn .left{
position: absolute;
width: 270px;
height: 223px;
top:26px;
left:1px;
z-index: 1000;
cursor: pointer;
}
#loopBtn .myBtn .right{
position: absolute;
width: 260px;
height: 223px;
top:26px;
right:1px;
z-index: 1000;
cursor: pointer;
}
#loopBtn li.no0{width: 174px;height:122px;left:-116px;top:100px;z-index: 777;}
#loopBtn li.no1{width: 356px;height:223px;left:0px;top:26px;z-index: 888;}
#loopBtn li.no2{width: 442px;height:273px;left:274px;top:0px;z-index: 999;}
#loopBtn li.no3{width: 356px;height:223px;left:634px;top:26px;z-index: 888;}
#loopBtn li.no4{width: 174px;height:122px;left:897px;top:100px;z-index: 777;}
#loopBtn li.no1 img , #loopBtn li.no3 img{
opacity: 0.3;
}
#loopBtn .tipDot{
width: 600px;
height: 20px;
position: absolute;
top: 312px;
left: 454px;
}
#loopBtn .tipDot ul li{
float: left;
width: 16px;
height: 16px;
background-color: lightgray;
margin-right: 10px;
border-radius: 100px;
cursor: pointer;
}
#loopBtn .tipDot ul li.cur{
background-color:dodgerblue;
}
</style>
</head>
<body>
<div id="loopBtn">
<div class="myBtn">
<span class="left" id="leftBtn"></span>
<span class="right" id="rightBtn"></span>
</div>
<ul class="imgUl">
<li class="no0"><a href="#"><img src="1.png" /></a></li>
<li class="no1"><a href="#"><img src="2.png" /></a></li>
<li class="no2"><a href="#"><img src="3.png" /></a></li>
<li class="no3"><a href="#"><img src="4.png" /></a></li>
<li class="no4"><a href="#"><img src="5.png" /></a></li>
</ul>
<div class="tipDot" id="tipDot">
<ul>
<li></li>
<li></li>
<li class="cur"></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
var exchangeSpeed = 600;
var myGod = false;
var json0 = {"width":"174px","height":"122px","left":"-116px", "top":"100px"};
var json1 = {"width":"356px","height":"223px","left":"0px", "top":"26px"};
var json2 = {"width":"442px","height":"273px","left":"274px", "top":"0"};
var json3 = {"width":"356px","height":"223px","left":"634px", "top":"26px"};
var json4 = {"width":"174px","height":"122px","left":"897px", "top":"100px"};
var currentIndex = 2;
var timer = setInterval(rightBtnEvent,2000);
$("#loopBtn").mouseenter(
function() {
clearInterval(timer);
}
);
$("#loopBtn").mouseleave(
function() {
clearInterval(timer);
timer = setInterval(rightBtnEvent,2000);
}
);
$("#rightBtn").click(rightBtnEvent);
function rightBtnEvent(){
if(!$(".imgUl li").is(":animated") || myGod === true){
if(currentIndex < 4){
currentIndex ++;
}else{
currentIndex = 0;
}
$("#tipDot li").eq(currentIndex).addClass("cur").siblings().removeClass("cur");
$(".no1").animate(json0,exchangeSpeed);
$(".no2").animate(json1,exchangeSpeed);
$(".no3").animate(json2,exchangeSpeed);
$(".no4").animate(json3,exchangeSpeed);
$(".no0").css(json4);
$(".no1").attr("class","no0");
$(".no2").attr("class","no1");
$(".no3").attr("class","no2");
$(".no4").attr("class","no3");
if($(".no3").next().length !== 0){
$(".no3").next().attr("class","no4");
}else{
$(".imgUl li:first").attr("class","no4");
}
$(".no4").css(json4);
}
}
$("#leftBtn").click(
function(){
if(!$(".imgUl li").is(":animated") || myGod === true){
if(currentIndex > 0){
currentIndex --;
}else{
currentIndex = 4;
}
$(".tipDot li").eq(currentIndex).addClass("cur").siblings().removeClass("cur");
$(".no0").animate(json1,exchangeSpeed);
$(".no1").animate(json2,exchangeSpeed);
$(".no2").animate(json3,exchangeSpeed);
$(".no3").animate(json4,exchangeSpeed);
$(".no4").css(json0);
$(".no3").attr("class","no4");
$(".no2").attr("class","no3");
$(".no1").attr("class","no2");
$(".no0").attr("class","no1");
if($(".no1").prev().length != 0){
$(".no1").prev().attr("class","no0");
}else{
$(".imgUl li:last").attr("class","no0");
}
$(".no0").css(json0);
}
}
);
$("#loopBtn .tipDot li").click(
function(){
exchangeSpeed = 100;
myGod = true;
var exchangeIndex = $(this).index();
if(exchangeIndex > currentIndex ){
var exchangeCount = exchangeIndex - currentIndex;
for(var i = 1 ; i<= exchangeCount ; i++){
$(".right").trigger("click");
}
}else{
var exchangeCount2 = currentIndex - exchangeIndex;
for(var i = 1 ; i<= exchangeCount2 ; i++){
$(".left").trigger("click");
}
}
currentIndex = exchangeIndex;
exchangeSpeed = 600;
myGod = false;
}
);
}
);
</script>
</body>
</html>
