jQuery轻松实现无缝轮播效果


Posted in jQuery onMarch 22, 2017

这个无缝轮播和那个图片平滑滚动的原理差不多。

原理:ul向左滚动,滚动一次,第一个li向ul插入,然后在让怎个ul的left值为0,也就是初始状态,这个状态太快我们无法看到,所以才会有平滑滚动的效果

jQuery轻松实现无缝轮播效果

//CSS

<style>
 *{ margin: 0px; padding: 0px;}
 li{ list-style: none;}
 .content{ width: 1020px; height:112px; overflow: hidden; border: #4e83c2 solid 1px; margin:50px auto; }
 .content ul{ width: 1020px; height:100px;}
 .content ul li{ float: left; width: 100px; height: 100px; border:#ccc solid 1px; display: block; margin: 5px;}
 
</style>

//HTML

<body>
  <div class="content">
  <ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
   <li>6</li>
   <li>7</li>
   <li>8</li>
   <li>9</li>
   <li>10</li>
   <li>11</li>
   <li>12</li>
   <li>13</li>
   <li>14</li>
   <li>15</li>
   <li>16</li>
   <li>17</li>
   <li>18</li>
   <li>19</li>
   <li>20</li>
   <li>21</li>
   <li>22</li>
   <li>23</li>
   <li>24</li>
  </ul>
</div>
</body>

//JQUERY

<script>
 function scroll(){
 $(".content ul").animate({"margin-left":"-110px"},function(){
  $(".content ul li:eq(0)").appendTo($(".content ul"))
  $(".content ul").css({"margin-left":0})
 })
 }
 setInterval(scroll,3000)
</script>

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

jQuery 相关文章推荐
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 jQuery
jquery使用FormData实现异步上传文件
Oct 25 jQuery
jquery.pager.js分页实现详解
Jul 29 jQuery
jQuery表单选择器用法详解
Aug 22 jQuery
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
jQuery实现带进度条的轮播图
Sep 13 jQuery
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 #jQuery
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 #jQuery
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 #jQuery
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 #jQuery
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 #jQuery
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 #jQuery
jquery插件制作 自增长输入框实现代码
Aug 17 #jQuery
You might like
超神学院:天使彦公认最美的三个视角,网友:我的天使快下凡吧!
2020/03/02 国漫
PHP 变量类型的强制转换
2009/10/23 PHP
解析php session_set_save_handler 函数的用法(mysql)
2013/06/29 PHP
基于jquery的一个OutlookBar类,动态创建导航条
2010/11/19 Javascript
用JQuery模仿淘宝的图片放大镜显示效果
2011/09/15 Javascript
javascript模块化简单解析
2016/04/07 Javascript
ES6中的数组扩展方法
2016/08/26 Javascript
jQuery validate插件功能与用法详解
2016/12/15 Javascript
nodejs入门教程六:express模块用法示例
2017/04/24 NodeJs
浅析vue.js数组的变异方法
2018/06/30 Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
2018/09/16 Javascript
微信小程序之onLaunch与onload异步问题详解
2019/03/28 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
2019/04/30 Javascript
python实现获取序列中最小的几个元素
2014/09/25 Python
用Python实现换行符转换的脚本的教程
2015/04/16 Python
Django框架中数据的连锁查询和限制返回数据的方法
2015/07/17 Python
Python爬虫实现验证码登录代码实例
2019/05/10 Python
Django 全局的static和templates的使用详解
2019/07/19 Python
使用anaconda安装pytorch的实现步骤
2020/09/03 Python
python 基于Apscheduler实现定时任务
2020/12/15 Python
AmazeUI导航的示例代码
2020/08/14 HTML / CSS
美国家喻户晓的保健品品牌:Vitamin World(维他命世界)
2016/08/19 全球购物
南非最受欢迎的时尚品牌:MRP
2016/09/18 全球购物
党校培训思想汇报
2014/01/03 职场文书
求职面试个人自我评价
2014/02/28 职场文书
有兼职工作经历的简历自我评价
2014/03/07 职场文书
英文自荐信常用句子
2014/03/26 职场文书
2014年便民服务中心工作总结
2014/12/20 职场文书
2015年秋季小学开学标语
2015/07/16 职场文书
python实现简单的井字棋
2021/05/26 Python
Python 内置函数速查表一览
2021/06/02 Python
为自由献出你的心脏!「进击的巨人展 FINAL」2022年6月在台开展
2022/04/13 日漫
nginx配置限速限流基于内置模块
2022/05/02 Servers
搭建zabbix监控以及邮件报警的超级详细教学
2022/07/15 Servers
在windows server 2012 r2中安装mysql的详细步骤
2022/07/23 Servers
javascript中Set、Map、WeakSet、WeakMap区别
2022/12/24 Javascript