| <!----大家好，我是小张，本次将为大家讲解一下轮播图在jquery中的实现，希望对大家有所帮助。 |
| 轮播图在网站中很常用，京东，淘宝，········等等各大网站都会用到轮播图的相关知识，而本次博客将为大家介绍使用jquery编写动态轮播图的例子。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin:0;padding:0;}
#box{
width:760px;
height:300px;
margin: 30px auto;
border: 1px solid #ccc;
position:relative;
}
.imglist{
width: 760px;
height:300px;
list-style: none;
}
.imglist li{
width: 100%;
height:100%;
position:relative;
overflow: hidden;
display:none;
}
.imglist li img{
position:absolute;
}
.imglist li .txt{
left:-760px;
}
.imglist li .con{
left:-25px;
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: -54px 0;
}
</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 >
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>
![用jQuery实现一个简易的聊天框[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)