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.load()和Jsp的include的区别
Apr 12 jQuery
jquery DataTable实现前后台动态分页
Jun 17 jQuery
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
jQuery zTree树插件的使用教程
Aug 16 jQuery
jQuery 筛选器简单操作示例
Oct 02 jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
jQuery 移除事件的方法
Jun 20 jQuery
jQuery实现雪花飘落效果
Aug 02 jQuery
jquery插件实现代码雨特效
Apr 24 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
Session的工作机制详解和安全性问题(PHP实例讲解)
2014/04/10 PHP
PHP多文件上传类实例
2015/03/07 PHP
你应该知道PHP浮点数知识
2015/05/13 PHP
PHP模块化安装教程
2016/06/01 PHP
thinkPHP5框架路由常用知识点汇总
2019/09/15 PHP
php把文件设置为插件的技巧方法
2020/02/03 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
重载toString实现JS HashMap分析
2011/03/13 Javascript
超轻量级的基于jquery的三级展开列表
2011/04/26 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
2015/01/29 Javascript
Node.js Streams文件读写操作详解
2016/07/04 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
2016/10/28 Javascript
BootStrap树状图显示功能
2016/11/24 Javascript
javascript 面向对象function详解及实例代码
2017/02/28 Javascript
js按条件生成随机json:randomjson实现方法
2017/04/07 Javascript
JS验证全角与半角及相互转化的介绍
2017/05/18 Javascript
ReactNative踩坑之配置调试端口的解决方法
2017/07/28 Javascript
基于zTree树形菜单的使用实例
2017/12/25 Javascript
JS+php后台实现文件上传功能详解
2019/03/02 Javascript
Vue 用Vant实现时间选择器的示例代码
2019/10/25 Javascript
使用JS实现动态时钟
2020/03/12 Javascript
利用H5api实现时钟的绘制(javascript)
2020/09/13 Javascript
[01:11:46]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第一场 2月23日
2021/03/11 DOTA
Python使用稀疏矩阵节省内存实例
2014/06/27 Python
10个易被忽视但应掌握的Python基本用法
2015/04/01 Python
Django admin管理工具TabularInline类用法详解
2020/05/14 Python
学习python需要有编程基础吗
2020/06/02 Python
经典婚礼主持开场白
2014/03/13 职场文书
2014标准社保办理委托书
2014/10/06 职场文书
学习党章的体会
2014/11/07 职场文书
承诺函格式模板
2015/01/21 职场文书
2015年大学辅导员工作总结
2015/05/12 职场文书
2015国庆节宣传语
2015/07/14 职场文书
2015年科普工作总结
2015/07/23 职场文书
Vue + iView实现Excel上传功能的完整代码
2021/06/22 Vue.js
《巫师》是美食游戏?CDPR10月将推出《巫师》官方食谱
2022/04/03 其他游戏