jquery广告无缝轮播实例


Posted in Javascript onJanuary 05, 2017

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js escape,unescape解决中文乱码问题的方法
May 26 Javascript
基于jquery的表格排序
Sep 11 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
Oct 11 Javascript
jquery实现简单的无缝滚动
Apr 15 Javascript
IE浏览器下PNG相关功能
Jul 05 Javascript
JavaScript学习笔记之数组去重
Mar 23 Javascript
简洁实用的BootStrap jQuery手风琴插件
Aug 31 Javascript
javaScript语法总结
Nov 25 Javascript
JS遍历对象属性的方法示例
Jan 10 Javascript
基于JavaScript实现类名的添加与移除
Apr 23 Javascript
mui框架移动开发初体验详解
Oct 11 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
Jan 08 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
Jan 05 #Javascript
javascript添加前置0(补零)的几种方法
Jan 05 #Javascript
微信小程序 实战实例开发流程详细介绍
Jan 05 #Javascript
利用jquery禁止外层滚动条的滚动
Jan 05 #Javascript
bootstrap table配置参数例子
Jan 05 #Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
Jan 05 #Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
Jan 05 #Javascript
You might like
PHP 开源AJAX框架14种
2009/08/24 PHP
php数组中删除元素的实现代码
2012/06/22 PHP
使用php测试硬盘写入速度示例
2014/01/27 PHP
PHP中4个加速、缓存扩展的区别和选用建议
2014/03/12 PHP
PHP中捕获超时事件的方法实例
2015/02/12 PHP
PHP递归创建多级目录
2015/11/05 PHP
基于PHP实现用户注册登录功能
2016/10/14 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
greybox——不开新窗口看新的网页
2007/02/20 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
2012/05/23 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
2015/04/15 Javascript
javascript生成不重复的随机数
2015/07/17 Javascript
js实现搜索框关键字智能匹配代码
2020/03/26 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
2016/06/29 Javascript
AngularJS中使用three.js的实例详解
2017/07/21 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
JS实现的base64加密解密操作示例
2018/04/18 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
2019/02/20 jQuery
基于three.js实现的3D粒子动效实例代码
2019/04/09 Javascript
对Layer弹窗使用及返回数据接收的实例详解
2019/09/26 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
2020/08/24 Javascript
python ip正则式
2009/05/07 Python
Python的Bottle框架中返回静态文件和JSON对象的方法
2015/04/30 Python
python实现快递价格查询系统
2020/03/03 Python
HTML5全屏(Fullscreen)API详细介绍
2015/04/24 HTML / CSS
了解AppleShare protocol(AppleShare协议)吗
2015/08/28 面试题
教师求职推荐信范文
2013/11/20 职场文书
超市中秋节活动方案
2014/02/12 职场文书
倡议书格式
2014/04/14 职场文书
知识就是力量演讲稿
2014/09/13 职场文书
公司授权委托书格式样本
2014/10/01 职场文书
护理专业毕业自我鉴定
2019/08/12 职场文书
人生一定要学会的三样东西:放下、忘记、珍惜
2019/08/21 职场文书
Mac M1安装mnmp (Mac+Nginx+MySQL+PHP) 开发环境
2021/03/29 PHP
记一次Mysql不走日期字段索引的原因小结
2021/10/24 MySQL
MySQL导致索引失效的几种情况
2022/06/25 MySQL