jquery广告无缝轮播实例
本文实例为大家演示了jquery广告无缝轮播效果，供大家参考，具体内容如下
需要自行添加五张图片和引用jquery库
纵向轮播实例：
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>jquery广告无缝轮播代码演示</title>
<styletype="text/css">
li{
list-style:none;
}
.mains{
width:700px;
margin:0auto;
}
.mains.title{
font-size:25px;
padding:10px05px50px;
}
.g1{
width:380px;
height:180px;
}
</style>
<scripttype="text/javascript"src="js/jquery.min.js"></script>
</head>
<body>
<divclass="mains">
<divclass="title">jquery广告无缝轮播代码演示</div>
<divclass="g1"style="overflow:hidden;">
<ulid="ulID"style="position:relative;height:1800px;width:380px;top:0px;">
<listyle="width:380px;height:180px;float:left;">
<imgsrc="img/1.jpg"style="width:380px;height:180px;"></li>
<listyle="width:380px;height:180px;float:left;">
<imgsrc="img/2.jpg"style="width:380px;height:180px;"></li>
<listyle="width:380px;height:180px;float:left;">
<imgsrc="img/3.jpg"style="width:380px;height:180px;"></li>
<listyle="width:380px;height:180px;float:left;">
<imgsrc="img/4.jpg"style="width:380px;height:180px;"></li>
<listyle="width:380px;height:180px;float:left;">
<imgsrc="img/5.jpg"style="width:380px;height:180px;"></li>
<listyle="width:380px;height:180px;float:left;">
<imgsrc="img/1.jpg"style="width:380px;height:180px;"></li>
<listyle="width:380px;height:180px;float:left;">
<imgsrc="img/2.jpg"style="width:380px;height:180px;"></li>
<listyle="width:380px;height:180px;float:left;">
<imgsrc="img/3.jpg"style="width:380px;height:180px;"></li>
<listyle="width:380px;height:180px;float:left;">
<imgsrc="img/4.jpg"style="width:380px;height:180px;"></li>
<listyle="width:380px;height:180px;float:left;">
<imgsrc="img/5.jpg"style="width:380px;height:180px;"></li>
</ul>
</div>
</div>
<scripttype="text/javascript">
varPlaceTop=parseInt($("#ulID").css("top"));
varint;
functionmoveUL(){
varulID=$("#ulID");
PlaceTop=--PlaceTop;
if(PlaceTop==-900)
{
PlaceTop=0;
}
ulID.css("top",PlaceTop);
if(PlaceTop<-900){
alert("Eror!");
clearInterval(int);
}
}
int=setInterval("moveUL()",10);
$(".g1").hover(function(){
clearInterval(int);
},function(){
int=setInterval("moveUL()",10);
});
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。