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参数个数可变的函数举例说明
Oct 10 Javascript
jQuery中parent()方法用法实例
Jan 07 Javascript
jquery实现点击页面计算点击次数
Jan 23 Javascript
Javascript核心读书有感之词法结构
Feb 01 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
Jun 02 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
Jul 11 Javascript
ES6概念 ymbol.for()方法
Dec 25 Javascript
Bootstrap导航条学习使用(一)
Feb 08 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
Vue.js图片预览插件使用详解
Aug 27 Javascript
微信小程序使用swiper组件实现类3D轮播图
Aug 29 Javascript
VUE预渲染及遇到的坑
Sep 03 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
漫威DC即将合作联动,而双方早已经秘密开始
2020/04/09 欧美动漫
PHP调用三种数据库的方法(1)
2006/10/09 PHP
PHP学习之整理字符串
2011/04/17 PHP
vmware linux系统安装最新的php7图解
2019/04/14 PHP
PHP批斗大会之缺失的异常详解
2019/07/09 PHP
Mozilla 表达式 __noSuchMethod__
2009/04/05 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
2013/10/29 Javascript
JQuery分屏指示器图片轮换效果实例
2015/05/21 Javascript
JavaScript编写连连看小游戏
2015/07/07 Javascript
js前端面试题及答案整理(一)
2016/08/26 Javascript
微信小程序 实战程序简易新闻的制作
2017/01/09 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
2017/04/14 Javascript
webpack使用 babel-loader 转换 ES6代码示例
2017/08/21 Javascript
vue-router权限控制(简单方式)
2018/10/29 Javascript
jQuery HTML css()方法与css类实例详解
2020/05/20 jQuery
[51:11]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS DT
2014/05/22 DOTA
Python实现树莓派WiFi断线自动重连的实例代码
2017/03/16 Python
浅谈Django自定义模板标签template_tags的用处
2017/12/20 Python
Python调用adb命令实现对多台设备同时进行reboot的方法
2018/10/15 Python
Python读取VOC中的xml目标框实例
2020/03/10 Python
python 使用cx-freeze打包程序的实现
2020/03/14 Python
使用Keras画神经网络准确性图教程
2020/06/15 Python
HTML5 Canvas 起步(2) - 路径
2009/05/12 HTML / CSS
利用 Canvas实现绘画一个未闭合的带进度条的圆环
2019/07/26 HTML / CSS
斯图尔特·韦茨曼鞋加拿大官网:Stuart Weitzman加拿大
2019/10/13 全球购物
JBL加拿大官方商店:扬声器、耳机等
2020/10/23 全球购物
哈萨克斯坦移动和数字技术在线商店:SatelOnline.kz
2020/09/04 全球购物
The North Face意大利官网:服装、背包和鞋子
2020/06/17 全球购物
Java中compareTo和compare的区别
2016/04/12 面试题
如何理解委托
2012/01/06 面试题
本科生求职简历的自我评价
2013/10/21 职场文书
人力资源主管职责范本
2014/03/05 职场文书
工作会议主持词
2014/03/17 职场文书
出国签证在职证明
2014/09/20 职场文书
三年级学生期末评语
2014/12/26 职场文书
浅谈Mysql多表连接查询的执行细节
2021/04/24 MySQL