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 相关文章推荐
javascript高亮效果的二种实现方法
Sep 14 Javascript
jQuery点击后一组图片左右滑动的实现代码
Aug 16 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
Dec 26 Javascript
javascript中的self和this用法小结
Feb 08 Javascript
javascript设计模式之工厂模式示例讲解
Mar 04 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
Jan 14 Javascript
thinkjs之页面跳转同步异步操作
Feb 05 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
Feb 23 Javascript
layui框架table 数据表格的方法级渲染详解
Aug 19 Javascript
vue router 跳转后回到顶部的实例
Aug 31 Javascript
RxJS的入门指引和初步应用
Jun 15 Javascript
Node.js API详解之 net模块实例分析
May 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
一条久听不愿放下的DIY森海MX500,三言两语话神奇
2021/03/02 无线电
咖啡历史、消费和行业趋势
2021/03/03 咖啡文化
php分页函数
2006/07/08 PHP
php 上传功能实例代码
2010/04/13 PHP
PHP的Yii框架中Model模型的学习教程
2016/03/29 PHP
thinkphp3.x中display方法及show方法的用法实例
2016/05/19 PHP
使用JavaScript创建新样式表和新样式规则
2016/06/14 PHP
Laravel 连接(Join)示例
2019/10/16 PHP
js监听键盘事件示例代码
2013/07/26 Javascript
JavaScript定时器详解及实例
2013/08/01 Javascript
javascript模拟实现C# String.format函数功能代码
2013/11/25 Javascript
js加载读取内容及显示与隐藏div示例
2014/02/13 Javascript
浅谈jQuery事件绑定原理
2015/01/02 Javascript
javaScript中push函数用法实例分析
2015/06/08 Javascript
javascript跨域的方法汇总
2015/10/23 Javascript
Postman模拟发送带token的请求方法
2018/03/31 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
2018/08/16 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
2018/08/19 Javascript
在create-react-app中使用sass的方法示例
2018/10/01 Javascript
详解Vue demo实现商品列表的展示
2019/05/07 Javascript
原生js实现表格循环滚动
2020/11/24 Javascript
Python实现简单的多任务mysql转xml的方法
2017/02/08 Python
python3中zip()函数使用详解
2018/06/29 Python
详解利用python+opencv识别图片中的圆形(霍夫变换)
2019/07/01 Python
python中类的输出或类的实例输出为这种形式的原因
2019/08/12 Python
Django 项目通过加载不同env文件来区分不同环境
2020/02/17 Python
李维斯德国官方网上商店:Levi’s德国
2016/09/10 全球购物
Pureology官网:为染色头发打造最好的产品
2019/09/13 全球购物
马歇尔耳机官网:Marshall Headphones
2020/02/04 全球购物
北京泡泡网网络有限公司.net面试题
2012/07/17 面试题
Internal修饰符有什么含义
2013/07/10 面试题
销售人员个人求职信
2013/09/26 职场文书
高中体育教学反思
2014/01/29 职场文书
餐厅销售主管职责范本
2014/02/19 职场文书
自我推荐信怎么写
2015/03/24 职场文书
建筑质检员岗位职责
2015/04/08 职场文书