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,没设定

相关文章

  • JQuery+Ajax无刷新分页的实例代码

    JQuery+Ajax无刷新分页的实例代码

    本篇文章主要是对JQuery+Ajax无刷新分页的实例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • IE6下opacity与JQuery的奇妙结合

    IE6下opacity与JQuery的奇妙结合

    在群里看见有人贴出一个页面问opacity不支持IE6,有什么好的支持方法没。贴出第一眼就发现用了jq库,当场就想到了支持的。 但很多人回答用CSS滤镜,当我看到这个答案的时候。有些很吃惊。难道大家都不知道JQ是支持opacity兼容IE6+的吗? 开始他们都不相信。JQ怎么配合使用。于是就写了一个简单的代码给他们。
    2013-03-03
  • 基于zepto的移动端轻量级日期插件--date_picker

    基于zepto的移动端轻量级日期插件--date_picker

    这篇文章主要介绍了基于zepto的移动端轻量级日期插件--date_picker,需要的朋友可以参考下
    2016-03-03
  • 使用jQuery的ajax方法向服务器发出get和post请求的方法

    使用jQuery的ajax方法向服务器发出get和post请求的方法

    这篇文章主要介绍了使用jQuery的ajax方法向服务器发出get和post请求的方法,需要的朋友可以参考下
    2017-01-01
  • jQuery Validation PlugIn的使用方法详解

    jQuery Validation PlugIn的使用方法详解

    这篇文章主要介绍了jQuery Validation PlugIn的使用方法,需要的朋友可以参考下
    2015-12-12
  • jQuery Ajax()方法使用指南

    jQuery Ajax()方法使用指南

    jQuery.ajax()功能比较强大,可配置的参数比较多,本文主要对这个方法的注意事项进行总结。有相同需求的童鞋们也来仔细看看吧,希望对大家能有所帮助
    2014-11-11
  • 浅谈jquery中next与siblings的区别

    浅谈jquery中next与siblings的区别

    下面小编就为大家带来一篇浅谈jquery中next与siblings的区别。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • jquery树形菜单效果的简单实例

    jquery树形菜单效果的简单实例

    下面小编就为大家带来一篇jquery树形菜单效果的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • jQuery图片轮播实现并封装(一)

    jQuery图片轮播实现并封装(一)

    这篇文章主要为大家详细介绍了jQuery图片轮播实现并封装,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • jQuery实现移动端下拉展现新的内容回弹动画

    jQuery实现移动端下拉展现新的内容回弹动画

    这篇文章主要介绍了jQuery实现移动端下拉展现新的内容回弹动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06

最新评论