JQuery实现图片的动态切换
萧凡
好久没写博客了，一直搞web前端。在搞项目的时候使用了大量的JQuery。现在购物网站，使用JQuery来显示图片的轮换很常见。这个经常用来推销广告。
这个实现很简单。主要是把css调好，用JQuery中animate来是实现自定义动画就可以了。以下代码仅供参考。
注意：需要下载JQuery.js导入到项目中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*,body{
margin: 0px;
padding: 0px;
}
img{
width:200px;
height:200px;
}
ul{
position: relative;
width:600%;
height: 200px;
}
ul li{
float:left;
list-style-type: none;
}
#imge_container{
overflow: hidden;
width: 200px;
height: 200px;
border: 1px solid black;
border-radius: 5px;
}
#number{
position: absolute;
width: 200px;
top: 170px;
cursor: pointer;
}
#numble_list{
position: relative;
display: inline-block;
width: auto;
height: 20px;
}
.count{
border: 1px solid black;
margin-right: 5px;
width: 20px;
height: 20px;
text-align: center;
border-radius: 10px;
}
.count:hover{
background-color: #3399CC;
}
</style>
<script type="text/javascript" src="JQuery/jquery-1.8.0.js" ></script>
<script>
Move={
index:1,
width:200,
movePic:function(){
var that=this;
function move(){
var obj=$(".pic").eq(that.index);
var current_left=that.index*that.width;
var total=$(".pic").children().length;
$("#img_list").animate({
"left":-current_left+"px"
});
that.index++;
if(that.index>=total) that.index=0;
}
setInterval(move,5000);
},
changeTo:function(x){
x-=1;
var current_left=x*this.width;
$("#img_list").animate({
"left":-current_left+"px"
},"easing-in");
this.index=x;
}
};
function changeTo(index){
if(Move){
Move.changeTo(index);
}
}
$(document).ready(function(){
var total=$(".pic").children().length;
var left=200-26*total;
$("#numble_list").css("left",left+"px");
for(var i=1;i<=total;i++){
$("#numble_list").append("<li><div class='count' οnclick='changeTo(this.innerHTML)'>"+i+"</div></li>");
}
Move.movePic();
$("#imge_container").hover(function(){
$("#number").css("display","block");
},function(){
$("#number").css("display","none");
});
});
</script>
</head>
<body>
<div id="imge_container">
<ul id="img_list">
<li class="pic"><img src="087.png"></li>
<li class="pic"><img src="background-image.jpg"></li>
<li class="pic"><img src="html5/Koala.jpg"></li>
<li class="pic"><img src="html5/loginPic.jpg"></li>
<li class="pic"><img src="背景.jpg"></li>
</ul>
<div id="number" style="display: none;">
<ul id="numble_list"></ul>
</div>
</div>
</body>
</html>
类似资料：