首页 > 特效插件 > 滚动轮播 >  仿搜狐视频首页jQuery幻灯片轮播代码正文

仿搜狐视频首页jQuery幻灯片轮播代码

特效介绍
jQuery幻灯片轮播代码

    模仿搜狐视频首页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>
2、JS代码:
001<script>
002var 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};
013MDChdtvFocus.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>
3、html代码:
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>
126var 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);
208MDChdtvFocus_1.init();
209</script>
4、各项参数的具体意思在js代码中都有详细注释。