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 获取当前时间戳的代码
Aug 05 Javascript
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
Nov 23 Javascript
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
Dec 28 Javascript
JS 获取select(多选下拉)中所选值的示例代码
Aug 02 Javascript
jQuery中odd选择器的定义和用法
Dec 23 Javascript
js面向对象之静态方法和静态属性实例分析
Jan 10 Javascript
纯JS代码实现一键分享功能
Apr 20 Javascript
JS控制HTML元素的显示和隐藏的两种方法
Sep 27 Javascript
Angular X中使用ngrx的方法详解(附源码)
Jul 10 Javascript
vue router 源码概览案例分析
Oct 09 Javascript
js获取form表单中name属性的值
Feb 27 Javascript
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
May 30 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
smtp邮件发送一例
2006/10/09 PHP
php中计算中文字符串长度、截取中文字符串的函数代码
2011/08/09 PHP
PHP json格式和js json格式 js跨域调用实现代码
2012/09/08 PHP
Linux(CentOS)下PHP扩展PDO编译安装的方法
2016/04/07 PHP
thinkphp制作404跳转页的简单实现方法
2016/09/22 PHP
php表单加入Token防止重复提交的方法分析
2016/10/10 PHP
PHP 传输会话curl函数的实例详解
2017/09/12 PHP
不错的新闻标题颜色效果
2006/12/10 Javascript
最短的javascript:地址栏载入脚本代码
2011/10/13 Javascript
使用Node.js为其他程序编写扩展的基本方法
2015/06/23 Javascript
理解Javascript的call、apply
2015/12/16 Javascript
JavaScript中关于class的调用方法
2017/11/28 Javascript
JavaScript简单编程实例学习
2020/02/14 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
2020/07/28 Javascript
Openlayers实现测量功能
2020/09/25 Javascript
编写Python脚本使得web页面上的代码高亮显示
2015/04/24 Python
轻松掌握python设计模式之访问者模式
2016/11/18 Python
python 反向输出字符串的方法
2018/07/16 Python
Python匿名函数/排序函数/过滤函数/映射函数/递归/二分法
2019/06/05 Python
Python编程实现tail-n查看日志文件的方法
2019/07/08 Python
Django组件content-type使用方法详解
2019/07/19 Python
Django 实现 Websocket 广播、点对点发送消息的代码
2020/06/03 Python
详解如何修改python中字典的键和值
2020/09/29 Python
CSS3等相关属性制作分页导航实现代码
2012/12/24 HTML / CSS
HTML5+JS实现俄罗斯方块原理及具体步骤
2013/11/29 HTML / CSS
惊艳的手工时装首饰:Migonne Gavigan
2018/02/23 全球购物
YOOX台湾:意大利奢侈品电商
2018/10/13 全球购物
经济实惠的豪华家具:My-Furniture
2019/03/12 全球购物
销售主管的自我评价分享
2014/01/03 职场文书
白酒市场开发计划书
2014/01/09 职场文书
创建精神文明单位实施方案
2014/03/08 职场文书
小学安全教育月活动总结
2014/07/07 职场文书
辞职信模板(中英文版)
2015/02/27 职场文书
毕业设计论文致谢词
2015/05/14 职场文书
《司马光》教学反思
2016/02/22 职场文书
关于MySQL中的 like操作符详情
2021/11/17 MySQL