腾讯微云首页jquery焦点图轮播滚动切换特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是腾讯微云首页jquery焦点图轮播滚动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Language" content="zh-cn">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>腾讯微云首页jquery焦点图</title>
    <link rel="stylesheet" href="css/reset.css" media="screen">
    <link rel="stylesheet" href="css/wy-mod-banner.css" media="screen">
    <!--[if IE 6]><script type="text/javascript">try{document.execCommand('BackgroundImageCache',false,true);}catch(e){}</script><![endif]-->
</head>
	<body>
    <div class="wrapper">
        <div class="wy-content">
            <div class="wy-mod-banner">
                <div id="_banners" class="banners">
                    <div class="banner banner4">
                        <img src="images/banner4.jpg" alt="微云，生活精彩">
                        <div class="info">
                            <h3>微云，生活精彩</h3>
                            <p>收录生活中的点点滴滴，精彩从此刻开始！</p>
                            <a href="#" data-log-id="150008" class="link-download" target="_blank" data-log-id="150001"><span>马上下载 </span><i class="bor_c"></i></a>
                        </div>
                    </div>
                    <div class="banner banner3">
                        <img src="images/banner3.jpg" alt="微云，生活精彩">
                        <div class="info">
                            <h3>微云，生活精彩</h3>
                            <p>收录生活中的点点滴滴，精彩从此刻开始！</p>
                            <a href="#" data-log-id="150008" class="link-download" target="_blank" data-log-id="150001"><span>马上下载 </span><i class="bor_c"></i></a>
                        </div>
                    </div>
                    <div class="banner banner2">
                        <img src="images/banner2.jpg" alt="微云，生活精彩">
                        <div class="info">
                            <h3>微云，生活精彩</h3>
                            <p>收录生活中的点点滴滴，精彩从此刻开始！</p>
                            <a href="#" data-log-id="150008" class="link-download" target="_blank" data-log-id="150001"><span>马上下载 </span><i class="bor_c"></i></a>
                        </div>
                    </div>
                    <div class="banner banner1">
                        <img src="images/banner1.jpg" alt="微云，生活精彩">
                        <div class="info">
                            <h3>微云，生活精彩</h3>
                            <p>收录生活中的点点滴滴，精彩从此刻开始！</p>
                            <a href="#" data-log-id="150008" class="link-download" target="_blank" data-log-id="150001"><span>马上下载</span> <i class="bor_c"></i></a>
                        </div>
                    </div>
                </div>
                <div id="_focus" class="focus">
                    <a data-index="0" href="#" class="on">
                        <span class="bg-b"></span>
                        <span class="inner"></span>
                    </a>
                    <a data-index="1" href="#">
                        <span class="bg-b"></span>
                        <span class="inner"></span>
                    </a>
                    <a data-index="2" href="#">
                        <span class="bg-b"></span>
                        <span class="inner"></span>
                    </a>
                    <a data-index="3" href="#">
                        <span class="bg-b"></span>
                        <span class="inner"></span>
                    </a>     
                </div>
            </div>

        </div>

    </div>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">

    var glume = function(banners_id, focus_id){
        this.$ctn = $('#' + banners_id);
        this.$focus = $('#' + focus_id);
        this.$adLis = null;
        this.$btns = null;
        this.switchSpeed = 5;//自动播放间隔(s)
        this.defOpacity = 1;
        this.crtIndex = 0;
        this.adLength = 0;
        this.timerSwitch = null;
        this.init();
    };
    glume.prototype = {
        fnNextIndex:function(){
            return (this.crtIndex >= this.adLength-1)?0:this.crtIndex+1;
        },
        //动画切换
        fnSwitch:function(toIndex){
            if(this.crtIndex==toIndex){return;}
            this.$adLis.css('zIndex', 0);
            this.$adLis.filter(':eq('+this.crtIndex+')').css('zIndex', 2);
            this.$adLis.filter(':eq('+toIndex+')').css('zIndex', 1);
            this.$btns.removeClass('on');
            this.$btns.filter(':eq('+toIndex+')').addClass('on');
            var me = this;

            $(this.$adLis[this.crtIndex]).animate({
                opacity: 0
            }, 1000, function() {
                me.crtIndex = toIndex;
                $(this).css({
                    opacity: me.defOpacity,
                    zIndex: 0
                });
            });
        },
        fnAutoPlay:function(){
            this.fnSwitch(this.fnNextIndex());
        },
        fnPlay:function(){
            var me = this;
            me.timerSwitch = window.setInterval(function() {
                me.fnAutoPlay();
            },me.switchSpeed*1000);
        },
        fnStopPlay:function(){
            window.clearTimeout(this.timerSwitch);
            this.timerSwitch = null;
        },

        init:function(){
            this.$adLis = this.$ctn.children();
            this.$btns = this.$focus.children();
            this.adLength = this.$adLis.length;

            var me = this;
            //点击切换
            this.$focus.on('click', 'a', function(e) {
                e.preventDefault();
                var index = parseInt($(this).attr('data-index'), 10)
                me.fnSwitch(index);
            });
            this.$adLis.filter(':eq('+ this.crtIndex +')').css('zIndex', 2);
            this.fnPlay();

            //hover时暂停动画
            this.$ctn.hover(function() {
                me.fnStopPlay();
            }, function() {
                me.fnPlay();
            });

            if($.browser.msie && $.browser.version < 7) {
                this.$btns.hover(function() {
                    $(this).addClass('hover');
                },function() {
                    $(this).removeClass('hover');
                });
            }
        }
    };
    var player1 = new glume('_banners', '_focus');    
    </script>
