jquery广告无缝轮播实例

更新时间：2017年01月05日 15:02:14 作者：csmzl

这篇文章主要为大家详细介绍了jquery广告无缝轮播实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家演示了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

删除select中所有option选项jquery代码
select中所有option选项如何删除，本文使用jquery简单实现下，有此需求的朋友可以参考下，希望对大家有所帮助
2013-08-08
jQuery is not defined 错误原因与解决方法小结
今天在测试一个程序的时候，明显已经加载了jquery但总是提示jQuery is not defined，经过多方测试终于发现了问题，这里简单总结一下,需要的朋友可以参考下
2017-03-03
jquery插入兄弟节点的操作方法
下面小编就为大家带来一篇jquery插入兄弟节点的操作方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-12-12
jQuery实现简单的计时器功能实例分析
这篇文章主要介绍了jQuery实现简单的计时器功能,结合实例形式分析了jQuery实现倒计时60秒的具体操作技巧与相关注意事项,需要的朋友可以参考下
2017-08-08
jqGrid翻页时数据选中丢失问题的解决办法
我在项目中使用jqGrid时，采用异步加载服务器数据，例如点击翻页、搜索时都重新加载数据。这篇文章主要介绍了jqGrid翻页时数据选中丢失问题,需要的朋友可以参考下
2017-02-02
非常漂亮的相册集使用jquery制作相册集
这篇文章主要为大家详细介绍了使用jquery制作非常漂亮的相册集，步骤详细，细节介绍完整，感兴趣的小伙伴们可以参考一下
2016-04-04
Html5的placeholder属性(IE兼容)实现代码
Placeholder是HTML5新增的另一个属性，当input或者textarea设置了该属性后，该值的内容将作为灰字提示显示在文本框中，当文本框获得焦点时，提示文字消失。以前要实现这效果都是用JavaScript来控制才能实现 , firefox、google chrome等表示对其支持 , 唯独IE不支持
2014-08-08
Jquery easyui 实现动态树
本文给大家介绍jquery easyui实现动态树，本文通过代码实例相结合的方式给大家展示jquery easyui实现动态树的过程，感兴趣的朋友一起学习吧
2015-11-11
jQuery操作事件完整实例分析
这篇文章主要介绍了jQuery操作事件,结合完整实例形式分析了jquery事件绑定、解绑、响应、触发等相关操作技巧,需要的朋友可以参考下
2020-01-01
jQuery 插件实现随机自由弹跳气泡样式
一个基于jQuery的气泡动画插件，在指定区域上方（左/右）定时间隔产生气泡，然后随机水平速度进行仿自由落体运动。这篇文章主要介绍了jQuery 插件实现随机自由弹跳气泡样式的相关资料,需要的朋友可以参考下
2017-01-01