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

<head>

<title>仿土豆首页新闻图片展示</title>

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

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

<ul>

</ul>

</div>

<p></p>

<ul>

</ul>

</div>

</body>

</html>

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

jquery 新闻图片展示 仿土豆

jquery 新闻图片展示仿土豆