自己写的一个JQUERY焦点图

以前写了一个JQUERY焦点图插件。但是过于冗长，其逻辑非常费解。今天心血来潮，决定重新写一下。暂时还没有封装成插件。回头抽时间封装成插件。

我的焦点图要实现的功能如下：

1. HTML结构异常简单
2. 所有样式在CSS中实现，而不是在JS中实现，便于修改样式。
3. 实现自动轮播（废话）
4. 有标题，有导读
5. 有方向控制，向左滚动，向右滚动

之前写的当然都满足我的这些要求。但是不够简练。今天写的，我自己感觉好多了。

首先，HTML结构如下：

<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>

然后是CSS。我是用SASS写的。代码如下：

#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;}
}

编译成CSS如下：

#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; }

最后是JQUERY代码，如下：

$(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();
    });
});

时间不早，该睡觉了。明天继续努力学习！！