自己写的一个JQUERY焦点图

<div id="FengFouse">
    <ul>
        <li><a href="#"><img src="image/1.jpg" alt="this is the fouse title 1" data-info="this is the fouse info for 1"></a></li>
        <li><a href="#"><img src="image/2.jpg" alt="this is the fouse title 2" data-info="this is the fouse info for 2"></a></li>
        <li><a href="#"><img src="image/3.jpg" alt="this is the fouse title 3" data-info="this is the fouse info for 3"></a></li>
        <li><a href="#"><img src="image/4.jpg" alt="this is the fouse title 4" data-info="this is the fouse info for 4"></a></li>
        <li><a href="#"><img src="image/5.jpg" alt="this is the fouse title 5" data-info="this is the fouse info for 5"></a></li>
    </ul>
</div>

#FengFouse {
    $width:500px;
    $height:400px;
    width: $width;height: $height;overflow: hidden;position: relative;
    .FousePic {
        p,strong {position: absolute;display: block;background:rgba(#000, 0.5);color: #fff;}
        p {border-radius: 5px;top: 30px;left: 30px;padding: 5px 10px;}
        strong {bottom: 0;left: 0;font-size: 14px;width: $width;text-indent: 10px;height: 36px;line-height: 36px;}
    }
    .FouseNum {
        position: absolute;right: 0;bottom: 0;height: 31px;
        li {
            float: left;height: 26px;line-height: 26px;background:rgba(#fff,0.5);width: 26px;
            color: #fff;margin-right: 5px;text-align: center;border-radius: 3px;cursor: pointer;
            &.on {background: #fff;color: #555;}
        }
    }
    .FouseLeft,.FouseRight {
        position: absolute;width: 30px;height: 80px;top: 160px;background:rgba(#000,0.5);left: 10px;cursor: pointer;
    }
    .FouseRight {right: 10px;left: auto;}
}

#FengFouse {
  width: 500px;
  height: 400px;
  overflow: hidden;
  position: relative;
}
#FengFouse .FousePic p, #FengFouse .FousePic strong {
  position: absolute;
  display: block;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
}
#FengFouse .FousePic p {
  border-radius: 5px;
  top: 30px;
  left: 30px;
  padding: 5px 10px;
}
#FengFouse .FousePic strong {
  bottom: 0;
  left: 0;
  font-size: 14px;
  width: 500px;
  text-indent: 10px;
  height: 36px;
  line-height: 36px;
}
#FengFouse .FouseNum {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 31px;
}
#FengFouse .FouseNum li {
  float: left;
  height: 26px;
  line-height: 26px;
  background: rgba(255, 255, 255, 0.5);
  width: 26px;
  color: #fff;
  margin-right: 5px;
  text-align: center;
  border-radius: 3px;
  cursor: pointer;
}
#FengFouse .FouseNum li.on {
  background: #fff;
  color: #555;
}
#FengFouse .FouseLeft, #FengFouse .FouseRight {
  position: absolute;
  width: 30px;
  height: 80px;
  top: 160px;
  background: rgba(0, 0, 0, 0.5);
  left: 10px;
  cursor: pointer;
}
#FengFouse .FouseRight {
  right: 10px;
  left: auto;
}

$(function(){

    var showWay = "";

    var Obj = $("#FengFouse");
    Obj.children('ul').addClass('FousePic');
    var Ul = Obj.children('.FousePic'),
        Li = Ul.children('li'),
        LiSize = Li.size();
    Li.each(function(){
        var T = $(this),
            I = T.index(),
            // A = T.children('a'),
            Img = T.find('img'),
            Title = Img.prop('alt'),
            Info = Img.data('info');
        T.append('<p>'+Info+'</p><strong>'+Title+'</strong>');
        if (I!=0) {
            T.hide();
        }
    });

    Obj.append('<div class="FouseLeft"></div><div class="FouseRight"></div><ul class="FouseNum"></ul>');

    var Num = Obj.children('ul.FouseNum');

    for (var i = 1; i <= LiSize; i++) {
        Num.append('<li>'+i+'</li>');
    }
    var NumLi = Num.children('li');
    NumLi.each(function(){
        var T = $(this),
            I = T.index();
        if (I==0) {
            T.addClass('on');
        }
        T.click(function() {
            T.addClass('on').siblings('li').removeClass('on');
            SandH(I);
        });
    });
    // 

    var FL = Obj.children('.FouseLeft'),
        FR = Obj.children('.FouseRight');

    FL.click(function(){
        GoLeft();
    });

    FR.click(function(){
        GoRight();
    });

    function GoLeft(){
        var I = Num.children('li.on').index()-1;
        if (I==-1) {
            var I = LiSize-1;
        }
        NumOn(I);
        SandH(I);
    }
    function GoRight(){
        var I = Num.children('li.on').index()+1;
        if (I==LiSize) {
            var I = 0;
        }
        NumOn(I);
        SandH(I);
    }
    function NumOn(I) {
        NumLi.eq(I).addClass("on").siblings().removeClass("on");
    };
    function SandH(I) {
        switch (showWay) {
        case "down":
            Li.eq(I).slideDown(500).siblings().slideUp(500);
            break;
        default:
            Li.eq(I).fadeIn(200).siblings().hide();
        }
    };


    function actionDo(){
        return setInterval(function(){
            GoRight();
        },2000);
    };

    var StopAct = actionDo();
    Obj.hover(function() {
        clearInterval(StopAct);
    }, function() {
        StopAct = actionDo();
    });
});