温馨提示：如果图片不显示，刷新即可！还是不能显示的话，点击打开。
推荐理由：此款切换效果清新飘逸，洒脱自如而又不显凌乱，整体效果几近完美。
灵感来源：太平洋女性网 http://www.pclady.com.cn/
效果欣赏：
 此主题相关图片如下：
样式及代码：
参考样式：
<A onmouseover=content_mouse(2) href="{NS:FS_NewsURL}">
<DIV class=title id=line2>{NS:FS_NewsTitle}</DIV></A>
<DIV class=line_content id=line_content2>
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD vAlign=top align=middle width=175>
<TABLE height=20 cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=165 border=0>
<TBODY>
<TR>
<TD class="f12b l24"><IMG style="MARGIN-TOP: 5px; FLOAT: left" src="lunhuan/06beauty_123.gif"> <A href="{NS:FS_NewsURL}" target=_blank>{NS:FS_NewsTitleAll}</A><BR></TD></TR>
<TR>
<TD class="l22 c4">{NS:FS_NewsNaviContent}……</TD></TR>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=185><A href="{NS:FS_NewsURL}" target=_blank><IMG height=190 alt={NS:FS_NewsTitleAll} src="{NS:FS_SmallPicPath}" width=185 border=0></A></TD></TR></TBODY></TABLE></DIV>
代码及标签：
<SCRIPT type=text/javascript>
function show_gg(span_gg,gg){
document.getElementById(gg).innerHTML=document.getElementById(span_gg).innerHTML;
document.getElementById(span_gg).innerHTML="";
}
</SCRIPT>
<META content="MSHTML 6.00.3790.2759" name=GENERATOR></HEAD>
<BODY><SPAN class=spanclass>
</SPAN>
<DIV class=main>
<DIV class="main" >
<TABLE cellSpacing=0 cellPadding=0 width=562 align=left bgColor=#ffffff
border=0>
<TBODY>
<TR>
<TD vAlign=top width=562>
<DIV id=line_lay><!--切换1 start --><A onmouseover=content_mouse(1)>
<DIV class=title id=line1></DIV></A>
<DIV class=line_content id=line_content1 style="DISPLAY: block"></DIV><!--切换1 end --><!--切换2 start -->{FS400_切换标签一}
<!--切换2 end --><!--切换3 start -->{FS400_切换标签二}<!--切换3 end --><!--切换4 start -->{FS400_切换标签三}<!--切换5 start -->{FS400_切换标签四}<!--切换5 end --><!--切换6 start -->{FS400_切换标签五}<!--切换6 end --></DIV>
<SCRIPT language=javascript>
var timeout2=7000; //切换时间
var timeout3=10000; //mouse over 后切换时间
var now_content=1;
var total_content=6;
var way=1;
var start_content=Math.round(Math.random()*(total_content-1))+1; //除广告为第一显示外
function content_mouse(num){
now_content=num;
window.clearInterval(theTimer2);
for (var i=1;i<=total_content;i++){
document.getElementById('line_content'+i).style.display='none';
}
document.getElementById('line_content'+num).style.display='block';
theTimer2=setTimeout('change_content()', timeout3);
}
function change_content(){
for (var i=1;i<=total_content;i++){
document.getElementById('line_content'+i).style.display='none';
}
document.getElementById('line_content'+now_content).style.display='block';
if (way) now_content++;
else now_content--;
if(now_content>total_content) {now_content=total_content-1;way=0;}
else if(now_content==0) {now_content=1;way=1;}
theTimer2=setTimeout('change_content()', timeout2);
}
theTimer2=setTimeout(function(){now_content=start_content;change_content();}, timeout2);
</SCRIPT>
</TD>
<TD class=k4 vAlign=top align=middle width=177></TD>
</TR></TBODY></TABLE></DIV></DIV>
<!--精彩推荐：此处就是打开页面显示的第一幅图，仍然可以用标签表现，也可做成固定的-->
<DIV class=spanclass id=span_line_content1><A
href="http:///"
target=_blank><img height=190 src="lunhuan/kafei_360_x90.jpg"
width=360></A></DIV>
<SCRIPT>
show_gg('span_line_content1','line_content1');
</SCRIPT>
<DIV class=main></DIV>
说明：
1、附件里提供了完整的源文件及演示，其实我们要的只是这种切换效果，至于每个表里加什么就看大家的喜好了，可以是每个栏目的几个最新新闻或推荐新闻，也可以是一篇文章带图片导读的，甚至也可以是一个频道、一个栏目的导读，大家可以随心所欲的编排里面的内容。
2、本例中涉及的样式在附件中已完整提供。
3、如有不明白的，可以参考我提供的完整的源代码
4、只要大家喜欢，还有更多精彩效果会陆续展示给大家。
附件下载：
点击浏览该文件
|
