jquery 新闻图片展示 仿土豆

      一直觉得土豆的UI非常漂亮，看到最近首页的新闻展示图片变了一个样，就学着用jquery做了一个，不过通过firebug看土豆时，发现也是用的jquery，不过估计脚本是压缩过的，看不到，反正我也没打算抄代码，只是想自己实现这个效果，调了两三个小时，算是搞定了吧，欢迎大家拍砖！

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head >
     < title > 仿土豆首页新闻图片展示 </ title >
     < script  src ="js/jquery.js"  type ="text/javascript" ></ script >
     < script  type ="text/javascript" >
        $(function() {
            var len = $("#img li").length;
            var index = 0;
            var adTimer;
            //广告先
            $("#imgBig").hover(function() {
                clearInterval(adTimer);
            }, function() {
                adTimer = setInterval(function() {
                    showImg(index);
                    index++;
                    if (index == len) { index = 0; }
                }, 2000);
            }).trigger("mouseleave");
            //再导航
            $("#img li").mouseover(function() {
                index = $("#img li").index(this);
                showImg(index);
            }).eq(0).mouseover();
        })
    function showImg(index) {
        var adHeight = $("#imgBig").height();
        $("#imgBig>ul").stop(true, false).animate({ top: -adHeight * index+"px" },1000);  //必须配合position:absolute
        $("#img li").removeClass("on").eq(index).addClass("on");
    }
     </ script >
     < style  type ="text/css" >
    *{}{margin:0;padding:0}
    ul li{}{list-style:none;display:inline;}
    #imgAd{}{margin:0 auto;padding:5px;width:580px;height:236px;position:relative;border:solid 1px red;display:block;}
    #imgBig{}{width:379px;height:233px;overflow:hidden;float:left;position:relative;}
    #imgBig ul{}{position:absolute;}
    #imgBig img{}{display:block;}
    #img{}{float:right;width:188px;}
    #img p{}{height:97px;}
    #img ul li{}{float:left;width:86px;height:64px;padding:2px;}
    #img img{}{display:block;width:86px;height:64px}
    .on{}{background:red;}
     </ style >
</ head >
< body >
     < div  id ="imgAd" >
         < div  id ="imgBig" >
             < ul >
                 < li >< img  src ="images/1big.jpg"  alt =""   /></ li >
                 < li >< img  src ="images/2big.jpg"  alt =""   /></ li >
                 < li >< img  src ="images/3big.jpg"  alt =""   /></ li >
                 < li >< img  src ="images/4big.jpg"  alt =""   /></ li >
             </ ul >
         </ div >
         < div  id ="img" >
             < p ></ p >
             < ul >
                 < li >< img  src ="images/1.jpg"  alt =""   /></ li >
                 < li >< img  src ="images/2.jpg"  alt =""   /></ li >
                 < li >< img  src ="images/3.jpg"  alt =""   /></ li >
                 < li >< img  src ="images/4.jpg"  alt =""   /></ li >
             </ ul >
         </ div >
     </ div >
</ body >
</ html >

另外附上DEMO地址： http://mail.popdiamond.com/webactive/tablegrid/showimg.htm

转载于:https://www.cnblogs.com/bestfc/archive/2009/08/05/1539678.html