特效介绍
模仿搜狐视频首页jQuery幻灯片轮播代码，一共八屏，上下滚动，右边是由缩略图和标题描述组成的按钮，左侧是大图以及大图的标题和更详细的描述。非常适合作为电影网站的banner，由于没有使用任何flash元素，并且带有文字描述，有利于优化推广。
使用方法
1、引入下面的js和css文件：<link type="text/css" rel="stylesheet" href="images/5imoban.net.css"> <script type="text/javascript" src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script>2、JS代码：
<script>
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>
3、html代码：<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.5imoban.net/#">
</a>
</span>
<span class="down">
<a href="http://www.5imoban.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"//自动滚动速度，单位毫秒。
},
[
"images/b_01.jpg",//大图
"images/s_01.jpg",//小图
"#", //图片链接地址
//大图标题
"《日照重庆》：王小帅迄今为止投资最大的一部影片",
//大图描述
"第六代导演王小帅的新片《日照重庆》集合了王学圻、李玲玉、范冰冰等众多华语大咖，故事根据真实事件改 编而成。该片在戛纳电影节举行媒体场放映时，赢得观众热烈的掌声，获得了中外媒体的一致好评——",
//小图标题
"日照重庆",
//小图描述
"王小帅“商业转型”的尝试之作"
],
[
"images/b_02.jpg",//大图
"images/s_02.jpg",//小图
"#",
"《金婚风雨情》：姜文重归荧屏 与妻子周韵抢戏(更新至第15集)","蒋雯丽与张国立的《金婚》当年掀起了一股家庭剧热潮，收视无人能敌。而作为该剧的姊妹篇《金婚风雨情》其实讲的是另一对携手走过50年的夫妻。有前面漂亮的成功典范，《金婚2》作为年度收官大戏确实充满了悬念与挑战——",
"金婚风雨情",
"年度收官大戏上演华丽版“冬日恋歌”<br>"
],
[
"images/b_03.jpg",//大图
"images/s_03.jpg",//小图
"#",
"《江湖啊！江湖！》：平常心打造合家欢喜剧",
"古装动作喜剧贺岁大片《大笑江湖》已于12月3日全国火爆上映。日前,一辑长达两个小时的超长花絮纪录片《 江湖啊！江湖！》由片方公布，记录了整个剧组以平常的心态，努力将《大笑江湖》制造成开心快乐的贺岁大片的过程——",
"大笑江湖",
"小沈阳台上撒欢台下木讷"
],
[
"images/b_04.jpg",//大图
"images/s_04.jpg",//小图
"#",
"《终极三国》第三季：终极系列的第3部台湾偶像剧 (更新至21集)",
"《终极三国3》致力于打造年度最搞笑的台湾校园偶像剧，凭着对三国故事的超恶搞剧情及剧中演员大胆夸张 的演绎，《终极三国1》曾在台湾首播便夺下当周收视冠军，第三部更是卯足劲儿要延续第一、二部的热潮——",
"终极三国第三季",
"历史故事结构配搭新科技武器的校园偶像剧"
],
[
"images/b_05.jpg",//大图
"images/s_05.jpg",//小图
"#",
"《生死迷局》：离奇命案引发惊天密谋 延续高智商谍战剧风潮(全集)",
"谍战悬疑剧《生死迷局》由内地实力派演员严宽、甘婷婷、郑晓宁等联袂主演，剧情由百乐门当红舞女被杀引起，表面看来不过是一个风花雪月的案件，随着案情的深入却揭开了一个骇人听闻的惊天大阴谋——",
"生死迷局",
"严宽颠覆情圣形象 惨遭父亲夺初恋"
],
[
"images/b_06.jpg",//大图
"images/s_06.jpg",//小图
"#",
"《我的爱金枝玉叶》：KBS周末剧收视之王 湖南卫视即将播出(全集)","《我的爱金枝玉叶》由韩国实力派演员李泰兰、金圣洙、池贤宇领衔主演，通过甘愿牺牲和忍耐的真正父亲的样子表现了家人之间的关爱，是韩国KBS电视台2009年热播的一部周末剧，即将于近期登陆湖南卫视——",
"我的爱金枝玉叶",
"“七公主”父女再续亲情戏<br>"
],
[
"images/b_07.jpg",//大图
"images/s_07.jpg",//小图
"#",
"《绝命岛》：集结两岸三地明星 3000万打造“换心游戏”","去年，一部《风声》让内地观众在大银幕上品味了一次中国式密室虐人游戏的快感，而今年，由新锐导演冯超 执导的惊悚动作片《绝命岛》，将把封闭空间和杀人游戏这两个元素全面升级，并不惜巨资“拍得很炫很酷，和好莱坞媲美”——",
"绝命岛",
"大玩惊悚元素 刑具酷刑血腥升级"
],
[ //数据4
"images/b_08.jpg",//大图
"images/s_08.jpg",//小图
"#",
"《爱上男主播》：青春偶像老路子 开启网剧新时代(更新至第14集)",
"由电影《杜拉拉升职记》编剧王芸的人气网络小说《Ｓ女出没，请注意！》改编的网络偶像剧《爱上男主播》 ，将与由同本小说改编的电视剧同期热播，同时还与电影《山楂树之恋》的出品方团队合作，完美再现电影品 质——",
"爱上男主播",
"“电台金三顺+中国DJ”的唯美爱情故事"
]
);
MDChdtvFocus_1.init();
</script>
4、各项参数的具体意思在js代码中都有详细注释。部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！