MiThink 记事本

第一次使用Jquery制作一个图片轮播的效果，实现了基本功能，同一个页面可多次调用，鼠标悬停效果等。

结构：

<div id="sider" class="sider">
<ul class="thumb">
    <li><img src="sr.jpg" /></li>
    <li><img src="t.jpg" /></li>
    <li><img src="http://ww3.sinaimg.cn/bmiddle/6b13f227jw1elxl3wdwpzj20c8085mxd.jpg" /></li>
    <li><img src="http://ww3.sinaimg.cn/bmiddle/6310d41cjw1elx06pogrlj20kw0eetc4.jpg" /></li>
</ul>
<ul class="icon">
    <li><span> </span></li>
    <li><span> </span></li>
    <li><span> </span></li>
    <li><span> </span></li>
</ul>
</div>

CSS样式：

<style type="text/css">
    .sider{width:175px;height: 220px;overflow: hidden;position: relative;}
    ul{list-style-type: none;margin:0;padding: 0;height:220px;position:absolute;}
    li{float:left;}
    .icon{left:0;bottom:0;height:26px;}
    .icon span{display:inline-block;width:10px;height: 10px;margin:0 0 10px 10px;font-size: 0; background-color:red;}
    .sider img{width: 175px;height: 220px;}
    .on span{background-color:green;}
</style>

Javascript代码：

<script type="text/javascript">
    var sider = function (id) {
        var a = $("#"+id);
        var b = a.find('.thumb');
        var bb = a.find('.icon');
        var c = b.find('li');
        var d = c.outerWidth(true);
        var e = 0;
        var f = 5000;

        b.css("width",(c.length * d) + "px");
        bb.find("li").eq(0).addClass("on");

        var sider_play = function(){
                        e++;
                        if(e%c.length == 0){
                            b.animate({"left":0},500);
                            e = 0;  
                        }else{
                            b.animate({"left":"-"+(e*d)},500);
                        }
                        bb.find("li").eq(e).addClass("on").siblings().removeClass("on");
                    };
                    
        var timeInterval = setInterval(sider_play,f);

        a.on({
            mouseenter:function(){
                clearInterval(timeInterval);
            },
            mouseleave:function(){
                timeInterval = setInterval(sider_play,f);
            }
        });

        bb.find("li").on("click",function(){
            e = bb.find("li").index(this) - 1;
            sider_play();
        });
    }
</script>

调用：

sider("sider"); //指定元素ID

运行效果演示：http://www.huison.cn/tool/sider.html