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 相关文章推荐
基于JQuery的动态删除Table表格的行和列的代码
May 12 Javascript
extjs中form与grid交互数据(record)的方法
Aug 29 Javascript
jquery查找tr td 示例模拟
May 08 Javascript
javascript下拉列表中显示树形菜单的实现方法
Nov 17 Javascript
JavaScript优化专题之Loading and Execution加载和运行
Jan 20 Javascript
ionic2 tabs使用 Modal底部tab弹出框
Dec 30 Javascript
React组件的三种写法总结
Jan 12 Javascript
jQuery在header中设置请求信息的方法
Mar 06 Javascript
ES6中Iterator与for..of..遍历用法分析
Mar 31 Javascript
hammer.js实现图片手势放大效果
Aug 29 Javascript
Nuxt.js踩坑总结分享
Jan 18 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
Sep 26 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
Parse正式发布开源PHP SDK
2014/08/11 PHP
php上传图片客户端和服务器端实现方法
2015/03/30 PHP
雄兵连第三季海报曝光,艾妮熙德成主角,蔷薇新造型
2021/03/09 国漫
js/jQuery对象互转(快速操作dom元素)
2013/02/04 Javascript
js post提交调用方法
2014/02/12 Javascript
Javascript字符串对象的常用方法简明版
2014/06/26 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
2016/12/13 Javascript
JavaScript闭包_动力节点Java学院整理
2017/06/27 Javascript
JS点击缩略图整屏居中放大图片效果
2017/07/04 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
2017/07/19 jQuery
js原生代码实现轮播图的实例讲解
2017/07/28 Javascript
JavaScript获取某一天所在的星期
2019/09/05 Javascript
js实现拾色器插件(ColorPicker)
2020/05/21 Javascript
如何在selenium中使用js实现定位
2020/08/18 Javascript
浅析 Vue 3.0 的组装式 API(一)
2020/08/31 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
2020/11/04 Javascript
Python判断直线和矩形是否相交的方法
2015/07/14 Python
Python实现抓取网页生成Excel文件的方法示例
2017/08/05 Python
Python实现七彩蟒蛇绘制实例代码
2018/01/16 Python
python 画三维图像 曲面图和散点图的示例
2018/12/29 Python
Python 点击指定位置验证码破解的实现代码
2019/09/11 Python
Python使用socket模块实现简单tcp通信
2020/08/18 Python
美国设计师精美珠宝购物网:Netaya
2016/08/28 全球购物
香港连卡佛百货官网:Lane Crawford
2019/09/04 全球购物
linux面试题参考答案(3)
2012/09/13 面试题
介绍一下grep命令的使用
2015/06/12 面试题
大四自我鉴定
2014/02/08 职场文书
班级年度安全计划书
2014/05/01 职场文书
2014年派出所工作总结
2014/11/21 职场文书
介绍信格式
2015/01/30 职场文书
饭店服务员岗位职责
2015/02/09 职场文书
培训通知
2015/04/17 职场文书
终止解除劳动合同证明书
2015/06/17 职场文书
Python基础之元编程知识总结
2021/05/23 Python
Nginx反向代理、重定向
2022/04/13 Servers
Win10此设备不支持接收Miracast无法投影的解决方法
2022/07/07 数码科技