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 相关文章推荐
HTML复选框和单选框 checkbox和radio事件介绍
Dec 12 Javascript
重构Javascript代码示例(重构前后对比)
Jan 23 Javascript
js设置组合快捷键/tabindex功能的方法
Nov 21 Javascript
一个很有趣3D球状标签云兼容IE8
Aug 22 Javascript
js获取元素相对窗口位置的实现代码
Sep 28 Javascript
angularJS 中$attrs方法使用指南
Feb 09 Javascript
JavaScript通过join函数连接数组里所有元素的方法
Mar 20 Javascript
jquery使用on绑定a标签无效 只能用live解决
Jun 02 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
Jan 11 Javascript
shiro授权的实现原理
Sep 21 Javascript
javascript 通过键名获取键盘的keyCode方法
Dec 31 Javascript
Koa2微信公众号开发之消息管理
May 16 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
在mysql数据库原有字段后增加新内容
2009/11/26 PHP
ajax在joomla中的原生态应用代码
2012/07/19 PHP
PHP curl 并发最佳实践代码分享
2012/09/05 PHP
Apache服务器无法使用的解决方法
2013/05/08 PHP
php array_values 返回数组的值实例详解
2016/11/17 PHP
基于yaf框架和uploadify插件,做的一个导入excel文件,查看并保存数据的功能
2017/01/24 PHP
Yii2框架自定义验证规则操作示例
2019/02/08 PHP
Pro JavaScript Techniques学习笔记
2010/12/28 Javascript
Jquery 获取checkbox的checked问题
2011/11/16 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
2014/01/08 Javascript
js中日期的加减法
2015/05/06 Javascript
JS数组array元素的添加和删除方法代码实例
2015/06/01 Javascript
jQuery中extend()和fn.extend()方法详解
2015/06/03 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
2015/09/30 Javascript
使用AJAX实现Web页面进度条的实例分享
2016/05/06 Javascript
JavaScript基于对象去除数组重复项的方法
2016/10/09 Javascript
js canvas仿支付宝芝麻信用分仪表盘
2016/11/16 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
2017/11/19 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
2018/04/21 Javascript
VeeValidate 的使用场景以及配置详解
2019/01/11 Javascript
js实现简单分页导航栏效果
2019/06/28 Javascript
[09:13]DOTA2-DPC中国联赛 正赛 Ehome vs Magma 选手采访 1月19日
2021/03/11 DOTA
python如何通过twisted实现数据库异步插入
2018/03/20 Python
python字符串常用方法
2018/06/14 Python
python pandas读取csv后,获取列标签的方法
2018/11/12 Python
python简易实现任意位数的水仙花实例
2018/11/13 Python
python的命名规则知识点总结
2019/10/04 Python
python3 os进行嵌套操作的实例讲解
2020/11/19 Python
在终端启动Python时报错的解决方案
2020/11/20 Python
Python用SSH连接到网络设备
2021/02/18 Python
会计自荐书
2013/12/02 职场文书
汽修专业自荐信
2014/07/07 职场文书
2014党员批评和自我批评思想汇报
2014/09/21 职场文书
2014年体育教学工作总结
2014/12/09 职场文书
微信小程序实现聊天室功能
2021/06/14 Javascript
JS开发前端团队展示控制器来为成员引流
2022/08/14 Javascript