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 相关文章推荐
原型方法的不同写法居然会影响调试的解决方法
Mar 08 Javascript
javascript 寻找错误方法整理
Jun 15 Javascript
3种Jquery限制文本框只能输入数字字母的方法
Dec 03 Javascript
JS小数运算出现多为小数问题的解决方法
Jun 02 Javascript
JavaScript函数基础详解
Feb 03 Javascript
JS库之Three.js 简易入门教程(详解之一)
Sep 13 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
Nov 22 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
Oct 09 Javascript
element vue Array数组和Map对象的添加与删除操作
Nov 14 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
Aug 20 Javascript
vue setInterval 定时器失效的解决方式
Jul 30 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
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下利用curl判断远程文件是否存在的实现代码
2011/10/08 PHP
php基于SQLite实现的分页功能示例
2017/06/21 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
Hutia 的 JS 代码集
2006/10/24 Javascript
JavaScript对象链式操作代码(jquery)
2010/07/04 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
2012/01/15 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
2012/03/01 Javascript
js取消单选按钮选中示例代码
2013/11/14 Javascript
用jquery仿做发微博功能示例
2014/04/18 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
2015/08/20 Javascript
解决JavaScript数字精度丢失问题的方法
2015/12/03 Javascript
基于node.js依赖express解析post请求四种数据格式
2017/02/13 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
2017/12/12 Javascript
vue组件传递对象中实现单向绑定的示例
2018/02/28 Javascript
vue.js中created方法作用
2018/03/30 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
2018/07/13 Javascript
JavaScript学习笔记之数组基本操作示例
2019/01/09 Javascript
wx-charts 微信小程序图表插件的具体使用
2019/08/18 Javascript
nodejs dgram模块广播+组播的实现示例
2019/11/04 NodeJs
Node.js利用Express实现用户注册登陆功能(推荐)
2020/10/26 Javascript
[04:17]DOTA2完美盛典,rOtk、BurNIng携手巴图演唱《倔强》
2017/11/28 DOTA
如何处理Python3.4 使用pymssql 乱码问题
2016/01/08 Python
python 读取excel文件生成sql文件实例详解
2017/05/12 Python
django使用admin站点上传图片的实例
2019/07/28 Python
pytorch绘制并显示loss曲线和acc曲线,LeNet5识别图像准确率
2020/01/02 Python
浅析matlab中imadjust函数
2020/02/27 Python
详解用 python-docx 创建浮动图片
2021/01/24 Python
美国领先的汽车轮胎和轮毂供应商:TireBuyer
2016/07/21 全球购物
美国和加拿大房车出售在线分类广告:RVT.com
2018/04/23 全球购物
帕克纽约:PARKER NY
2018/12/09 全球购物
行政人事岗位职责
2014/03/17 职场文书
毕业论文致谢词
2015/05/14 职场文书
南京南京观后感
2015/06/02 职场文书
保险公司增员口号
2015/12/25 职场文书
OpenCV-Python实现油画效果的实例
2021/06/08 Python
Kubernetes中Deployment的升级与回滚
2022/04/01 Servers