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 数组的 uniq 方法
Jan 23 Javascript
js 鼠标点击事件及其它捕获
Jun 04 Javascript
基于Jquery制作的幻灯片图集效果打包下载
Feb 12 Javascript
JS操作iframe里的dom(实例讲解)
Jan 29 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
May 05 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
Jul 28 Javascript
ES6中新增的Object.assign()方法详解
Sep 22 Javascript
深入理解Vue.js源码之事件机制
Sep 27 Javascript
vue-router实现编程式导航的代码实例
Jan 19 Javascript
node.js的http.createServer过程深入解析
Jun 06 Javascript
JS数组的常用10种方法详解
May 08 Javascript
nuxt静态部署打包相对路径操作
Nov 06 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
PHP面向对象三大特点学习(充分理解抽象、封装、继承、多态)
2012/05/07 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
PHP实现多关键字加亮功能
2016/10/21 PHP
php curl常用的5个经典例子
2017/01/20 PHP
在图片上显示左右箭头类似翻页的代码
2013/03/04 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
2013/06/05 Javascript
XMLHttpRequest处理xml格式的返回数据(示例代码)
2013/11/21 Javascript
require.js深入了解 require.js特性介绍
2014/09/04 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
2015/06/05 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
2016/07/25 Javascript
jQuery检查元素存在性(推荐)
2016/09/17 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
2017/02/04 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
2017/05/17 Javascript
详谈js对url进行编码和解码(三种方式的区别)
2017/08/16 Javascript
vue awesome swiper异步加载数据出现的bug问题
2018/07/03 Javascript
mpvue全局引入sass文件的方法步骤
2019/03/06 Javascript
使用Python机器学习降低静态日志噪声
2018/09/29 Python
python之pyqt5通过按钮改变Label的背景颜色方法
2019/06/13 Python
python获取网络图片方法及整理过程详解
2019/12/20 Python
解决python多线程报错:AttributeError: Can't pickle local object问题
2020/04/08 Python
Python对excel的基本操作方法
2021/02/18 Python
ColourPop美国官网:卡拉泡泡,洛杉矶彩妆品牌
2019/04/28 全球购物
美津浓巴西官方网站:Mizuno巴西
2019/07/24 全球购物
施华洛世奇中国官网:SWAROVSKI中国
2020/06/16 全球购物
继电保护工岗位职责
2014/01/05 职场文书
机械专业求职信
2014/05/25 职场文书
学生未请假就回家检讨书
2014/09/22 职场文书
团员个人总结
2015/02/26 职场文书
小学班主任工作总结2015
2015/04/07 职场文书
售后服务质量承诺书
2015/04/29 职场文书
第二次离婚起诉书
2015/05/18 职场文书
白银帝国观后感
2015/06/17 职场文书
售房协议书范本
2015/08/11 职场文书
2016年春季运动会通讯稿
2015/11/25 职场文书
2019垃圾分类宣传口号汇总
2019/08/16 职场文书
基于Go Int转string几种方式性能测试
2021/04/28 Golang