特效介绍
模仿搜狐视频首页jQuery幻灯片轮播代码,一共八屏,上下滚动,右边是由缩略图和标题描述组成的按钮,左侧是大图以及大图的标题和更详细的描述。非常适合作为电影网站的banner,由于没有使用任何flash元素,并且带有文字描述,有利于优化推广。
使用方法
1、引入下面的js和css文件:1 | < link type = "text/css" rel = "stylesheet" href = "images/5imoban.net.css" > |
2 | < script type = "text/javascript" src = "http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js" ></ script > |
001 | <script> |
002 | var MDChdtvFocus= function (){ |
003 | this .id=jQuery(arguments[0].id); |
004 | this .bigImgW=arguments[0].bigImgW; |
005 | this .bigImgH=arguments[0].bigImgH; |
006 | this .smallImgW=arguments[0].smallImgW; |
007 | this .smallImgH=arguments[0].smallImgH; |
008 | this .speed=arguments[0].speed||5000; |
009 | this .focusData=arguments; |
010 | this .autoPlay; |
011 | this .autoPlay2; |
012 | }; |
013 | MDChdtvFocus.prototype={ |
014 | init: function (){ |
015 | var that= this ; |
016 | this .id.addClass( "MDChdtvFocus" ); |
017 | var go= function (){ |
018 | that.id.css( "backgroundImage" , "none" ); |
019 | 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>' ); |
020 | 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>' ); |
021 | that.id.html(_bigImg).append(_tab); |
022 | for ( var i=1;i<that.focusData.length;i++){ |
023 | 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>' ); |
024 | }; |
025 | that.a() |
026 | }; |
027 | go(); |
028 | }, |
029 | a: function (){ |
030 | var _tab= this .id.find( "> div:eq(1)" ),that= this ; |
031 | var _num= this .id.find( ".r dl" ).height()-360; |
032 | var gogo= function (i){ |
033 | that.b(i); |
034 | }; |
035 | gogo(); |
036 | this .id.find( ".r a" ).click( function (){ |
037 | return false ; |
038 | }); |
039 | this .id.find( ".r > .up" ).mousedown( function (){ |
040 | if (that.id.find( ".r > div dl" ).position().top<0){ |
041 | if (!that.id.find( ".r > div dl" ).is( ":animated" )){ |
042 | that.id.find( ".r > div dl" ).stop().animate({top: "+=90" },200); |
043 | } |
044 | } |
045 | }); |
046 | this .id.find( ".r > .down" ).mousedown( function (){ |
047 | if (that.id.find( ".r > div dl" ).position().top>-_num){ |
048 | if (!that.id.find( ".r > div dl" ).is( ":animated" )){ |
049 | that.id.find( ".r > div dl" ).stop().animate({top: "-=90" },200); |
050 | } |
051 | } |
052 | }); |
053 | this .id.find( ".l" ).hover( function (){ |
054 | that.id.find( ".l span" ).addClass( "now" ); |
055 | }, function (){ |
056 | that.id.find( ".l span" ).removeClass( "now" ); |
057 | }).click( function (){ |
058 | window.open(that.id.find( ".l a:eq(0)" ).attr( "href" )); |
059 | return false ; |
060 | }); |
061 | _tab.find( "dd" ).each( function (i){ |
062 | ( function (i){ |
063 | _tab.find( "dd" ).eq(i).bind( "mouseenter" , function (){ |
064 | if (jQuery( this )[0].className!= "now" ){ |
065 | clearTimeout(that.autoPlay); |
066 | clearTimeout(that.autoPlay2); |
067 | gogo(i+1); |
068 | clearTimeout(that.autoPlay); |
069 | clearTimeout(that.autoPlay2); |
070 | } else { |
071 | clearTimeout(that.autoPlay); |
072 | clearTimeout(that.autoPlay2); |
073 | } |
074 | }).bind( "mouseleave" , function (){ |
075 | clearTimeout(that.autoPlay); |
076 | that.autoPlay2=setTimeout( function (){ |
077 | var s=i+2; |
078 | s>that.focusData.length-1?s=1:s; |
079 | gogo(s); |
080 | },that.speed); |
081 | }).click( function (){ |
082 | window.open(that.focusData[i+1][2]) |
083 | }); |
084 | })(i) |
085 | }) |
086 | }, |
087 | b: function (i){ |
088 | var _index=i||1,that= this ; |
089 | this .id.find( "img:eq(0)" ).attr( "src" ,that.focusData[_index][0]).parent().attr( "href" ,that.focusData[_index][2]).end().css({ "display" : "block" }); |
090 | this .id.find( "dd" ).removeClass( "now" ).eq(_index-1).addClass( "now" ); |
091 | this .id.find( ".l > div > h1" ).html(that.focusData[_index][3]); |
092 | this .id.find( ".l > div > p" ).html(that.focusData[_index][4]); |
093 | var _w= this .id.find( ".l > div:eq(1)" ).width(); |
094 | this .id.find( ".l > div:eq(0)" ).css( "width" ,0).stop().animate({width:_w},200); |
095 | var _num1= this .id.find( ".r dl dd.now" ).prevAll().length*90; |
096 | var _num2= this .id.find( ".r dl" ).height()-360; |
097 | var _num3=_num1-270; |
098 | if (!that.id.find( ".r > div dl" ).is( ":animated" )){ |
099 | if (that.id.find( ".r > div dl" ).position().top > -(_num1-270)){ |
100 | that.id.find( ".r > div dl" ).stop().animate({top:-_num3},200); |
101 | }; |
102 | if (that.id.find( ".r > div dl" ).position().top < (-_num1)){ |
103 | that.id.find( ".r > div dl" ).stop().animate({top:-_num1},200); |
104 | } |
105 | } |
106 | if (that.id.find( ".r > div dd" ).eq(0)[0].className== "now" ){ |
107 | if (!that.id.find( ".r > div dl" ).is( ":animated" )){ |
108 | that.id.find( ".r > div dl" ).stop().animate({top:0},200); |
109 | } |
110 | }; |
111 | this .autoPlay=setTimeout( function (){ |
112 | that.b(_index==that.focusData.length-1?_index=1:++_index); |
113 | },that.speed); |
114 | } |
115 | } |
116 | </script> |
001 | < div id = "flashFocus" class = "area" collection = "Y" > |
002 | < div id = "MDChdtvFocus_1" class = "MDChdtvFocus" style = "background-image: none; " > |
003 | < div class = "l" style = "width:705px;height:380px" > |
004 | < a target = "_blank" href = "#" > |
005 | < img style = "width: 100%; height: 100%; display: block; " src = "images/b_05.jpg" > |
006 | </ a > |
007 | < span class = "" > |
008 | </ span > |
009 | < div class = "bg" style = "width: 705px; overflow-x: hidden; overflow-y: hidden; display: block; " > |
010 | </ div > |
011 | < div style = "width:705px" > |
012 | < h1 > |
013 | 《生死迷局》:离奇命案引发惊天密谋 延续高智商谍战剧风潮(全集) |
014 | </ h1 > |
015 | < p > |
016 | 谍战悬疑剧《生死迷局》由内地实力派演员严宽、甘婷婷、郑晓宁等联袂主演,剧情由百乐门当红舞女被杀引起,表面看来不过是一个风花雪月的案件,随着案情的深入却揭开了一个骇人听闻的惊天大阴谋—— |
017 | </ p > |
018 | </ div > |
019 | </ div > |
020 | < div class = "r" > |
021 | < span class = "up" > |
022 | < a href = "http://www.5imoban.net/#" > |
023 | </ a > |
024 | </ span > |
025 | < span class = "down" > |
026 | < a href = "http://www.5imoban.net/#" > |
027 | </ a > |
028 | </ span > |
029 | < div > |
030 | < dl style = "top: -90px; " > |
031 | < dd class = "" > |
032 | < img src = "images/s_01.jpg" width = "110" height = "70" > |
033 | < h2 > |
034 | < span > |
035 | </ span > |
036 | 日照重庆 |
037 | </ h2 > |
038 | < p > |
039 | 王小帅“商业转型”的尝试之作 |
040 | </ p > |
041 | </ dd > |
042 | < dd class = "" > |
043 | < img src = "images/s_02.jpg" width = "110" height = "70" > |
044 | < h2 > |
045 | < span > |
046 | </ span > |
047 | 金婚风雨情 |
048 | </ h2 > |
049 | < p > |
050 | 年度收官大戏上演华丽版“冬日恋歌” |
051 | < br > |
052 | </ p > |
053 | </ dd > |
054 | < dd class = "" > |
055 | < img src = "images/s_03.jpg" width = "110" height = "70" > |
056 | < h2 > |
057 | < span > |
058 | </ span > |
059 | 大笑江湖 |
060 | </ h2 > |
061 | < p > |
062 | 小沈阳台上撒欢台下木讷 |
063 | </ p > |
064 | </ dd > |
065 | < dd class = "" > |
066 | < img src = "images/s_04.jpg" width = "110" height = "70" > |
067 | < h2 > |
068 | < span > |
069 | </ span > |
070 | 终极三国第三季 |
071 | </ h2 > |
072 | < p > |
073 | 历史故事结构配搭新科技武器的校园偶像剧 |
074 | </ p > |
075 | </ dd > |
076 | < dd class = "now" > |
077 | < img src = "images/s_05.jpg" width = "110" height = "70" > |
078 | < h2 > |
079 | < span > |
080 | </ span > |
081 | 生死迷局 |
082 | </ h2 > |
083 | < p > |
084 | 严宽颠覆情圣形象 惨遭父亲夺初恋 |
085 | </ p > |
086 | </ dd > |
087 | < dd > |
088 | < img src = "images/s_06.jpg" width = "110" height = "70" > |
089 | < h2 > |
090 | < span > |
091 | </ span > |
092 | 我的爱金枝玉叶 |
093 | </ h2 > |
094 | < p > |
095 | “七公主”父女再续亲情戏 |
096 | < br > |
097 | </ p > |
098 | </ dd > |
099 | < dd > |
100 | < img src = "images/s_07.jpg" width = "110" height = "70" > |
101 | < h2 > |
102 | < span > |
103 | </ span > |
104 | 绝命岛 |
105 | </ h2 > |
106 | < p > |
107 | 大玩惊悚元素 刑具酷刑血腥升级 |
108 | </ p > |
109 | </ dd > |
110 | < dd > |
111 | < img src = "images/s_08.jpg" width = "110" height = "70" > |
112 | < h2 > |
113 | < span > |
114 | </ span > |
115 | 爱上男主播 |
116 | </ h2 > |
117 | < p > |
118 | “电台金三顺+中国DJ”的唯美爱情故事 |
119 | </ p > |
120 | </ dd > |
121 | </ dl > |
122 | </ div > |
123 | </ div > |
124 | </ div > |
125 | < script > |
126 | var MDChdtvFocus_1=new MDChdtvFocus({ |
127 | id:"#MDChdtvFocus_1",//id |
128 | bigImgW:"705",//大图宽 |
129 | bigImgH:"380",//大图高 |
130 | smallImgW:"110",//小图宽 |
131 | smallImgH:"70",//小图高 |
132 | speed:"3000"//自动滚动速度,单位毫秒。 |
133 | }, |
134 | [ |
135 | "images/b_01.jpg",//大图 |
136 | "images/s_01.jpg",//小图 |
137 | "#", //图片链接地址 |
138 | //大图标题 |
139 | "《日照重庆》:王小帅迄今为止投资最大的一部影片", |
140 | //大图描述 |
141 | "第六代导演王小帅的新片《日照重庆》集合了王学圻、李玲玉、范冰冰等众多华语大咖,故事根据真实事件改 编而成。该片在戛纳电影节举行媒体场放映时,赢得观众热烈的掌声,获得了中外媒体的一致好评——", |
142 | //小图标题 |
143 | "日照重庆", |
144 | //小图描述 |
145 | "王小帅“商业转型”的尝试之作" |
146 | ], |
147 | [ |
148 | "images/b_02.jpg",//大图 |
149 | "images/s_02.jpg",//小图 |
150 | "#", |
151 | "《金婚风雨情》:姜文重归荧屏 与妻子周韵抢戏(更新至第15集)","蒋雯丽与张国立的《金婚》当年掀起了一股家庭剧热潮,收视无人能敌。而作为该剧的姊妹篇《金婚风雨情》其实讲的是另一对携手走过50年的夫妻。有前面漂亮的成功典范,《金婚2》作为年度收官大戏确实充满了悬念与挑战——", |
152 | "金婚风雨情", |
153 | "年度收官大戏上演华丽版“冬日恋歌”< br >" |
154 | ], |
155 | [ |
156 | "images/b_03.jpg",//大图 |
157 | "images/s_03.jpg",//小图 |
158 | "#", |
159 | "《江湖啊!江湖!》:平常心打造合家欢喜剧", |
160 | "古装动作喜剧贺岁大片《大笑江湖》已于12月3日全国火爆上映。日前,一辑长达两个小时的超长花絮纪录片《 江湖啊!江湖!》由片方公布,记录了整个剧组以平常的心态,努力将《大笑江湖》制造成开心快乐的贺岁大片的过程——", |
161 | "大笑江湖", |
162 | "小沈阳台上撒欢台下木讷" |
163 | ], |
164 | [ |
165 | "images/b_04.jpg",//大图 |
166 | "images/s_04.jpg",//小图 |
167 | "#", |
168 | "《终极三国》第三季:终极系列的第3部台湾偶像剧 (更新至21集)", |
169 | "《终极三国3》致力于打造年度最搞笑的台湾校园偶像剧,凭着对三国故事的超恶搞剧情及剧中演员大胆夸张 的演绎,《终极三国1》曾在台湾首播便夺下当周收视冠军,第三部更是卯足劲儿要延续第一、二部的热潮——", |
170 | "终极三国第三季", |
171 | "历史故事结构配搭新科技武器的校园偶像剧" |
172 | ], |
173 | [ |
174 | "images/b_05.jpg",//大图 |
175 | "images/s_05.jpg",//小图 |
176 | "#", |
177 | "《生死迷局》:离奇命案引发惊天密谋 延续高智商谍战剧风潮(全集)", |
178 | "谍战悬疑剧《生死迷局》由内地实力派演员严宽、甘婷婷、郑晓宁等联袂主演,剧情由百乐门当红舞女被杀引起,表面看来不过是一个风花雪月的案件,随着案情的深入却揭开了一个骇人听闻的惊天大阴谋——", |
179 | "生死迷局", |
180 | "严宽颠覆情圣形象 惨遭父亲夺初恋" |
181 | ], |
182 | [ |
183 | "images/b_06.jpg",//大图 |
184 | "images/s_06.jpg",//小图 |
185 | "#", |
186 | "《我的爱金枝玉叶》:KBS周末剧收视之王 湖南卫视即将播出(全集)","《我的爱金枝玉叶》由韩国实力派演员李泰兰、金圣洙、池贤宇领衔主演,通过甘愿牺牲和忍耐的真正父亲的样子表现了家人之间的关爱,是韩国KBS电视台2009年热播的一部周末剧,即将于近期登陆湖南卫视——", |
187 | "我的爱金枝玉叶", |
188 | "“七公主”父女再续亲情戏< br >" |
189 | ], |
190 | [ |
191 | "images/b_07.jpg",//大图 |
192 | "images/s_07.jpg",//小图 |
193 | "#", |
194 | "《绝命岛》:集结两岸三地明星 3000万打造“换心游戏”","去年,一部《风声》让内地观众在大银幕上品味了一次中国式密室虐人游戏的快感,而今年,由新锐导演冯超 执导的惊悚动作片《绝命岛》,将把封闭空间和杀人游戏这两个元素全面升级,并不惜巨资“拍得很炫很酷,和好莱坞媲美”——", |
195 | "绝命岛", |
196 | "大玩惊悚元素 刑具酷刑血腥升级" |
197 | ], |
198 | [ //数据4 |
199 | "images/b_08.jpg",//大图 |
200 | "images/s_08.jpg",//小图 |
201 | "#", |
202 | "《爱上男主播》:青春偶像老路子 开启网剧新时代(更新至第14集)", |
203 | "由电影《杜拉拉升职记》编剧王芸的人气网络小说《S女出没,请注意!》改编的网络偶像剧《爱上男主播》 ,将与由同本小说改编的电视剧同期热播,同时还与电影《山楂树之恋》的出品方团队合作,完美再现电影品 质——", |
204 | "爱上男主播", |
205 | "“电台金三顺+中国DJ”的唯美爱情故事" |
206 | ] |
207 | ); |
208 | MDChdtvFocus_1.init(); |
209 | </ script > |