仿网易新闻的“头图新闻”的图片转换效果--javascript 教程及特效

<link href="http://goshyboy.com/js/inc/js-style.css" rel="stylesheet" type="text/css" />
<base href=http://goshyboy.com/js/>
<style>
<!--
.specialTitle {font-size:17px; font-weight:bold;}
.specialTitle2 {font-size:18px; font-weight:bold;}
.specialTitle3 a {color:#bc2931; text-decoration:underline;}
.specialTitle4 {font-size:14px;}
.specialTitle5 {line-height:180%;}
.specialTitle6 {color:#fff}
.specialTitle6 a ‚.specialTitle6 a:visited {color:#fff}
.specialTitle6 a:hover {color:#FFFC00;}
.specialTitle7 {font-size:12px; color:#515151;}
.imgBorder {border:1px solid #000000;}
.textCenter{text-align:center;}
td {line-height:160%; text-align:left;}
/* 头图 */
.focusPic{margin:0 auto; width:240px; text-align:left}
.focusPic .pic{margin:0 auto; width:240px; height:180px; padding:2px 0 0;}
.focusPic h2{ float:left; width:240px;padding:4px 0 3px 0; font-weight:100; font-size:12px; text-align:left;}
.focusPic p{float:left; width:226px;line-height:160%; margin:0; text-align:left;padding:0 0 10px 12px;}
.focusPic p img {margin:0px 0 2px;}
.focusPic .more{ margin:0 auto; width:240px; }
.focusPic .more .textNum{float:right; margin:0 auto;}
.focusPic .more .textNum .text{float:left; padding:4px 12px 0 0; color:#666;}
.focusPic .more .textNum .num{float:left; width:100px; height:15px;}
.focusPic .more .textNum .bg1{ background:url(http://goshyboy.com/js/img/num1.gif);}
.focusPic .more .textNum .bg2{ background:url(http://goshyboy.com/js/img/num2.gif);}
.focusPic .more .textNum .bg3{ background:url(http://goshyboy.com/js/img/num3.gif);}
.focusPic .more .textNum .bg4{ background:url(http://goshyboy.com/js/img/num4.gif);}
.focusPic .more .textNum .num ul{ float:left; width:113px;}
.focusPic .more .textNum .num li{float:left; width:20px; line-height:15px; font-weight:bold;display:block; color:#fff; list-
style-type:none; padding:5px 0 0 8px;}
.focusPic .more .textNum .num li a{color:#fff; padding:0 5px; }
.focusPic .more .textNum .num li a:visited{color:#fff;}
.focusPic .more .textNum .num li a:hover{color:#ff0;}
.sp_gold {font-size: 12px;line-height:160%;color:#FDC292; }
-->
</style><table style="border:1px solid #000000;" ><tr width="250" >
<td align="left" valign="middle" ><script language="JavaScript" type="text/javascript">
var nn;
nn=1;
setTimeout('change_img()'‚3000);
function change_img()
{
if(nn>4) nn=1
setTimeout('setFocus1('+nn+')'‚3000);
nn++;
tt=setTimeout('change_img()'‚3000);
}
function setFocus1(i)
{
selectLayer1(i);
}
function selectLayer1(i)
{
switch(i)
{
case 1:
document.getElementById("focusPic1").style.display="block";
document.getElementById("focusPic2").style.display="none";
document.getElementById("focusPic3").style.display="none";
document.getElementById("focusPic4").style.display="none";
document.getElementById("focusPic1nav").style.display="block";
document.getElementById("focusPic2nav").style.display="none";
document.getElementById("focusPic3nav").style.display="none";
document.getElementById("focusPic4nav").style.display="none";
break;
case 2:
document.getElementById("focusPic1").style.display="none";
document.getElementById("focusPic2").style.display="block";
document.getElementById("focusPic3").style.display="none";
document.getElementById("focusPic4").style.display="none";
document.getElementById("focusPic1nav").style.display="none";
document.getElementById("focusPic2nav").style.display="block";
document.getElementById("focusPic3nav").style.display="none";
document.getElementById("focusPic4nav").style.display="none";
break;
case 3:
document.getElementById("focusPic1").style.display="none";
document.getElementById("focusPic2").style.display="none";
document.getElementById("focusPic3").style.display="block";
document.getElementById("focusPic4").style.display="none";
document.getElementById("focusPic1nav").style.display="none";
document.getElementById("focusPic2nav").style.display="none";
document.getElementById("focusPic3nav").style.display="block";
document.getElementById("focusPic4nav").style.display="none";
break;
case 4:
document.getElementById("focusPic1").style.display="none";
document.getElementById("focusPic2").style.display="none";
document.getElementById("focusPic3").style.display="none";
document.getElementById("focusPic4").style.display="block";
document.getElementById("focusPic1nav").style.display="none";
document.getElementById("focusPic2nav").style.display="none";
document.getElementById("focusPic3nav").style.display="none";
document.getElementById("focusPic4nav").style.display="block";
break;
}
}
</script>
<div class="focusPic">
<div id="focusPic1" style="display: block;">
<!!(ThePillsS)>
<div class="pic"><a
href=""><img src="img/20060418105837569d4.jpg" alt="少年犯控诉：青春被网络不良内容吞噬"
width="240" height="180" border="0" /></a></div>
<h2>·<a href="mouse.asp">少年犯控诉：青春被网络不良内容吞噬</a></h2><!!(ThePillsE)>
</div>
<div id="focusPic2" style="display: none;">
<!!(ThePillsS)>
<div class="pic"><a
href="mouse.asp"><img src="img/2006041019392694fdd.jpg" alt="网易等网站联合发出文明办网倡议
书" width="240" height="180" border="0" /></a></div>
<h2>·<a href="js.asp">网易等网站联合发出文明办网倡议书</a></h2><!!(ThePillsE)>
</div>
<div id="focusPic3" style="display: none;">
<!!(ThePillsS)>
<div class="pic"><a
href="flash.asp"><img src="img/20060418095744da055.jpg" alt="父女建网站聚集30万环保者"
width="240" height="180" border="0" /></a></div>
<h2>·<a href="flash.asp">父女建网站聚集30万环保者</a></h2><!!(ThePillsE)>
</div>
<div id="focusPic4" style="display: none;">
<!!(ThePillsS)>
<div class="pic"><a
href="art.asp"><img src="img/20060410193144cb326.jpg" alt="按荣辱观要求倡导文明办网文明上网"
width="240" height="180" border="0" /></a></div>
<h2>·<a href="dj.asp">按荣辱观要求倡导文明办网文明上网</a></h2><!!(ThePillsE)>
</div>
<div class="more">
<div class="textNum">
<div class="text">> 更多头图新闻</div>
<div class="num bg1" id="focusPic1nav" style="display: block;">
<ul>
<li>1</li>
<li><a href="javascript:setFocus1(2);" target="_self">2</a></li>
<li><a href="javascript:setFocus1(3);" target="_self">3</a></li>
<li><a href="javascript:setFocus1(4);" target="_self">4</a></li>
</ul>
</div>
<div class="num bg2" id="focusPic2nav" style="display: none;">
<ul>
<li><a href="javascript:setFocus1(1);" target="_self">1</a></li>
<li>2</li>
<li><a href="javascript:setFocus1(3);" target="_self">3</a></li>
<li><a href="javascript:setFocus1(4);" target="_self">4</a></li>
</ul>
</div>
<div class="num bg3" id="focusPic3nav" style="display: none;">
<ul>
<li><a href="javascript:setFocus1(1);" target="_self">1</a></li>
<li><a href="javascript:setFocus1(2);" target="_self">2</a></li>
<li>3</li>
<li><a href="javascript:setFocus1(4);" target="_self">4</a></li>
</ul>
</div>
<div class="num bg4" id="focusPic4nav" style="display: none;">
<ul>
<li><a href="javascript:setFocus1(1);" target="_self">1</a></li>
<li><a href="javascript:setFocus1(2);" target="_self">2</a></li>
<li><a href="javascript:setFocus1(3);" target="_self">3</a></li>
<li>4</li>
</ul>
</div>
</div>
</div>
</div></td></tr></table>

javascript分割字符串2006-4-29

asp实现上一篇下一篇2006-4-29

浅谈自动采集程序及入库2006-4-29

ASP实现对新闻的分页例子2006-4-29

ASP对Cookies操作的详细介绍2006-4-29

仿网易新闻的“头图新闻”的图片转换效果2006-4-29

百度中关于site命令和inurl命令之我见2006-4-29

Robots.txt指南2006-4-29

robots.txt和Robots META标签2006-4-29

网页中的透明背景显示2006-4-29

您的姓名： 匿名发送

电子邮件：

评论内容：
不能超过100个字符

所有留言只代表网友个人观点，不代表本站观点。
请各位遵纪守法并注意语言文明。