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 相关文章推荐
基于Jquery的标签智能验证实现代码
Dec 27 Javascript
Javascript核心读书有感之语言核心
Feb 01 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
Oct 01 Javascript
jQuery代码实现实时获取时间
Jan 29 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
Mar 14 Javascript
vue2.0使用swiper组件实现轮播的示例代码
Mar 03 Javascript
常用的 JS 排序算法 整理版
Apr 05 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
Nov 14 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
Apr 28 Javascript
微信小程序云开发如何使用云函数生成二维码
May 18 Javascript
jQuery HTML css()方法与css类实例详解
May 20 jQuery
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
Sep 10 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及Zend Engine的线程安全模型分析
2011/11/10 PHP
php函数间的参数传递(值传递/引用传递)
2013/09/23 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
一段非常简单的让图片自动切换js代码
2006/11/10 Javascript
javascript中获取选中对象的类型
2007/04/02 Javascript
Some tips of wmi scripting in jscript (1)
2007/04/03 Javascript
jQuery 技巧小结
2010/04/02 Javascript
Jquery下判断Id是否存在的代码
2011/01/06 Javascript
幻灯片带网页设计中的20个奇妙应用示例小结
2012/05/27 Javascript
jquery插件开发之实现jquery手风琴功能分享
2014/03/10 Javascript
js中的setInterval和setTimeout使用实例
2014/05/09 Javascript
javascript属性访问表达式用法分析
2015/04/25 Javascript
浅谈js里面的InttoStr和StrtoInt
2016/06/14 Javascript
JavaScript编码风格指南(中文版)
2016/08/26 Javascript
纯js仿淘宝京东商品放大镜功能
2017/03/02 Javascript
基于vue实现web端超大数据量表格的卡顿解决
2019/04/02 Javascript
Vue包大小优化的实现(从1.72M到94K)
2021/02/18 Vue.js
为Python的web框架编写前端模版的教程
2015/04/30 Python
Python二分查找详解
2015/09/13 Python
python中字符串的操作方法大全
2018/06/03 Python
Caffe均值文件mean.binaryproto转mean.npy的方法
2018/07/09 Python
非常漂亮的CSS3百叶窗焦点图动画
2016/02/24 HTML / CSS
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
2016/05/17 HTML / CSS
罗技美国官网:Logitech美国
2020/01/22 全球购物
造价工程师个人求职信
2013/09/21 职场文书
大学考试作弊检讨书
2014/01/30 职场文书
大学毕业自我评价
2014/02/02 职场文书
中学教师自我鉴定
2014/02/07 职场文书
会计员岗位职责
2014/03/15 职场文书
教师考核评语
2014/04/28 职场文书
体育活动总结范文
2014/05/04 职场文书
2015年学校工作总结范文
2015/04/20 职场文书
培根随笔读书笔记
2015/07/01 职场文书
Golang 空map和未初始化map的注意事项说明
2021/04/29 Golang
索尼ICF-36收音机评测
2022/04/30 无线电