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 相关文章推荐
国外Lightbox v2.03.3 最新版 下载
Oct 17 Javascript
jquery单行文字向上滚动效果的实现代码
Sep 05 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
Apr 06 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
Apr 14 Javascript
详解JavaScript中Date.UTC()方法的使用
Jun 12 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
Apr 26 Javascript
AngularJS改变元素显示状态
Apr 20 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
Jul 03 Javascript
js实现上传并压缩图片效果
Jan 10 Javascript
简单两步使用node发送qq邮件的方法
Mar 01 Javascript
一起写一个即插即用的Vue Loading插件实现
Oct 31 Javascript
vue 封装 Adminlte3组件的实现
Mar 18 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
2014年10个最佳的PHP图像操作库
2014/07/14 PHP
PHP中构造函数和析构函数解析
2014/10/10 PHP
php+xml编程之xpath的应用实例
2015/01/24 PHP
微信支付开发动态链接Native支付
2016/07/12 PHP
yii框架使用分页的方法分析
2019/07/25 PHP
JavaScript replace(rgExp,fn)正则替换的用法
2010/03/04 Javascript
jqGrid jQuery 表格插件测试代码
2011/08/23 Javascript
用javascript删除当前行,添加行(示例代码)
2013/11/25 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
jquery.idTabs 选项卡使用示例代码
2014/09/03 Javascript
node.js中的path.basename方法使用说明
2014/12/09 Javascript
javascript中Array数组的迭代方法实例分析
2015/02/04 Javascript
浅谈js中对象的使用
2016/08/11 Javascript
jquery中关于bind()方法的使用技巧分享
2017/03/30 jQuery
微信小程序 下拉菜单简单实例
2017/04/13 Javascript
JavaScript箭头函数_动力节点Java学院整理
2017/06/28 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
2018/10/19 Javascript
AngularJs中$cookies简单用法分析
2019/05/30 Javascript
[02:32]“虐狗”镜头慎点 2016国际邀请赛中国区预选赛现场玩家采访
2016/06/28 DOTA
跟老齐学Python之眼花缭乱的运算符
2014/09/14 Python
Python实现 多进程导入CSV数据到 MySQL
2017/02/26 Python
浅析PHP与Python进行数据交互
2018/05/15 Python
对dataframe进行列相加,行相加的实例
2018/06/08 Python
Python pandas库中的isnull()详解
2019/12/26 Python
Python socket连接中的粘包、精确传输问题实例分析
2020/03/24 Python
浅谈Python程序的错误:变量未定义
2020/06/02 Python
质检的岗位职责
2013/11/17 职场文书
教师业务学习制度
2014/01/25 职场文书
社区健康教育实施方案
2014/03/18 职场文书
节约用水的口号
2014/06/20 职场文书
自我检讨报告
2015/01/28 职场文书
2016年第32个教师节致辞
2015/11/26 职场文书
Jsonp劫持学习
2021/04/01 PHP
宫崎骏十大动画电影,宫崎骏好看的动画电影排名
2022/03/22 日漫
Nginx禁止ip访问或非法域名访问
2022/04/07 Servers
Pandas 数据编码的十种方法
2022/04/20 Python