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
<!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
作者：黑曜石
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· [AI/GPT/综述] AI Agent的设计模式综述