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 get和post 方法传值注意事项
Nov 03 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
May 28 Javascript
javascript面向对象特性代码实例
Jun 12 Javascript
js实现背景图片感应鼠标变化的方法
Feb 28 Javascript
jQuery实现简单二级下拉菜单
Apr 12 Javascript
JavaScript中的small()方法使用详解
Jun 08 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
Nov 15 Javascript
基于vue2.0+vuex的日期选择组件功能实现
Mar 13 Javascript
浅谈angularjs依赖服务注入写法的注意点
Apr 24 Javascript
vue中eventbus被多次触发以及踩过的坑
Dec 02 Javascript
微信小程序如何使用canvas二维码保存至手机相册
Jul 15 Javascript
vue如何实现关闭对话框后刷新列表
Apr 08 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
SONY ICF-F10中波修复记
2021/03/02 无线电
一个简单的自动发送邮件系统(一)
2006/10/09 PHP
php递归实现无限分类的方法
2015/07/28 PHP
CodeIgniter配置之SESSION用法实例分析
2016/01/19 PHP
PHP中检索字符串的方法分析【strstr与substr_count方法】
2017/02/17 PHP
ThinkPHP实现附件上传功能
2017/04/27 PHP
jquery实现文字由下到上循环滚动的实例代码
2013/08/09 Javascript
Iframe 自动适应页面的高度示例代码
2014/02/26 Javascript
Js可拖拽放大的层拖动特效实现方法
2015/02/25 Javascript
Flash图片上传组件 swfupload使用指南
2015/03/14 Javascript
AngularJS基础 ng-keyup 指令简单示例
2016/08/02 Javascript
基于JavaScript实现跳转提示页面
2016/09/24 Javascript
js 判断登录界面的账号密码是否为空
2017/02/08 Javascript
vue Render中slots的使用的实例代码
2017/07/19 Javascript
详解Vue-Cli 异步加载数据的一些注意点
2017/08/12 Javascript
详解Nodejs 通过 fs.createWriteStream 保存文件
2017/10/10 NodeJs
js 实现watch监听数据变化的代码
2019/10/13 Javascript
[03:17]史诗级大片应援2018DOTA2国际邀请赛 致敬每一位坚守遗迹的勇士
2018/07/20 DOTA
[01:42:49]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第一场 2月26日
2021/03/11 DOTA
python pdb调试方法分享
2014/01/21 Python
python开发之anaconda以及win7下安装gensim的方法
2019/07/05 Python
numpy.random.shuffle打乱顺序函数的实现
2019/09/10 Python
Python的logging模块基本用法
2020/12/24 Python
一款基于css3的动画按钮代码教程
2014/11/23 HTML / CSS
科室工作个人总结的自我评价
2013/10/29 职场文书
经理秘书岗位职责
2013/11/14 职场文书
环保公益广告语
2014/03/13 职场文书
怀念母亲教学反思
2014/04/28 职场文书
校园广播稿100字
2014/10/06 职场文书
部门优秀员工推荐信
2015/03/24 职场文书
2015年社区计生工作总结
2015/04/21 职场文书
拾金不昧表扬稿大全
2015/05/05 职场文书
2015年个人实习工作总结
2015/05/28 职场文书
告诉你一个秘密:富人致富的五大优点
2019/07/11 职场文书
golang中切片copy复制和等号复制的区别介绍
2021/04/27 Golang
详细介绍python操作RabbitMq
2022/04/12 Python