</body>
</html>

CSS代码(reset.css):

/*CSS Reset*/
body,div,ul,ol,li,hgroup,menu,nav,section{margin:0;padding:0;}
body{background:#e6e6e6}
body,input,button,textarea,select{font:12px/1.5 Tahoma,Helvetica,Arial;color:#4c4c4c;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
li{list-style:none;}
a{color:#d30000;text-decoration:none;}
a:hover,a:active{text-decoration:underline;}
.wrapper{position:relative;z-index:1;min-width:1000px;margin:auto;overflow:hidden;}
.clearfix:after{display:block;height:0px;overflow:hidden;clear:both;content:""}
.clearfix{*zoom:1;}

CSS代码(wy-mod-banner.css):

.wy-mod-banner{background:#fff;margin-top:-80px;height:680px;position:relative;}
.wy-mod-banner .banners{width:1600px;height:680px;overflow:hidden;position:absolute;left:50%;margin-left:-800px;}
.wy-mod-banner .banner{width:1600px;height:680px;overflow:hidden;position:absolute;left:50%;margin-left:-800px;}
.wy-mod-banner .banner .info{width:410px;height:230px;position:absolute;right:50%;margin-right:-480px;background:url(img/txt1.png) no-repeat;top:230px;}
.wy-mod-banner .banner2 .info{background-image:url(img/txt2.png);}
.wy-mod-banner .banner3 .info{background-image:url(img/txt3.png);}
.wy-mod-banner .banner4 .info{background-image:url(img/txt4.png);}
.wy-mod-banner .info .link-download{width:148px;height:40px;overflow:hidden;position:absolute;bottom:-70px;right:0px;cursor:pointer;text-decoration:none;}
.wy-mod-banner .info .link-download span{position:absolute;display:block;left:10px;cursor:pointer;font-size:28px;line-height:50px;color:white;font-weight:500;font-family:"Microsoft YaHei"}
.wy-mod-banner .banner1 .info .link-download span,.wy-mod-banner .banner2 .info .link-download span{color:#3091f2;}
.wy-mod-banner .info .link-download .bor_c{position:absolute;width:14px;height:26px;right:0px;top:14px;background-image:url(img/ico_bule.32.png);_background-image:url(img/ico_bule.png);}
.wy-mod-banner .banner3 .info .link-download .bor_c,.wy-mod-banner .banner4 .info .link-download .bor_c{background-image:url(img/ico_white.32.png);_background-image:url(img/ico_white.png);}
.wy-mod-banner .banner .info h3{display:none;}
.wy-mod-banner .banner .info p{display:none;}
.wy-mod-banner .focus{width:960px;margin:0px auto;padding-top:640px;text-align:center;}
.wy-mod-banner .focus a{text-decoration:none;z-index:3;width:24px;height:74px;position:relative;display:inline-block;*display:inline;overflow:hidden;margin:0px 3px;zoom:1;}
.wy-mod-banner .focus a .bg-m{z-index:4;color:white;line-height:40px;font-size:40px;position:absolute;display:block;left:2px;top:6px;cursor:pointer;display:none;}
.wy-mod-banner .focus a .bg-b{background-image:url(img/i_dot.32.png);position:absolute;display:block;left:0px;top:0px;cursor:pointer;width:18px;height:18px;}
.wy-mod-banner .focus a .inner{background-image:url(img/i_dot_hover.32.png);position:absolute;left:0px;top:0px;z-index:9;opacity:0;display:none\0;+display:none;*display:none;width:18px;height:18px;}
.wy-mod-banner .focus a.on .inner,.wy-mod-banner .focus a:hover .inner{cursor:pointer;display:block;border:0;-webkit-transition:opacity .3s ease-in-out;-ms-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out;opacity:1;}
.wy-mod-banner .focus .hover .inner{display:block;}

附件:下载该文件资源,减少时间成本(增值服务)