首页 > 代码库 > 一款基于jQuery的热点新闻Tab选项卡插件
一款基于jQuery的热点新闻Tab选项卡插件
今天要分享的jQuery焦点图插件非常适合展示热点新闻，之前我们分享过好多基于jQuery的焦点图插件，效果都还很不错。它可以在图片上方展示文字标题，并且焦点图的切换按钮时tab风格的，图片切换也十分流畅。效果图如下：
在线预览 源码下载
html代码：
<div class="msn-focus" style="margin: 30px auto"> <div class="hd"> <ul> <li class=" "><a target="_blank" href="#">资讯</a></li> <li class=" "><a target="_blank" href="#">环球</a></li> <li class=" "><a target="_blank" href="#">汽车</a></li> <li class=" "><a target="_blank" href="#">娱乐</a></li> <li class="on"><a target="_blank" href="#">奢品</a></li> <li><a target="_blank" href="#">历史</a></li> </ul> </div> <div class="bd"> <ul> <li style="display: none;"><a href="#" target="_blank"> <img src="photo/1.jpg"></a> <p> <i></i><a href="#">莫言造访瑞典一中学展示书法技艺 </a> </p> </li> <li style="display: none;"><a href="#" target="_blank"> <img src="photo/2.jpg"></a> <p> <i></i><a href="#">美高中跳“江南style”被称最烂 </a> </p> </li> <li style="display: none;"><a href="#" target="_blank"> <img src="photo/3.jpg"></a> <p> <i></i><a href="#">本周上市新车一览 雪铁龙C4 L领衔 </a> </p> </li> <li style="display: none;"><a href="#" target="_blank"> <img src="photo/4.jpg"></a> <p> <i></i><a href="#">Hello World </a> </p> </li> <li style="display: list-item;"><a href="#" target="_blank"> <img src="photo/5.jpg"></a> <p> <i></i><a href="#">百年品牌记：中国老字号如何重生？ </a> </p> </li> <li style="display: none;"><a href="#" target="_blank"> <img src="photo/6.jpg"></a> <p> <i></i><a href="#">我从哪里来？图解史上各国性教育尺度 </a> </p> </li> </ul> <a class="prev" href="javascript:void(0)"></a><a class="next" href="javascript:void(0)"> </a> </div> </div>
via:http://www.w2bc.com/Article/12246
一款基于jQuery的热点新闻Tab选项卡插件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。