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 相关文章推荐
js 数值项目的格式化函数代码
May 14 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
Aug 12 Javascript
raphael.js绘制中国地图 地图绘制方法
Feb 12 Javascript
使用js操作css实现js改变背景图片示例
Mar 10 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
Aug 24 Javascript
jQuery的事件预绑定
Dec 05 Javascript
vue-cli的工程模板与构建工具详解
Sep 27 Javascript
eslint 的三大通用规则详解
May 16 Javascript
Vue跨域请求问题解决方案过程解析
Aug 07 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
Aug 31 Javascript
Vue3为什么这么快
Sep 23 Javascript
JavaScript的function函数详细介绍
Nov 20 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
德生S2000南麂列岛台湾FM收听记录
2021/03/02 无线电
php中ob(Output Buffer 输出缓冲)函数使用方法
2007/07/21 PHP
PHP实现根据浏览器跳转不同语言页面代码
2013/08/02 PHP
PHP中Http协议post请求参数
2015/11/02 PHP
JavaScript中的稀疏数组与密集数组[译]
2012/09/17 Javascript
javascript 构造函数强制调用经验总结
2012/12/02 Javascript
JavaScript异步回调的Promise模式封装实例
2014/06/07 Javascript
jquery提示效果实例分析
2014/11/25 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
2015/12/10 Javascript
js 博客内容进度插件详解
2017/02/19 Javascript
JS实现给json数组动态赋值的方法示例
2020/03/19 Javascript
vue router-link传参以及参数的使用实例
2017/11/10 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
2018/01/23 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
2018/03/13 Javascript
JS内部事件机制之单线程原理
2018/07/02 Javascript
VUE DOM加载后执行自定义事件的方法
2018/09/07 Javascript
探索JavaScript中私有成员的相关知识
2019/06/13 Javascript
JS实现页面数据懒加载
2020/02/13 Javascript
在Python的web框架中中编写日志列表的教程
2015/04/30 Python
Python的Django框架中消息通知的计数器实现教程
2016/06/13 Python
利用Anaconda完美解决Python 2与python 3的共存问题
2017/05/25 Python
Python 实现淘宝秒杀的示例代码
2018/01/02 Python
Python使用matplotlib实现基础绘图功能示例
2018/07/03 Python
Python补齐字符串长度的实例
2018/11/15 Python
python3利用Socket实现通信的方法示例
2019/05/06 Python
Python正则表达式匹配数字和小数的方法
2019/07/03 Python
我的大学生活职业生涯规划
2014/01/02 职场文书
求职信的七个关键技巧
2014/02/05 职场文书
大班上学期幼儿评语
2014/04/30 职场文书
企业宣传标语
2014/06/09 职场文书
个人德育工作总结
2015/03/05 职场文书
写给纪委的违纪检讨书
2015/05/05 职场文书
2015年学校精神文明工作总结
2015/05/27 职场文书
2016年春季运动会广播稿
2015/08/19 职场文书
三十年再续同学情倡议书
2019/11/27 职场文书
深入解析MySQL索引数据结构
2021/10/16 MySQL