DIV:
$func_tabstrip(disp=2,tabs=3,para=News,summ=3,pics=6,len=28,rows=12,more=morewhiteplus.gif)$
CSS:
#ArticleList .app .thumbs{ float:left; display:block; margin-right:10px;}
#ArticleList .app .thumbs img{ width:198px; height:155px;}
#ArticleList .app .detail{ height:158px; overflow:hidden;}
#ArticleList .app .detail .title a{ font-size:14px; font-weight:bold;}
JS:
<script type="text/javascript">
jQuery(".news #Box0 ul").before("<li class=\"app\"><div class=\"num\"></div><div class=\"content\"></div></li>");
var len=jQuery(".news #Box0 .Summary").length;
for(var i=0;i<len;i++){jQuery(".news #Box0 .app .num").append("<span>"+(i+1)+"</span>");}
jQuery(".news #Box0 .Summary").css("display","none");
jQuery(".news #Box0 .app .content").html(jQuery(".news #Box0 .Summary:eq(0)").html());
jQuery(".news #Box0 .app").css("position","relative");
jQuery(".news #Box0 .app .num").css({"position":"absolute","z-index":"0","bottom":"10px","left":"69px"})
jQuery(".news #Box0 .app .num span").css({"display":"inline-block","background":"#c00","color":"#fff","margin":"2px","line-height":"14px","padding":"0 5px","cursor":"pointer"});
jQuery(".news .num span").click(function(){
var cur=jQuery(this).html();
jQuery(".news #Box0 .content").hide();
jQuery(".news #Box0 .Summary").css("display","none");
jQuery(".news #Box0 .content").html(jQuery(".news #Box0 .Summary:eq("+(cur-1)+")").html());
jQuery(".news #Box0 .content").show();
})
</script>
参考案例whjsrcb图样
![](http://wh.ac.cn/data/attachment/forum/201512/30/172250mf33e31b2dr4d227.jpg)
改动版本(去除数字,当前背景为桔色,按先后顺序依次轮换):
JS:
jQuery(".news #Box0 ul").before("<li class=\"app\"><div class=\"num\"></div><div class=\"content\"></div></li>");
var len=jQuery(".news #Box0 .Summary").length;
for(var i=0;i<len;i++){jQuery(".news #Box0 .app .num").append("<span> </span>");}
jQuery(".news #Box0 .Summary").css("display","none");
jQuery(".news #Box0 .app .content").html(jQuery(".news #Box0 .Summary:eq(0)").html());
jQuery(".news #Box0 .app").css("position","relative");
jQuery(".news #Box0 .app .num").css({"position":"absolute","z-index":"0","bottom":"2px","left":"86px"})
jQuery(".news #Box0 .app .num span").css({"display":"inline-block","background":"#c00","color":"#fff","margin":"2px","width":"14px","height":"14px","cursor":"pointer"});
jQuery(".news #Box0 .app .num span:eq(0)").css("background","#f60")
var cur=0;
function trig(){if(cur==6)cur=0;jQuery(".news .num span:eq("+cur+")").trigger("click");cur=cur+1;}
setInterval("trig()",5000);
jQuery(".news .num span").click(function(){
cur=jQuery(this).index();
jQuery(".news .num span").css("background","#c00");
jQuery(this).css("background","#f60");
jQuery(".news #Box0 .content").hide();
jQuery(".news #Box0 .Summary").css("display","none");
jQuery(".news #Box0 .content").html(jQuery(".news #Box0 .Summary:eq("+(cur)+")").html());
jQuery(".news #Box0 .content").show();
}) |