利用jquery实现向左滚动效果及offset的使用

 

昨天和今天做了一个轮播图，它的tab标签不是1,2,3这样的数据表示，而是使用圆圈表示，效果如下：

 

 

每个圆中是一个img标签，通过设置src可以指定图片。

点击每个圆， 下面的图片会向左滚动到对应的位置。

 

今天将记录下图片的滚动效果和箭头随着点击而变化位置的实现。

 

1、jquery实现向左滚动效果

  实现的原理：

<div id="outer">
    <div id="inner">
        <dl>
           //图片列表
        </dl>
    </div>
</div>    

outer的position设置为relative，inner的position设置为absolute,outer有个固定的Width，且设置overflow为hidden，这样就隐藏后面的图片。inner的宽度尽量设置大一点，能包裹所有的图片。这样，每当点击tab标签即圆圈的时候，通过jquery的动画animate函数设置inner的left即可。

主要的css为：

#outer {
    border: 1px solid #fff;
    width: 100%;
    overflow: hidden;
    position: relative;
    height: 230px;
}

#inner{
    width: 40000px;
    position: absolute;
    overflow: hidden;
    left: 0;
}

dl{
    width: 100%;
    display: inline-block;
    text-align: left;    
}

 

实现滚动效果的js为：

$("#inner").animate({"left":marginLeft+"px"},1000);

 

2、offset的使用

注意到上图的箭头，它会随着点击小圆圈的时候，圆圈慢慢放大后，箭头也会转移到该圆圈的下方，实现的方式就是通过offset来实现的。

首先，箭头是一个img标签，这个img的position为absolute，相对于outer。

然后，当点击圆圈时，会计算圆圈的宽度，圆圈的左偏移量。要想箭头对应正下方，则箭头的左偏移量则为 width/2+offsetLeft.

 

箭头的css:

#outer .arrow{
    position: absolute;
    left: 50%;
    top: 0px;
    margin-left: -10px;
    z-index: 1;
} 

 

箭头偏移量的设置方法：

//设置箭头的左偏移量
 setArrowLeft:function(){
    var width = this.option.cur_wrap_width;
    var offsetWidth = $(".cur_wrap").offset().left;
    var left = width / 2 + offsetWidth;
        $(".arrow").offset({left:left});
}

jquery提供的offset()方法可以获取到left，top的偏移量，同时，也可以通过

offset({left:left,top:top})设置偏移量。