jquery图片轮播原理及实现

轮播的原理:
1.很多时候使用ul列表去展示，这有一些好处，比如float对齐之类的，当然直接用p或者div也行。
2.了解overflow属性。在溢出情况下的处理。其实轮播就是不断的处理li溢出的情况。
3.jQuery animate的动画效果。也可以使用setInterval。
4.对定位的了解，margin和position。
5.循环轮播。需要对节点进行重新的修改。
具体而言就是在轮播到最后一张图片的时候，修改节点，将第一个节点，添加到列表的最后一个位置。

如下：

1
2
$(this).css({'margin-left':0}).children('li').last()
.after($(this).children('li').first());

以下为实现代码
html代码

1
2
3
4
5
6
7
8
<div class="list" id="slide">
    <ul>
        <li><img src = "1.jpg" width="538" height="198"/></li>
        <li><img src = "2.jpg" width="538" height="198"/></li>
        <li><img src = "3.jpg" width="538" height="198"/></li>
        <li><img src = "4.jpg" width="538" height="198"/></li>
    </ul>
</div>

css样式

1
2
3
.list{width:538px;height:198px;overflow:hidden;margin:50px auto;}  
.list ul{width:2152px;height:198px;margin:0;padding:0;}  
.list ul li{float:left;width:538px;}

javascript代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
(function($){  
    var silde = {  
        init:function(){  
            this.auto();  
        },  
        auto:function(){  
            var _root = this,  
            $ul = $("#sidle").find("ul"),  
            $lis = $ul.children("li"),  
            width = $lis.eq(0).width();  
            setInterval(function(){  
                $ul.animate({'margin-left':'-'+ width +'px'},  
                'slow',  
                function(){  
                //此处保证能循环轮播  
                //将已经轮播过的节点的第一张图片添加到末尾的位置  
	            //再将margin-left重置为0px;  
                //这样就能一直的循环下去.  
                    $ul.css({'margin-left':0}).children('li').last()
                    .after($ul.children('li').first());  
                });  
            },2000);  
        }  
    };  
    $(function(){silde.init();})  
})(jQuery);

效果展示：点击demo

另外，看到一个封装很好的轮播组件，代码写的很漂亮，效果：点击demo
参考：javascript仿QQ滑动菜单

参考资料
jQuery深入之大图轮播原理!