一直觉得土豆的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
<!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