以下是 迅雷音乐频道今日焦点JS代码轮播滚动切换特效 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,焦点图,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为迅雷音乐频道今日焦点JS代码" />
<title>迅雷音乐频道今日焦点JS代码</title>
<LINK rev=stylesheet media=all href="css/news.css" type=text/css rel=stylesheet />
</head>
<body>
<div align="center">
<script language=javascript>
var CurrentHotScreen = 0 ;
function setHotQueryList(screen){
var Vmotion = "forward" ;
var MaxScreen = 7 ;
if (screen >= MaxScreen) {
screen = 0 ;
Vmotion = "reverse" ;
}
cleanallstyle();
document.getElementById("focus_"+screen).className = "up" ;
if(null!=hot_query_td.filters){
hot_query_td.filters[0].apply();
hot_query_td.filters[0].motion = Vmotion;
}
for (i=0;i<MaxScreen;i++) {
document.getElementById("switch_"+i).style.display = "none" ;
}
document.getElementById("switch_"+screen).style.display = "block" ;
if(null!=hot_query_td.filters){
hot_query_td.filters[0].play();
}
CurrentHotScreen = screen ;
}
function refreshHotQuery(){
refreshHotQueryTimer = null;
setHotQueryList(CurrentHotScreen+1);
refreshHotQueryTimer = setTimeout('refreshHotQuery();', 5000);
}
</script>
<DIV class=newsMain>
<DIV class=topNewsBox>
<DIV class=topNews>
<DIV class=topNewsPic>
<TABLE>
<TBODY>
<TR>
<TD id=HotSearchList
style="FILTER: progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.25,wipestyle=0,motion=forward)">
<DIV id=switch_0>
<A onclick=setClick();
href="#"
blockid="931">
<IMG alt="信宣传新专辑 与徐静蕾合作很紧张"
src="images/01.jpg" />
</A>
</DIV>
<DIV id=switch_1>
<A onclick=setClick();
href="#"
blockid="931">
<IMG alt="蒲巴甲北京录新歌 首张EP杀青在即"
src="images/02.jpg" />
</A>
</DIV>
<DIV id=switch_2>
<A onclick=setClick();
href="#"
blockid="931">
<IMG alt="尚雯婕为演唱会携天价古董拍海报"
src="images/03.jpg" />
</A>
</DIV>
<DIV id=switch_3>
<A onclick=setClick();
href="#"
blockid="931">
<IMG alt="曹格穿透明装与辣妹热舞 爸妈齐助阵"
src="images/04.jpg" />
</A>
</DIV>
<DIV id=switch_4>
<A onclick=setClick();
href="#"
blockid="931">
<IMG alt="周杰伦女友江语晨拍MV 邀小朋友助阵"
src="images/05.jpg" />
</A>
</DIV>
<DIV id=switch_5>
<A onclick=setClick();
href="#"
blockid="931">
<IMG alt="阿朵唱功遭质疑 撩裙露臀卖肉博眼球"
src="images/06.jpg" />
</A>
</DIV>
<DIV id=switch_6>
<A onclick=setClick();
href="#"
blockid="931">
<IMG alt=林俊杰MV中惨遭意外车祸痛失女友
src="images/07.jpg" />
</A>
</DIV>
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
<DIV class=topNewsList>
<img src="images/jrjd.jpg" width="253" height="25" />
<UL>
<LI>
<A class=up id=focus_0 onmouseover=show_focus_image(0);
title="信宣传新专辑 与徐静蕾合作很紧张" onclick=setClick();
href="#"
blockid="931">信宣传新专辑 与徐静蕾合作很紧张</A>
</LI>
<LI>
<A id=focus_1 onmouseover=show_focus_image(1); title="蒲巴甲北京录新歌 首张EP杀青在即"
onclick=setClick();
href="#"
blockid="931">蒲巴甲北京录新歌 首张EP杀青在即</A>
</LI>
<LI>
<A id=focus_2 onmouseover=show_focus_image(2); title="尚雯婕为演唱会携天价古董拍海报"
onclick=setClick();
href="#"
blockid="931">尚雯婕为演唱会携天价古董拍海报</A>
</LI>
<LI>
<A id=focus_3 onmouseover=show_focus_image(3); title="曹格穿透明装与辣妹热舞 爸妈齐助阵"
onclick=setClick();
href="#"
blockid="931">曹格穿透明装与辣妹热舞 爸妈齐助阵</A>
</LI>
<LI>
<A id=focus_4 onmouseover=show_focus_image(4); title="周杰伦女友江语晨拍MV 邀小朋友助阵"
onclick=setClick();
href="#"
blockid="931">周杰伦女友江语晨拍MV 邀小朋友助阵</A>
</LI>
<LI>
<A id=focus_5 onmouseover=show_focus_image(5); title="阿朵唱功遭质疑 撩裙露臀卖肉博眼球"
onclick=setClick();
href="#"
blockid="931">阿朵唱功遭质疑 撩裙露臀卖肉博眼球</A>
</LI>
<LI>
<A id=focus_6 onmouseover=show_focus_image(6); title="林俊杰MV中惨遭意外车祸痛失女友"
onclick=setClick();
href="#"
blockid="931">林俊杰MV中惨遭意外车祸痛失女友</A>
</LI>
</UL>
</DIV>
</DIV>
<div class=topNewsBg></div>
</DIV>
<script>
function cleanallstyle() {
for (i = 0; i < 7; i++) {
document.getElementById("focus_" + i).className = "";
}
}
function show_focus_image(index) {
clearTimeout(refreshHotQueryTimer);
setHotQueryList(index);
refreshHotQueryTimer = setTimeout('refreshHotQuery();', 5000);
}
function setClick() {
clearTimeout(refreshHotQueryTimer);
}
var refreshHotQueryTimer = null;
var hot_query_td = document.getElementById('HotSearchList');
setHotQueryList(CurrentHotScreen);
refreshHotQueryTimer = setTimeout('refreshHotQuery();', 5000);
</script>
</DIV>
</div>
</body>
</html>CSS代码(news.css):
#newsMainBox{MARGIN:10px auto 0px;OVERFLOW:hidden;WIDTH:971px;ZOOM:1;HEIGHT:auto}
.newsMain{WIDTH:705px}
.topNewsBox{WIDTH:705px;POSITION:relative;HEIGHT:262px}
.topNews{BORDER-RIGHT:#b7b7b7 1px solid;BORDER-TOP:#b7b7b7 1px solid;Z-INDEX:90;BACKGROUND:#f0f0f0;LEFT:0px;BORDER-LEFT:#b7b7b7 1px solid;WIDTH:701px;BORDER-BOTTOM:#b7b7b7 1px solid;POSITION:absolute;TOP:0px;HEIGHT:258px}
.topNewsPic{FLOAT:left;MARGIN:7px 14px 0px 6px;OVERFLOW:hidden;WIDTH:414px;HEIGHT:243px}
.topNewsPic IMG{WIDTH:414px;HEIGHT:243px}
.topNewsList{MARGIN-TOP:7px;FLOAT:left;OVERFLOW:hidden;WIDTH:256px;HEIGHT:243px;text-align:left}
.topNewsList UL{MARGIN:0px auto;OVERFLOW:hidden;WIDTH:250px;HEIGHT:216px}
.topNewsList UL LI{FONT-SIZE:14px;OVERFLOW:hidden;WIDTH:250px;LINE-HEIGHT:30px;BORDER-BOTTOM:#dbdbdb 1px solid;HEIGHT:30px}
.topNewsList UL LI A{PADDING-RIGHT:0px;PADDING-LEFT:12px;BACKGROUND:url(../images/dian.gif) no-repeat 4px;PADDING-BOTTOM:5px;PADDING-TOP:5px}
.topNewsList UL LI A.up{FONT-WEIGHT:bold;BACKGROUND:url(../images/jiantou.gif) no-repeat;COLOR:#f25500}
.topNewsBg{Z-INDEX:80;BACKGROUND:#dedede;LEFT:4px;WIDTH:701px;POSITION:absolute;TOP:4px;HEIGHT:258px}
.focusPicBox{PADDING-BOTTOM:10px;OVERFLOW:hidden;ZOOM:1;HEIGHT:auto}
.newsHotBox .focusPic{DISPLAY:block;FLOAT:none;MARGIN:0px auto;OVERFLOW:hidden;WIDTH:680px;ZOOM:1;HEIGHT:auto}
.newsHotBox .focusPic H4{BORDER-BOTTOM-WIDTH:0px;MARGIN-BOTTOM:5px;WIDTH:680px}
.newsHotBox .focusPic .picList{MARGIN:0px auto;OVERFLOW:hidden;WIDTH:100%;HEIGHT:244px}
.newsHotBox .focusPic .picList LI{PADDING-RIGHT:24px;PADDING-LEFT:24px;FLOAT:left;PADDING-BOTTOM:0pt;MARGIN-LEFT:-1px;BORDER-LEFT:#989898 1px dashed;WIDTH:122px;PADDING-TOP:0pt;HEIGHT:122px}
.newsHotBox .focusPic .picList LI IMG{BORDER-RIGHT:#000000 1px solid;BORDER-TOP:#000000 1px solid;FLOAT:left;BORDER-LEFT:#000000 1px solid;WIDTH:120px;BORDER-BOTTOM:#000000 1px solid;HEIGHT:90px}
.newsHotBox .focusPic .picList LI P{MARGIN-BOTTOM:10px;OVERFLOW:hidden;WIDTH:122px;LINE-HEIGHT:30px;HEIGHT:30px;TEXT-ALIGN:center}
A{COLOR:#333;TEXT-DECORATION:none}
A:hover{TEXT-DECORATION:underline}
IMG{BORDER-TOP-WIDTH:0px;BORDER-LEFT-WIDTH:0px;BORDER-BOTTOM-WIDTH:0px;BORDER-RIGHT-WIDTH:0px}
分享到QQ
分享到微博
微信扫一扫
