迅雷首页焦点更新效果分享

最新推荐文章于 2024-05-06 18:26:11 发布

xiongyuefei

最新推荐文章于 2024-05-06 18:26:11 发布

阅读量1.6k

点赞数

分类专栏： WEB前端开发制作文章标签： function class javascript null border callback

WEB前端开发制作专栏收录该内容

32 篇文章 0 订阅

订阅专栏

<!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=utf-8" />
<title>迅雷在线--中国最大的影视娱乐门户</title>
<meta name="Keywords" content="高清,点播,八卦,影讯,明星,正版,整合搜索" />
<meta name="description" content="最好的高清观看体验、最全的影视娱乐资讯内容、最有影响力的用户参与、最便捷的下载入口。" />
<script>
var B=BigNews={
current:0,
next:0,
scrollInterval:0,
autoScroller:0,
smallpic:"SwitchSmaPic"
};
BigNews.turn=function(index,obj){
clearInterval(BigNews.autoScroller);
BigNews.scroll(index,obj);
}
BigNews.scroll=function(index,obj){
if(obj.smallpic==null || obj.smallpic==""){
  clearInterval(BigNews.autoScroller);
  return;
}
var count=0;
var step=obj.step;
var duration=16;
var b=BigNews;
b.next=index;

if(index==b.current){
  return;
}
if(index < SmallNews.current){
  SmallNews.go(SmallNews, index);
} else if (index - 3 >= SmallNews.current) {
  SmallNews.go(SmallNews, index - 3);
}
clearInterval(b.scrollInterval);
for(var i=0;i<obj.totalcount;i++){
  $(obj.smallpic+"_"+i).className='';
  if(obj.pictxt!=null && obj.pictxt!="")
   $(obj.pictxt+"_"+i).style.display = "none" ;
}
$(obj.smallpic+"_"+index).className=obj.selectstyle;
if(obj.pictxt!=null && obj.pictxt!="")
  $(obj.pictxt+"_"+index).style.display = "block" ;
var span=index-b.current;
var begin_value=$(obj.bigpic).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){
  $(obj.bigpic).scrollTop=cpu(count,b,c,duration);
  count++;
  if(count==duration){
   clearInterval(BigNews.scrollInterval);
   scrollInterval=0;
   count=0;
   $(obj.bigpic).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(obj){
clearInterval(BigNews.autoScroller);
BigNews.autoScroller=setInterval(function(){
  BigNews.scroll(BigNews.current==(obj.totalcount-1)?0:BigNews.current+1,obj);
},obj.autotimeintval);
}
BigNews.pauseSwitch = function() {
//clearTimeout(BigNews.autoScroller);
clearInterval(BigNews.autoScroller);
}
BigNews.init=function(obj){
$(obj.bigpic).onmouseover = new Function("BigNews.pauseSwitch();") ;
$(obj.bigpic).onmouseout = new Function("BigNews.auto("+obj.objname+");") ;
for (i=0;i<obj.totalcount;i++) {
  if(obj.smallpic!=null && obj.smallpic!="") {
   $(obj.smallpic+"_"+i).onmouseover = new Function("BigNews.turn("+i+","+obj.objname+");BigNews.pauseSwitch();") ;
   $(obj.smallpic+"_"+i).onmouseout = new Function("BigNews.auto("+obj.objname+");") ;
  }
}
BigNews.smallpic = obj.smallpic;
BigNews.auto(obj);
}
var SmallNews = {
current:0,
step:0,
totalcount:0,
a_pre:"",
a_next:"",
ul:'',
clickflag:0
};
SmallNews.init=function(obj) {
SmallNews.step = obj.step;
SmallNews.totalcount = obj.totalcount;
SmallNews.a_pre = obj.a_pre;
SmallNews.a_next = obj.a_next;
SmallNews.ul = obj.ul;
}
SmallNews.pre=function(){
if(SmallNews.current<=0){
  return;
}else{
  var index = SmallNews.current - 1;
  if(BigNews.current > index + 3) {
   $(BigNews.smallpic+"_"+ (index + 3)).onmouseover();
   $(BigNews.smallpic+"_"+ (index + 3)).onmouseout();
  }
  SmallNews.go(SmallNews,SmallNews.current-1);
}
}
SmallNews.next=function(){
if(SmallNews.current>=SmallNews.totalcount - 4){
  return;
}else{
  var index = SmallNews.current + 1;
  if (BigNews.current < index) {
   $(BigNews.smallpic+"_"+index).onmouseover();
   $(BigNews.smallpic+"_"+index).onmouseout();
  }
   SmallNews.go(SmallNews,SmallNews.current+1);


}
}
SmallNews.go=function(obj,index){
if(obj.current==index){return;}
var span=-index+obj.current;
if(obj.clickflag > 0){return;}
obj.clickflag=1;
if(obj.step>0)
  ScrollCrossUp.scroll($(obj.ul),obj.step,span,parseInt($(obj.ul).style.marginTop)||0,cb,10);
else{
  cb();
}
function cb(){
  obj.current=index;
  if(obj.current == 0) {
   $(obj.a_pre).className = "no-pre";
   $(obj.a_next).className = "next";
  }else if(obj.current > 0 && obj.current < obj.totalcount - 4) {
   $(obj.a_pre).className = "pre";
   $(obj.a_next).className = "next";
  }else if(obj.current == obj.totalcount - 4) {
   $(obj.a_pre).className = "pre";
   $(obj.a_next).className = "no-next";
  }
  obj.clickflag=0;
}
}
//向上滚动
ScrollCrossUp={interval:0,count:0,duration:0,step:0,srcObj:null,callback:null};
ScrollCrossUp.doit=function(obj,b,c,d){
var s=ScrollCrossUp;
obj.style.marginTop=cpu(s.count,b,c,d)+'px';
s.count++;
if(s.count>=d){
  clearInterval(s.interval);
  s.count=0;
  obj.style.marginTop=b+c+'px';
  s.callback();
}
function cpu(t,b,c,d) {return c*((t=t/d-1)*t*t+1)+b;};
}
ScrollCrossUp.scroll=function(obj,step,span,beign,callback,duration){
var s=ScrollCrossUp;
s.duration=duration;
s.callback=callback;
s.interval=setInterval(function(){s.doit(obj,beign,step*span,duration)},10);
}
function $(item){
return document.getElementById(item);
}
function c_getCookie(sName){
var sSearch = sName + "=";
var iOffset = document.cookie.indexOf(sSearch);
if (iOffset != -1) {
  iOffset += sSearch.length;
  var iEnd = document.cookie.indexOf(";", iOffset);
  if (iEnd == -1)
   iEnd = document.cookie.length;
  return unescape(document.cookie.substring(iOffset, iEnd));
}else
  return "";
}
</script>
<style>
* { margin:0; padding:0; }
html { background:#FFFFFF; }
body { font:normal 12px/20px Arial, Verdana, Lucida, Helvetica, simsun, sans-serif; color:#313131; }
ol, ul { list-style:none; }
a { color:#016A9F; text-decoration:none; }
a:hover { text-decoration:underline; }
img { border:0; }
.kk-index .flash-box { width:450px; height:251px; overflow:hidden; padding:5px 9px; margin-bottom:8px; background:url(http://misc.web.xunlei.com/www_5_1/img/flashBg.png) no-repeat 0 0; }
.kk-index .flash-box h2 { font-size:13px; width:448px; height:20px; line-height:20px; margin-bottom:1px; color:#193B5F; }
.kk-index .flash-box .big-pic { float:left; width:366px; height:188px; overflow:hidden; margin-right:2px; }
.kk-index .flash-box .big-pic img { display:block; width:364px; height:186px; border:1px solid #fff; }
.kk-index .flash-box .pic-list { float:left; width:81px; height:188px; position:relative; }
.kk-index .flash-box .pic-list .pre, .kk-index .flash-box .pic-list .next, .kk-index .flash-box .pic-list .no-pre, .kk-index .flash-box .pic-list .no-next { background:url(http://misc.web.xunlei.com/www_5_1/img/sprite.png) no-repeat; width:81px; height:11px; position:absolute; top:0; left:0; }
.kk-index .flash-box .pic-list .pre { background-position:-804px -108px; }
.kk-index .flash-box .pic-list .no-pre { background-position:-852px -108px; }
.kk-index .flash-box .pic-list .next { background-position:-804px -125px; top:177px; }
.kk-index .flash-box .pic-list .no-next { background-position:-852px -125px; top:177px; }
.kk-index .flash-box .pic-list ul { position:absolute; top:0; left:5px; }
.kk-index .flash-box .pic-list li { float:left; width:71px; height:40px; overflow:hidden; margin-bottom:2px; }
.kk-index .flash-box .pic-list li a { display:block; width:71px; height:40px; overflow:hidden; }
.kk-index .flash-box .pic-list li a img { display:block; width:71px; height:40px; padding:1px; }
.kk-index .flash-box .pic-list li a:hover, .kk-index .flash-box .pic-list li a.currA { border:2px solid #56AAD8; width:67px; height:36px; }
.kk-index .flash-box .pic-list li a:hover img, .kk-index .flash-box .pic-list li a.currA img { margin:-2px; }
.kk-index .flash-box .flash-txt { clear:both; height:38px; line-height:19px; padding-top:3px; }
.kk-index .flash-box .flash-txt h3 { font-size:12px; height:19px; overflow:hidden; }
.kk-index .flash-box .flash-txt em { margin-left:8px; font:normal bold 14px Arial, Helvetica, sans-serif; color:#FF5B01; }
.kk-index .flash-box .flash-txt p { font-size:12px; color:#939393; height:19px; overflow:hidden; }
</style>
<base target="_blank" />
</head>
<body class="kk-index">
  <div class="flash-box">
   <h2>今日推荐</h2>
   <div class="big-pic" id="SwitchBigPic">
  <a href="http://kankan.xunlei.com/5.1/movie/32/60532.html" blockid="2131"><img src="http://images.movie.xunlei.com/gallery/541/c486760cdb88c28b8c2c0b8d1e810c09.jpg" alt="【新剧首播】《无处藏身》中国版《越狱》，热播悬疑剧" /></a>
  <a href="http://kankan.xunlei.com/5.1/movie/26/62426.html" blockid="2131"><img src="http://images.movie.xunlei.com/gallery/540/081e163991484f8eced9e6ea0346cd8f.jpg" alt="【独家首播】《关中枪声》央视黄金档热播高收视战争剧" /></a>
  <a href="http://kankan.xunlei.com/5.1/movie/0/60600.html" blockid="2131"><img src="http://images.movie.xunlei.com/gallery/540/581989b3a0a98590e8eb3da025900ce2.jpg" alt="【荧屏热播】《搜神传》TVB古装另类魔幻神话剧" /></a>
  <a href="http://movie.xunlei.com/topic/hk/" blockid="2131"><img src="http://images.movie.xunlei.com/gallery/541/16f1761ec06e92f315b891f08e0c2efe.jpg" alt="【专题推荐】香港回归12周年纪念专题" /></a>
  <a href="http://advstat.xunlei.com/TClick?cf=2&gs=xunleishouxue&tt=http%3A%2F%2Fsx.xunlei.com%2Fwelcome%2F%3Fadvid%3D0001200010xunleishouxue00009%26gs%3Dxunleishouxue&linkid=xxx&location=http%3A%2F%2Fsx.xunlei.com%2Fwelcome%2F%3Fadvid%3D0001200010xunleishouxue00009%26gs%3Dxunleishouxue&rf=&ul=" blockid="2131"><img src="http://images.movie.xunlei.com/gallery/541/fc73d6164931adcd98755365a21e42f2.jpg" alt="迅雷兽血沸腾今开启终极内测！" /></a>
  <a href="http://ent.xunlei.com/topic/09happygirl/" blockid="2131"><img src="http://images.movie.xunlei.com/gallery/541/a6341013bab2892655874b872868ebbd.jpg" alt="【快女专区】《快乐女声》全国总决赛第一场精彩回放 " /></a>
</div>
<div class="pic-list">
<a id="a_pre" href="javascript:void(0)" οnclick="SmallNews.pre()" class="no-pre" target="_self" title="向上翻" blockid="2131"></a><a id="a_next" href="javascript:void(0)" οnclick="SmallNews.next()" class="next" target="_self" title="向下翻" blockid="2131"></a>
<div style="position:relative;top:10px;overflow: hidden; height: 168px;">
<ul id="ul_recom">
    <li><a id="SwitchSmaPic_0" href="http://kankan.xunlei.com/5.1/movie/32/60532.html" class="currA" blockid="2131"><img src="http://images.movie.xunlei.com/gallery/541/05f5c2df69258c8c56534012814070d6.jpg" alt="【新剧首播】《无处藏身》中国版《越狱》，热播悬疑剧" /></a></li>
    <li><a id="SwitchSmaPic_1" href="http://kankan.xunlei.com/5.1/movie/26/62426.html" blockid="2131"><img src="http://images.movie.xunlei.com/gallery/540/dc8a3d9e5d1d18bae302a0980680fa12.jpg" alt="【独家首播】《关中枪声》央视黄金档热播高收视战争剧" /></a></li>
    <li><a id="SwitchSmaPic_2" href="http://kankan.xunlei.com/5.1/movie/0/60600.html" blockid="2131"><img src="http://images.movie.xunlei.com/gallery/540/4f90b24dcf0b83eb5aeb374cfc02352b.jpg" alt="【荧屏热播】《搜神传》TVB古装另类魔幻神话剧" /></a></li>
    <li><a id="SwitchSmaPic_3" href="http://movie.xunlei.com/topic/hk/" blockid="2131"><img src="http://images.movie.xunlei.com/gallery/541/aba0871ca6553112174cbee34a952461.jpg" alt="【专题推荐】香港回归12周年纪念专题" /></a></li>
    <li><a id="SwitchSmaPic_4" href="http://advstat.xunlei.com/TClick?cf=2&gs=xunleishouxue&tt=http%3A%2F%2Fsx.xunlei.com%2Fwelcome%2F%3Fadvid%3D0001200010xunleishouxue00009%26gs%3Dxunleishouxue&linkid=xxx&location=http%3A%2F%2Fsx.xunlei.com%2Fwelcome%2F%3Fadvid%3D0001200010xunleishouxue00009%26gs%3Dxunleishouxue&rf=&ul=" blockid="2131"><img src="http://images.movie.xunlei.com/gallery/541/fa7e97ad955f783d510d723a4e8dcd40.jpg" alt="迅雷兽血沸腾今开启终极内测！" /></a></li>
    <li><a id="SwitchSmaPic_5" href="http://ent.xunlei.com/topic/09happygirl/" blockid="2131"><img src="http://images.movie.xunlei.com/gallery/541/47962c5a65a7629c778371af054d1fff.jpg" alt="【快女专区】《快乐女声》全国总决赛第一场精彩回放 " /></a></li>
   </ul>
</div>
</div>
<div class="flash-txt" id="SwitchPicTxt_0">
<h3><a href="http://kankan.xunlei.com/5.1/movie/32/60532.html" title="【新剧首播】《无处藏身》中国版《越狱》，热播悬疑剧" blockid="2131">【新剧首播】《无处藏身》中国版《越狱》，热播悬疑剧</a></h3>
<p>李易祥领衔主演，讲述一个抢劫杀人罪犯惊心动魄的逃亡历程</p>
</div>
<div class="flash-txt" id="SwitchPicTxt_1">
<h3><a href="http://kankan.xunlei.com/5.1/movie/26/62426.html" title="【独家首播】《关中枪声》央视黄金档热播高收视战争剧" blockid="2131">【独家首播】《关中枪声》央视黄金档热播高收视战争剧</a></h3>
<p>李亚鹏转型演绎硬朗军人，见证“共和革命”的风云变幻历程</p>
</div>
<div class="flash-txt" id="SwitchPicTxt_2">
<h3><a href="http://kankan.xunlei.com/5.1/movie/0/60600.html" title="【荧屏热播】《搜神传》TVB古装另类魔幻神话剧" blockid="2131">【荧屏热播】《搜神传》TVB古装另类魔幻神话剧</a></h3>
<p>一场仙、人、魔三界掀起的激战，钟嘉欣、陈浩民、陈锦鸿搞笑演绎</p>
</div>
<div class="flash-txt" id="SwitchPicTxt_3">
<h3><a href="http://movie.xunlei.com/topic/hk/" title="【专题推荐】香港回归12周年纪念专题" blockid="2131">【专题推荐】香港回归12周年纪念专题</a></h3>
<p>“九七三部曲”三代人的不同观点诠释九七前后香港人的生活转变</p>
</div>
<div class="flash-txt" id="SwitchPicTxt_4">
<h3><a href="http://advstat.xunlei.com/TClick?cf=2&gs=xunleishouxue&tt=http%3A%2F%2Fsx.xunlei.com%2Fwelcome%2F%3Fadvid%3D0001200010xunleishouxue00009%26gs%3Dxunleishouxue&linkid=xxx&location=http%3A%2F%2Fsx.xunlei.com%2Fwelcome%2F%3Fadvid%3D0001200010xunleishouxue00009%26gs%3Dxunleishouxue&rf=&ul=" title="迅雷兽血沸腾今开启终极内测！" blockid="2131">迅雷兽血沸腾今开启终极内测！</a></h3>
<p>燃情盛夏终极内测盛大开启！特别版本百万礼金精彩活动假期爽翻天！</p>
</div>
<div class="flash-txt" id="SwitchPicTxt_5">
<h3><a href="http://ent.xunlei.com/topic/09happygirl/" title="【快女专区】《快乐女声》全国总决赛第一场精彩回放 " blockid="2131">【快女专区】《快乐女声》全国总决赛第一场精彩回放 </a></h3>
<p>更多更新鲜的赛场风云报道和更及时更扣人心弦的比赛视频，尽在迅雷快女频道！</p>
</div>
  </div>
<script>
var Today_recom={
    step:42,
    totalcount:6,
    a_pre:"a_pre",
    a_next:"a_next",
    ul:'ul_recom'
   };
SmallNews.init(Today_recom);
var IndexRecom={
    bigpic:"SwitchBigPic", //大图DIV之ID通用部分
    step:188,
    smallpic:"SwitchSmaPic",//小图之ID通用部分
    selectstyle:"currA", //小图被选中之后的CSS
    pictxt:"SwitchPicTxt", //配套图片文字
    totalcount:6,     //图片数量
    autotimeintval:2000,
    objname:"IndexRecom" //对象名称
   } ;
BigNews.init(IndexRecom);
</script>
  <script>
  var HotPlay= { current:0,step:478,a:'a_hp_',div:'div_hp_content',ul:'ul_hp',clickflag:0}
  </script>

</body>
</html>

xiongyuefei

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
迅雷首页焦点更新效果分享

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">迅雷在线--中国最大的影视娱乐门户var B=BigNews={ current:0, next:0, scrollInterval:0, autoScroller:0, smallpic:"SwitchSmaPic"};B
复制链接

扫一扫