輪播圖~動畫輪播的jquery詳細程式碼寫法
| <!----大家好，我是小張，本次將為大家講解一下輪播圖在jquery中的實現，希望對大家有所幫助。 |
| 輪播圖在網站中很常用，京東，淘寶，········等等各大網站都會用到輪播圖的相關知識，而本次部落格將為大家介紹使用jquery編寫動態輪播圖的例子。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin:0;padding:
#box{
width:760px;
height:300px;
margin: 30px auto;
border: 1px solid #ccc;
position:relative;
}
.imglist{
width: 760px;
height:300px;
list-style: none;
}
.imglist
width: 100%;
height:100%;
position:relative;
overflow: hidden;
display:none;
}
.imglist liimg{
position:absolute;
}
.imglist li.txt{
left:-760px;
}
.imglist li.con{
left
display: none;
}
.numlist{
list-style:none;
width: 180px;
height:20px;
position:absolute;
right:20px;
bottom: 20px;
}
.numlist li{
width:20px;
height:20px;
float:left;
margin-right:10px;
border:1px solid #fff;
}
.active{
background:#fff;
}
a{
width:48px;
height: 100px;
background:url("images/button.png");
position:absolute;
top:50%;
margin-top:-50px;
opacity: 0.5;
}
.aright{
right:0;
background-position:-54px0;
}
</style>
</head>
<body>
<div id="box">
<ul class="imglist">
</ul>
<ul class="numlist">
</ul>
<a href="javascript:;" class="aleft"></a>
<a href="javascript:;" class="aright"></a>
</div>
</body>
<script src="js/jquery-1.11.3.min.js"></script>
<script >
/**
* Created by xiaozhang on 16/9/14.
*/
var index=0
for(var i=0;i<5;i++){
//包含圖片的li
//var $li=$("<li style='background:url(images/bg"+(i+1)+".jpg)'></li>");
var $li=$("<li></li>");
$li.css("background","url(images/bg"+(i+1)+".jpg)");
$li.appendTo($(".imglist"));
$li.append($("<img><img>"));
$li.find("img:odd").prop("src","images/text"+(i+1)+".png").addClass("txt");
$li.find("img:even").prop("src","images/con"+(i+1)+".png").addClass("con");
var $num=$("<li></li>");
//下標li
$num.appendTo($(".numlist"));
};
var imgli=$(".imglist li");//圖片下面的li
var numli=$(".numlist li");//數字下面的li
imgli.eq(0).show();
change();
numli.click(function(){
index=numli.index(this);
change()
});
function change(){
numli.eq(index).addClass("active").siblings().removeClass("active");
imgli.eq(index).show().siblings().hide();
imgli.eq(index).find(".txt").stop().animate({left:0},700,function(){
imgli.eq(index).find(".con").show().stop().animate({left:0},700)
});
imgli.eq(index).siblings().find(".txt").css("left","-760px");
imgli.eq(index).siblings().find(".con").css({left:"-20px",display:"none"});
}
//點選右邊
$(".aright").click(function(){
step();
});
//點選左邊
$(".aleft").click(function(){
index--;
if(index<0){
index=numli.length-1;
}
change();
});
function step(){
index++;
if(index>=numli.length){
index=0
}
change();
}
//定時器
var timer=window.setInterval(step,2000);
$("#box").mouseover(function(){
window.clearInterval(timer);
}).mouseout(function(){
timer=window.setInterval(step,2000);
})
</script>
</html>