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

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

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

    模仿搜狐视频首页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集)",
    "由电影《杜拉拉升职记》编剧王芸的人气网络小说《S女出没,请注意!》改编的网络偶像剧《爱上男主播》 ,将与由同本小说改编的电视剧同期热播,同时还与电影《山楂树之恋》的出品方团队合作,完美再现电影品 质——",
    "爱上男主播",
    "“电台金三顺+中国DJ”的唯美爱情故事"
    ]
);
MDChdtvFocus_1.init();
</script>
4、各项参数的具体意思在js代码中都有详细注释。


部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!
上一篇:带投影效果的JS 3D图片滚动效果 下一篇:简单的淡入淡出幻灯图片jQuery代码
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