jQuery實現iframe父窗體和子窗體的相互調用
673
2024-02-28
本文實例為大家演示了jquery廣告無縫輪播效果，供大家參考，具體內容如下
需要自行添加五張圖片和引用jquery庫
縱向輪播實例：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery廣告無縫輪播代碼演示</title>
<style type="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>
<script type="text/javascript" src="http://www.gimoo.net/t/1808/js/jquery.min.js"></script>
</head>
<body>
<div class="mains">
<div class="title">jquery廣告無縫輪播代碼演示</div>
<div class="g1" style="overflow: hidden;">
<ul id="ulID" style="position: relative; height: 1800px; width: 380px; top: 0px;">
<li style="width: 380px; height: 180px; float: left;">
<img src="http://www.gimoo.net/t/1808/img/1.jpg" style="width: 380px; height: 180px;"></li>
<li style="width: 380px; height: 180px; float: left;">
<img src="http://www.gimoo.net/t/1808/img/2.jpg" style="width: 380px; height: 180px;"></li>
<li style="width: 380px; height: 180px; float: left;">
<img src="http://www.gimoo.net/t/1808/img/3.jpg" style="width: 380px; height: 180px;"></li>
<li style="width: 380px; height: 180px; float: left;">
<img src="http://www.gimoo.net/t/1808/img/4.jpg" style="width: 380px; height: 180px;"></li>
<li style="width: 380px; height: 180px; float: left;">
<img src="http://www.gimoo.net/t/1808/img/5.jpg" style="width: 380px; height: 180px;"></li>
<li style="width: 380px; height: 180px; float: left;">
<img src="http://www.gimoo.net/t/1808/img/1.jpg" style="width: 380px; height: 180px;"></li>
<li style="width: 380px; height: 180px; float: left;">
<img src="http://www.gimoo.net/t/1808/img/2.jpg" style="width: 380px; height: 180px;"></li>
<li style="width: 380px; height: 180px; float: left;">
<img src="http://www.gimoo.net/t/1808/img/3.jpg" style="width: 380px; height: 180px;"></li>
<li style="width: 380px; height: 180px; float: left;">
<img src="http://www.gimoo.net/t/1808/img/4.jpg" style="width: 380px; height: 180px;"></li>
<li style="width: 380px; height: 180px; float: left;">
<img src="http://www.gimoo.net/t/1808/img/5.jpg" style="width: 380px; height: 180px;"></li>
</ul>
</div>
</div>
<script type="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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持綠夏網。
