jquery广告无缝轮播实例

2019-11-19 18:07:13

字体：大中小

来源：转载

供稿：网友

本文实例为大家演示了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密码强度验证控件使用详解

下一篇：JavaScript自定义浏览器滚动条兼容IE、火狐和chrome