jq广告无缝轮播实例
| 代码如下 | 复制代码 |
|
<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:0 auto;
}
.mains .title{
font-size:25px;
padding:10px 0 5px 50px;
}
.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">
var PlaceTop = parseInt($("#ulID").css("top"));
var int;
function moveUL(){
var ulID = $("#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>
|
|
浙公网安备 33010602011771号