JQuery循环滚动图片代码


Posted in Javascript onDecember 08, 2011
function refresh() { 
var s = $(".box1"); 
if (!s.is(":animated")) 
$(".box1").animate({ marginLeft: "0px" }, "slow", function () { 
$('.box1 img:first').before($('.box1 img:last')); 
$(".box1").css("margin-left", "-206px"); 
}); 
} 
<div class="frame"><div class="box1"><img src="img/001.png" alt="" /><img src="img/002.png" alt="" /><img src="img/003.png" alt="" /><img src="img/004.png" alt="" /></div></div> 
<button type="button"><<</button><button type="button" onclick="refresh()">>></button> 
.box1 
{ 
width:1200px; 
overflow:hidden; 
margin-left:-206px; 
} 
.frame 
{ 
width:620px; 
overflow:hidden; 
}

图片宽度默认206px,没设定
Javascript 相关文章推荐
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
Apr 20 Javascript
javascript预加载图片、css、js的方法示例介绍
Oct 14 Javascript
JavaScript中的console.profile()函数详细介绍
Dec 29 Javascript
JavaScript保存并运算页面中数字类型变量的写法
Jul 06 Javascript
通过BootStrap实现轮播图的实际应用
Sep 26 Javascript
AngularJS入门教程之表单校验用法示例
Nov 02 Javascript
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
解决layui中的form表单与button的点击事件冲突问题
Aug 15 Javascript
Angular6新特性之Angular Material
Dec 28 Javascript
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
原生js实现放大镜组件
Jan 22 Javascript
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
Dec 08 #Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
Dec 08 #Javascript
js中document.getElementByid、document.all和document.layers区分介绍
Dec 08 #Javascript
基于jquery的代码显示区域自动拉长效果
Dec 07 #Javascript
5个javascript的数字格式化函数分享
Dec 07 #Javascript
TimergliderJS 一个基于jQuery的时间轴插件
Dec 07 #Javascript
autoPlay 基于jquery的图片自动播放效果
Dec 07 #Javascript
You might like
PHP 获取MySQL数据库里所有表的实现代码
2011/07/13 PHP
使用php验证复选框有效性的示例
2013/11/13 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
2011/03/03 Javascript
js检测iframe是否加载完成的方法
2015/11/26 Javascript
JavaScript省市级联下拉菜单实例
2017/02/14 Javascript
微信小程序五星评分效果实现代码
2017/04/06 Javascript
JavaScript变量声明var,let.const及区别浅析
2018/04/23 Javascript
js 数组详细操作方法及解析合集
2018/06/01 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
2019/08/02 Javascript
如何解决日期函数new Date()浏览器兼容性问题
2019/09/11 Javascript
VSCode搭建React Native环境
2020/05/07 Javascript
js实现列表按字母排序
2020/08/11 Javascript
js实现飞机大战小游戏
2020/08/26 Javascript
[03:01]完美盛典趣味短片 DOTA2年度最佳&拉胯英雄
2019/12/07 DOTA
python daemon守护进程实现
2016/08/27 Python
pandas 数据实现行间计算的方法
2018/06/08 Python
Django Rest framework之认证的实现代码
2018/12/17 Python
python根据文章标题内容自动生成摘要的实例
2019/02/21 Python
Python Numpy计算各类距离的方法
2019/07/05 Python
使用 Python 处理 JSON 格式的数据
2019/07/22 Python
Python3将数据保存为txt文件的方法
2019/09/12 Python
用python写测试数据文件过程解析
2019/09/25 Python
pytorch::Dataloader中的迭代器和生成器应用详解
2020/01/03 Python
Python多线程Threading、子线程与守护线程实例详解
2020/03/24 Python
空指针到底是什么
2012/08/07 面试题
转预备党员政审材料
2014/02/06 职场文书
秋天的怀念教学反思
2014/04/28 职场文书
优秀大学生自荐信
2014/06/09 职场文书
企业消防安全责任书
2014/07/23 职场文书
作风大整顿心得体会
2014/09/10 职场文书
中职毕业生自我鉴定范文(3篇)
2014/09/28 职场文书
村主任个人对照检查材料
2014/10/01 职场文书
房屋买卖定金协议书
2016/03/21 职场文书
Python自动化爬取天眼查数据的实现
2021/06/15 Python
CSS 一行代码实现头像与国旗的融合
2021/10/24 HTML / CSS