第一步:新建一个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" />
<title>仿迅雷看看首页js+div+css无flash幻灯片代码 超漂亮</title>
<script src="hd.js" language='javascript'></script>
<style type="text/css">
body{font-family:"宋体";font-size:12px;color:#7C7B7B;margin:auto;padding:0px;background-image:url(/templets/chico/bg.jpg); background-repeat:repeat-x;background-position:top;cursor:default;}
a{color:#3C3C3C;text-decoration:none;}
a:hover{color:#0176ED;text-decoration:underline;}
h1,h2,h3,h4,h5,form,cite,em,pre,address,ul,dl,dt,dd{font-size:12px;font-style:normal;margin:0px;padding:0px;}
.iiiyx_hd_go{float:left;height:216px;width:669px;padding:10px;}
#iiiyx_hd_img{float:left;height:216px;width:318px;overflow:hidden;}
#iiiyx_hd_img img{height:216px;width:318px;border:none;}
#iiiyx_hd_item{float:right;height:216px;width:343px;display:block;border-top:1px solid #E6E6E6;}
#iiiyx_hd_item li{display:inline;float:left;width:339px;border-bottom:1px solid #E6E6E6;padding:3px;}
#iiiyx_hd_item li img{float:left;height:34px;width:50px;border:1px solid #999999;}
#iiiyx_hd_item dl{float:left;height:34px;padding-left:7px;}
#iiiyx_hd_item dt{padding:4px 0;}
#iiiyx_hd_item dt a{font-weight:bold;}
#iiiyx_hd_item .up dt a{font-weight:bold;color:#FD0E57;}
#iiiyx_hd_item .up{background-color:#F5F5F5;}
.mygg_1{float:left;height:235px;width:255px;padding:1px;}
#iiiyx_hd_item em{position:absolute;margin:-1px 0 0 195px;font-family:tahoma;font-size:10px;text-align:right;width:80px;font-weight:normal;}
#iiiyx_hd_item .up em{color:#FD0E57;font-weight:bold;}
</style>
</head>
<body><div class="iiiyx_hd_go">
<div id="iiiyx_hd_img"><a onclick="logForClick('洛奇越野赛;')" href="/tiyu/33759.html" target="_blank"><img src="/uploads/gamepic/top/090512/_212933123.jpg" width="318" height="216" alt="洛奇越野赛" /></a><a onclick="logForClick('超飞速过山车;')" href="/minjie/33741.html" target="_blank"><img src="/uploads/gamepic/top/090429/_20515O10.jpg" width="318" height="216" alt="超飞速过山车" /></a><a onclick="logForClick('Bloony轮;')" href="/zongheyizhi/33740.html" target="_blank"><img src="/uploads/gamepic/top/090429/_20263Y13.jpg" width="318" height="216" alt="Bloony轮" /></a><a onclick="logForClick('益智飞行棋;')" href="/zongheyizhi/33735.html" target="_blank"><img src="/uploads/gamepic/top/090418/_212H3313.jpg" width="318" height="216" alt="益智飞行棋" /></a><a onclick="logForClick('正负对撞球;')" href="/yizhi/33727.html" target="_blank"><img src="/uploads/gamepic/top/090416/_142AbB.jpg" width="318" height="216" alt="正负对撞球" /></a></div>
<ul id="iiiyx_hd_item">
<li onmouseover="B.turn(0)" onmouseout="B.auto()" class="up"><img src="/uploads/gamepic/top/090512/_212933123.jpg" alt="洛奇越野赛" />
<dl><dt><em>PLAY:56</em><a onclick="logForClick('洛奇越野赛;')" href="/tiyu/33759.html" alt="洛奇越野赛" target="_blank">《洛奇越野赛》</a>[体育]</dt>
<dd>漂亮的画面，会让你有种冲动不得不玩。</dd></dl>
</li>
<li onmouseover="B.turn(1)" onmouseout="B.auto()"><img src="/uploads/gamepic/top/090429/_20515O10.jpg" alt="超飞速过山车" />
<dl><dt><em>PLAY:333</em><a onclick="logForClick('超飞速过山车;')" href="/minjie/33741.html" alt="超飞速过山车" target="_blank">《超飞速过山车》</a>[身手敏捷]</dt>
<dd>此款游戏对过山车的玩法进行了改革，操作并没有那</dd></dl>
</li>
<li onmouseover="B.turn(2)" onmouseout="B.auto()"><img src="/uploads/gamepic/top/090429/_20263Y13.jpg" alt="Bloony轮" />
<dl><dt><em>PLAY:182</em><a onclick
="logForClick('Bloony轮;')" href="/zongheyizhi/33740.html" alt="Bloony轮" target="_blank">《Bloony轮》</a>[综合益智]</dt>
<dd>又是一款物理原理的游戏，好好掌握惯性负荷的难题</dd></dl>
</li>
<li onmouseover="B.turn(3)" onmouseout="B.auto()"><img src="/uploads/gamepic/top/090418/_212H3313.jpg" alt="益智飞行棋" />
<dl><dt><em>PLAY:247</em><a onclick="logForClick('益智飞行棋;')" href="/zongheyizhi/33735.html" alt="益智飞行棋" target="_blank">《益智飞行棋》</a>[综合益智]</dt>
<dd>游戏以飞行棋的形式开场，当你执出头子后，就会有</dd></dl>
</li>
<li onmouseover="B.turn(4)" onmouseout="B.auto()"><img src="/uploads/gamepic/top/090416/_142AbB.jpg" alt="正负对撞球" />
<dl><dt><em>PLAY:290</em><a onclick="logForClick('正负对撞球;')" href="/yizhi/33727.html" alt="正负对撞球" target="_blank">《正负对撞球》</a>[益智]</dt>
<dd>此款游戏是物理益智游戏，您必须把所有正极和负极</dd></dl>
</li>
</ul>
</div>
第二步:新建一个hd.js放在上面那个html页面同目录下
function $(s){
return document.getElementById(s);
}
var B=BigNews={
current:0,
next:0,
scrollInterval:0,
autoScroller:0
};
BigNews.turn=function(index){
clearInterval(BigNews.autoScroller);
BigNews.scroll(index);
}
BigNews.scroll=function(index){
var count=0;
var step=216;
var duration=16;
var b=BigNews;
b.next=index;
if(index!=b.current&&count>duration/8){
return;
}
clearInterval(b.scrollInterval);
var items=$('iiiyx_hd_item').getElementsByTagName('li');
for(var i=0;i<5;i++){
items[i].className='';
}
items[index].className='up';
var span=index-b.current;
var begin_value=$('iiiyx_hd_img').scrollTop;
var chang_in_value=span*step+(b.current*step-begin_value);
b.scrollInterval=setInterval(function(){doit(begin_value,chang_in_value)},10);
function doit(b,c){
$('iiiyx_hd_img').scrollTop=cpu(count,b,c,duration);
count++;
if(count==duration){
clearInterval(BigNews.scrollInterval);
scrollInterval=0;
count=0;
$('iiiyx_hd_img').scrollTop=b+c;
BigNews.current=index;
}
}
function cpu(t,b,c,d) {return c*((t=t/d-1)*t*t+1)+b;};
}
BigNews.auto=function(){
clearInterval(BigNews.scrollInterval);
BigNews.autoScroller=setInterval(function(){
BigNews.scroll(BigNews.current==4?0:BigNews.current+1);
},3000);
}
window.attachEvent('onload',BigNews.auto);
联系客服
