JQuery循环滚动图片代码
更新时间:2011年12月08日 23:19:46 作者:
每次滚动的长度不要固定死,可以直接获取图片宽度作为滚动的长度。这样当你的网站有很多地方需要这个效果的时候一个函数就可以搞定了
复制代码 代码如下:
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,没设定
相关文章
基于zepto的移动端轻量级日期插件--date_picker
这篇文章主要介绍了基于zepto的移动端轻量级日期插件--date_picker,需要的朋友可以参考下2016-03-03
使用jQuery的ajax方法向服务器发出get和post请求的方法
这篇文章主要介绍了使用jQuery的ajax方法向服务器发出get和post请求的方法,需要的朋友可以参考下2017-01-01
jQuery Validation PlugIn的使用方法详解
这篇文章主要介绍了jQuery Validation PlugIn的使用方法,需要的朋友可以参考下2015-12-12


最新评论