使用 jQuery 实现轮播效果并不难，这里分享一种做异形轮播效果的思路和做法。所谓的异形就是在图片进出的时候显示出不同的大小，达到一种突出当前的图片的效果。
页面显示出3张图，中间为当前主要图片；
左右两边的缩小一点副图，点击副图切换上一张下一张；
下方有分页指示的小圆点，表示当前的图片是第几张，也可点击相应的小圆点跳到相应的图片；
效果图如下：
loop.gif
思路：
多张图片轮播实现的思路就是把多张图片按左右顺序拼接在一起顺序显示；而异形则多了一步设置图片的大小和位置，通过设置 opacity 来调整透明度，设置图片的 z-index 值，突出立体的感觉；jQuery 动态部分就是下一张直接顺序替换，到最后一张时替换到第一张，动态调整的是什么？是样式，当点击下一张的时候，直接通过 js 赋予页面标签不同的样式。
代码很容易看懂，就不一行一行解释了。
代码：
<!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>
网友评论