<!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=GBK">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta name="robots" content="all">
<title>搜狐视频jQuery焦点图</title>
<link type="text/css" rel="stylesheet" href="images/jb51.net.css">
<script type="text/javascript" src="images/jquery1.4.2.js"></script>
<script>
/**
hdtv焦点图
*/
var MDChdtvFocus=function(){
this.id=jQuery(arguments[0].id);
this.bigImgW=arguments[0].bigImgW;
this.bigImgH=arguments[0].bigImgH;
this.smallImgW=arguments[0].smallImgW;
this.smallImgH=arguments[0].smallImgH;
this.speed=arguments[0].speed||5000;
this.focusData=arguments;
this.autoPlay;
this.autoPlay2;
};
MDChdtvFocus.prototype={
init:function(){
var that=this;
this.id.addClass("MDChdtvFocus");
var go=function(){
that.id.css("backgroundImage","none");
var _bigImg=jQuery('<div class="l" style="width:'+that.bigImgW+'px;height:'+that.bigImgH+'px"><a target="_blank"><img style="display:none;width:100%;height:100%" /></a><span></span><div class="bg"></div><div style="width:'+that.bigImgW+'px"><h1></h1><p></p></div></div>');
var _tab=jQuery('<div class="r"><span class="up"><a href="#"></a></span><span class="down"><a href="#"></a></span><div><dl></dl></div></div>');
that.id.html(_bigImg).append(_tab);
for(var i=1;i<that.focusData.length;i++){
that.id.find("> div:eq(1) dl").append('<dd><img src="'+that.focusData[i][1]+'" width="'+that.smallImgW+'" height="'+that.smallImgH+'" /><h2><span></span>'+that.focusData[i][5]+'</h2><p>'+that.focusData[i][6]+'</p></dd>');
};
that.a()
};
go();
},
a:function(){
var _tab=this.id.find("> div:eq(1)"),that=this;
var _num=this.id.find(".r dl").height()-360;
var gogo=function(i){
that.b(i);
};
gogo();
this.id.find(".r a").click(function(){
return false;
});
this.id.find(".r > .up").mousedown(function(){
if(that.id.find(".r > div dl").position().top<0){
if(!that.id.find(".r > div dl").is(":animated")){
that.id.find(".r > div dl").stop().animate({top:"+=90"},200);
}
}
});
this.id.find(".r > .down").mousedown(function(){
if(that.id.find(".r > div dl").position().top>-_num){
if(!that.id.find(".r > div dl").is(":animated")){
that.id.find(".r > div dl").stop().animate({top:"-=90"},200);
}
}
});
this.id.find(".l").hover(function(){
that.id.find(".l span").addClass("now");
},function(){
that.id.find(".l span").removeClass("now");
}).click(function(){
window.open(that.id.find(".l a:eq(0)").attr("href"));
return false;
});
_tab.find("dd").each(function(i){
(function(i){
_tab.find("dd").eq(i).bind("mouseenter",function(){
if(jQuery(this)[0].className!="now"){
clearTimeout(that.autoPlay);
clearTimeout(that.autoPlay2);
gogo(i+1);
clearTimeout(that.autoPlay);
clearTimeout(that.autoPlay2);
}else{
clearTimeout(that.autoPlay);
clearTimeout(that.autoPlay2);
}
}).bind("mouseleave",function(){
clearTimeout(that.autoPlay);
that.autoPlay2=setTimeout(function(){
var s=i+2;
s>that.focusData.length-1?s=1:s;
gogo(s);
},that.speed);
}).click(function(){
window.open(that.focusData[i+1][2])
});
})(i)
})
},
b:function(i){
var _index=i||1,that=this;
this.id.find("img:eq(0)").attr("src",that.focusData[_index][0]).parent().attr("href",that.focusData[_index][2]).end().css({"display":"block"});
this.id.find("dd").removeClass("now").eq(_index-1).addClass("now");
this.id.find(".l > div > h1").html(that.focusData[_index][3]);
this.id.find(".l > div > p").html(that.focusData[_index][4]);
var _w=this.id.find(".l > div:eq(1)").width();
this.id.find(".l > div:eq(0)").css("width",0).stop().animate({width:_w},200);
var _num1=this.id.find(".r dl dd.now").prevAll().length*90;
var _num2=this.id.find(".r dl").height()-360;
var _num3=_num1-270;
if(!that.id.find(".r > div dl").is(":animated")){
if(that.id.find(".r > div dl").position().top > -(_num1-270)){
that.id.find(".r > div dl").stop().animate({top:-_num3},200);
};
if(that.id.find(".r > div dl").position().top < (-_num1)){
that.id.find(".r > div dl").stop().animate({top:-_num1},200);
}
}
if(that.id.find(".r > div dd").eq(0)[0].className=="now"){
if(!that.id.find(".r > div dl").is(":animated")){
that.id.find(".r > div dl").stop().animate({top:0},200);
}
};
this.autoPlay=setTimeout(function(){
that.b(_index==that.focusData.length-1?_index=1:++_index);
},that.speed);
}
}
</script>
</head>
<body>
<div id="flashFocus" class="area" collection="Y">
<div id="MDChdtvFocus_1" class="MDChdtvFocus" style="background-image: none; ">
<div class="l" style="width:705px;height:380px"><a target="_blank" href="#"><img style="width: 100%; height: 100%; display: block; " src="images/b_05.jpg"></a><span class=""></span><div class="bg" style="width: 705px; overflow-x: hidden; overflow-y: hidden; display: block; "></div>
<div style="width:705px"><h1>《生死迷局》：离奇命案引发惊天密谋 延续高智商谍战剧风潮(全集)</h1><p>谍战悬疑剧《生死迷局》由内地实力派演员严宽、甘婷婷、郑晓宁等联袂主演，剧情由百乐门当红舞女被杀引起，表面看来不过是一个风花雪月的案件，随着案情的深入却揭开了一个骇人听闻的惊天大阴谋——</p></div></div>
<div class="r"><span class="up"><a href="http://www.jb51.net"></a></span><span class="down"><a href="http://www.jb51.net"></a></span><div><dl style="top: -90px; "><dd class=""><img src="images/s_01.jpg" width="110" height="70"><h2><span></span>日照重庆</h2><p>王小帅“商业转型”的尝试之作</p></dd><dd class=""><img src="images/s_02.jpg" width="110" height="70"><h2><span></span>金婚风雨情</h2><p>年度收官大戏上演华丽版“冬日恋歌”<br></p></dd><dd class=""><img src="images/s_03.jpg" width="110" height="70"><h2><span></span>大笑江湖</h2><p>小沈阳台上撒欢台下木讷</p></dd><dd class=""><img src="images/s_04.jpg" width="110" height="70"><h2><span></span>终极三国第三季</h2><p>历史故事结构配搭新科技武器的校园偶像剧</p></dd><dd class="now"><img src="images/s_05.jpg" width="110" height="70"><h2><span></span>生死迷局</h2><p>严宽颠覆情圣形象 惨遭父亲夺初恋</p></dd><dd><img src="images/s_06.jpg" width="110" height="70"><h2><span></span>我的爱金枝玉叶</h2><p>“七公主”父女再续亲情戏<br></p></dd><dd><img src="images/s_07.jpg" width="110" height="70"><h2><span></span>绝命岛</h2><p>大玩惊悚元素 刑具酷刑血腥升级</p></dd><dd><img src="images/s_08.jpg" width="110" height="70"><h2><span></span>爱上男主播</h2><p>“电台金三顺+中国DJ”的唯美爱情故事</p></dd></dl></div></div></div>
<script>
var MDChdtvFocus_1=new MDChdtvFocus({
id:"#MDChdtvFocus_1",//id
bigImgW:"705",//大图宽
bigImgH:"380",//大图高
smallImgW:"110",//小图宽
smallImgH:"70",//小图高
speed:"3000"//转刷速度,默认为5秒
},
[ //数据1
"images/b_01.jpg",//大图
"images/s_01.jpg",//小图
"#",
"《日照重庆》：王小帅迄今为止投资最大的一部影片",
"第六代导演王小帅的新片《日照重庆》集合了王学圻、李玲玉、范冰冰等众多华语大咖，故事根据真实事件改 编而成。该片在戛纳电影节举行媒体场放映时，赢得观众热烈的掌声，获得了中外媒体的一致好评——",
"日照重庆",
"王小帅“商业转型”的尝试之作"
],
[ //数据3
"images/b_02.jpg",//大图
"images/s_02.jpg",//小图
"#",
"《金婚风雨情》：姜文重归荧屏 与妻子周韵抢戏(更新至第15集)","蒋雯丽与张国立的《金婚》当年掀起了一股家庭剧热潮，收视无人能敌。而作为该剧的姊妹篇《金婚风雨情》其实讲的是另一对携手走过50年的夫妻。有前面漂亮的成功典范，《金婚2》作为年度收官大戏确实充满了悬念与挑战——",
"金婚风雨情",
"年度收官大戏上演华丽版“冬日恋歌”<br>"
],
[ //数据1
"images/b_03.jpg",//大图
"images/s_03.jpg",//小图
"#",
"《江湖啊！江湖！》：平常心打造合家欢喜剧",
来自搜狐视频的jQuery缩略图焦点图切换.zip
版权申诉
188 浏览量
2022-11-10
07:37:31
上传
评论
收藏 848KB ZIP 举报
来自搜狐视频的jQuery缩略图焦点图切换.zip （28个子文件） 
132677755101983333 likecs.com_132677755136496416 搜狐视频首页jQuery焦点图 images 
s_03.jpg 5KB b_01.jpg 90KB b_07.jpg 97KB s_05.jpg 4KB
bg2.png 536B
bt02.gif 241B bt04.png 8KB s_08.jpg 3KB bt03.gif 209B b_05.jpg 117KB bg.png 507B b_02.jpg 84KB b_06.jpg 78KB s_02.jpg 3KB ico-arrow.gif 9KB b_08.jpg 68KB a.gif 43B bt01.gif 264B s_01.jpg 3KB s_07.jpg 3KB b_03.jpg 92KB pv.gif 0B
jquery1.4.2.js 71KB s_06.jpg 6KB b_04.jpg 117KB s_04.jpg 11KB bt05.png 6KB index.htm 10KB资源评论
