Jony's Blog

在做一个刷淘宝信用的网站时，需要一个跑马灯的广告效果。网上找的那种用 table 的不太好用，便自己动手写一个。因为程序是用 PHPCMS，其自带了 JQuery，自然也用 JQuery 来实现了。暂时写了个简单的，以后有时间再完善吧。

html 部分：

<div id=”marqee”>
    <div id=”leftButton”></div>
    <div id=”marqeeArea”>
        <ul>
            <li><img src=”1.gif” /></li>
            <li><img src=”2.gif” /></li>
            <li><img src=”3.gif” /></li>
        </ul>
    </div>
    <div id=”rightButton”></div>
</div>

CSS 部分：

#marqee{ width:960px; height:61px;}
#marqee #leftButton{ width:24px; height:61px; float:left; cursor:pointer;}
#marqee #rightButton{ width:24px; height:61px; float:left; cursor:pointer;}
#marqee #marqeeArea{ position:relative; width:912px; height:61px; overflow:hidden; float:left;}
#marqee #marqeeArea ul{ position:relative; display:block; height:61px; overflow:hidden; list-style:none;}
#marqee #marqeeArea ul li{ width:121px; height:61px; float:left; text-align:center;}

JS 部分：

$(document).ready(function(){
    var liItem = $(‘#marqeeArea>ul>li’);
    var liTotel = liItem.length;
    var i = 0;
    var marqee_way = ‘left’;

    $(‘#marqeeArea>ul’).css(‘width’,100*liTotel);

    for(i;i<liTotel;i++){
        var imgWidth = liItem.eq(i).children(‘img’).attr(‘width’);
        var imgHeight = liItem.eq(i).children(‘img’).attr(‘height’);

        if(imgWidth/imgHeight > 100/61){
            if(imgWidth > 100){
                liItem.eq(i).children(‘img’).attr(‘width’,100);
                liItem.eq(i).children(‘img’).attr(‘height’,imgHeight*100/imgWidth);
            }
        }else{
            if(imgHeight > 100){
                liItem.eq(i).children(‘img’).attr(‘height’,61);
                liItem.eq(i).children(‘img’).attr(‘width’,imgWidth*61/imgHeight);
            }
        }

        var mtop = (61-liItem.eq(i).children(‘img’).attr(‘height’))/2;

        liItem.eq(i).children(‘img’).css(“margin-top”,mtop);
    }

    $.extend({
        marqeemGo:function(type){
            if(type == ‘left’){
                $(‘#marqeeArea>ul’).append(“<li>”+$(‘#marqeeArea>ul>li:first-child’).html()+”</li>”);
                $(‘#marqeeArea>ul’).animate(
                    {left:”-121px”},
                    500,
                    “linear”,
                    function(){
                        $(‘#marqeeArea>ul’).css(“left”,”0px”);
                        $(‘#marqeeArea>ul>li:first-child’).remove()
                    }
                );
            }else if(type == ‘right’){
                $(‘#marqeeArea>ul’).css(“left”,”-121px”);
                $(‘#marqeeArea>ul’).prepend(“<li>”+$(‘#marqeeArea>ul>li:last-child’).html()+”</li>”);
                $(‘#marqeeArea>ul’).animate(
                    {left:”0px”},
                    500,
                    “linear”,
                    function(){
                        $(‘#marqeeArea>ul>li:last-child’).remove()
                    }
                );
            }
        }
    });

    var t = setInterval(“$.marqeemGo(‘”+marqee_way+”‘)”,2000);

    $(“#marqeeArea”).hover(
        function(){t = clearInterval(t)},
        function(){t = setInterval(“$.marqeemGo(‘”+marqee_way+”‘)”,2000)}
    );

    $(“#leftButton”).click(function(){
        marqee_way = “left”;
        t = clearInterval(t);
        t = setInterval(“$.marqeemGo(‘”+marqee_way+”‘)”,2000);
    });

    $(“#rightButton”).click(function(){
        marqee_way = “right”;
        t = clearInterval(t);
        t = setInterval(“$.marqeemGo(‘”+marqee_way+”‘)”,2000);
    });
});