jquery广告无缝轮播实例

来源：动视网责编：小OO 时间：2020-11-27 20:27:04

jquery广告无缝轮播实例

需要自行添加五张图片和引用jquery库。纵向轮播实例。"；)；clearInterval(int)；} } int=setInterval("；moveUL()"；，10)；$("；.g1"；).hover(function(){ clearInterval(int)；}，function(){ int=setInterval("；moveUL()"；，10)；})；<；/script>；<；/body>；<；/html>；

推荐度：

点击下载本文 文档为doc格式

导读需要自行添加五张图片和引用jquery库。纵向轮播实例。"；)；clearInterval(int)；} } int=setInterval("；moveUL()"；，10)；$("；.g1"；).hover(function(){ clearInterval(int)；}，function(){ int=setInterval("；moveUL()"；，10)；})；<；/script>；<；/body>；<；/html>；

本文实例为大家演示了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="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="img/1.jpg" style="width: 380px; height: 180px;"></li>
 <li style="width: 380px; height: 180px; float: left;">
 <img src="img/2.jpg" style="width: 380px; height: 180px;"></li>
 <li style="width: 380px; height: 180px; float: left;">
 <img src="img/3.jpg" style="width: 380px; height: 180px;"></li>
 <li style="width: 380px; height: 180px; float: left;">
 <img src="img/4.jpg" style="width: 380px; height: 180px;"></li>
 <li style="width: 380px; height: 180px; float: left;">
 <img src="img/5.jpg" style="width: 380px; height: 180px;"></li>
 
 <li style="width: 380px; height: 180px; float: left;">
 <img src="img/1.jpg" style="width: 380px; height: 180px;"></li>
 <li style="width: 380px; height: 180px; float: left;">
 <img src="img/2.jpg" style="width: 380px; height: 180px;"></li>
 <li style="width: 380px; height: 180px; float: left;">
 <img src="img/3.jpg" style="width: 380px; height: 180px;"></li>
 <li style="width: 380px; height: 180px; float: left;">
 <img src="img/4.jpg" style="width: 380px; height: 180px;"></li>
 <li style="width: 380px; height: 180px; float: left;">
 <img src="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>

jquery广告无缝轮播实例

推荐度：

点击下载本文 文档为doc格式

标签：轮播案例无缝

热门焦点

jquery广告无缝轮播实例

jquery广告无缝轮播实例

jquery广告无缝轮播实例

最新推荐

猜你喜欢

热门推荐