一、作品展示

在这里插入图片描述

二、文件目录

在这里插入图片描述

三、代码实现


<html lang="zh-CN"><head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>腾讯GAD艺行者游戏美术大赛</title>
    <meta name="Keywords" content="GAD艺行者游戏美术大赛，游戏美术大赛，艺行者，腾讯GAD游戏美术大赛">
    <meta name="description" content="2017“艺行者”腾讯GAD游戏美术大赛是由腾讯GAD主办，腾讯互娱光子美术中心与全球顶尖的用户界面产品生产商Wacom共同承办的游戏美术作品大赛活动，本次活动面向所有的游戏美术从业者以及在校大学生，旨在为参赛者搭建一个艺术学习和成长的交流平台，打造游戏美术专业顶尖赛事">
    <link rel="stylesheet" href="./css/global.css">
    <link rel="stylesheet" href="./css/swiper-3.4.1.min.css">
    <link rel="stylesheet" href="./css/index.css">
    <script type="text/javascript">
        function isMobile(){
            var u = navigator.userAgent,
                a = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"],
                res = false;
            for (var i = 0; i < a.length; i++) {
                if (u.indexOf(a[i]) > 0) {
                    res = true;
                    break;
                }
            }
            return res;
        }
        //判断IE9及以下，不支持flex布局属性提示升级
        function browserType(){
            var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
            var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器
            // var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器
            var isIE=window.ActiveXObject || "ActiveXObject" in window
            // var isEdge = userAgent.indexOf("Windows NT 6.1; Trident/7.0;") > -1 && !isIE; //判断是否IE的Edge浏览器
            var isEdge = userAgent.indexOf("Edge") > -1; //判断是否IE的Edge浏览器
            var isFF = userAgent.indexOf("Firefox") > -1; //判断是否Firefox浏览器
            var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1; //判断是否Safari浏览器
            var isChrome = userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1&&!isEdge; //判断Chrome浏览器

            if (isIE)
            {
                var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
                reIE.test(userAgent);
                var fIEVersion = parseFloat(RegExp["$1"]);
                if(userAgent.indexOf('MSIE 6.0')!=-1){
                    return "IE6";
                }else if(fIEVersion == 7)
                { return "IE7";}
                else if(fIEVersion == 8)
                { return "IE8";}
                else if(fIEVersion == 9)
                { return "IE9";}
                else if(fIEVersion == 10)
                { return "IE10";}
                else if(userAgent.toLowerCase().match(/rv:([\d.]+)\) like gecko/)){
                    return "IE11";
                }
                else
                { return "0"}//IE版本过低
            }//isIE end

            if (isFF) { return "FF";}
            if (isOpera) { return "Opera";}
            if (isSafari) { return "Safari";}
            if (isChrome) { return "Chrome";}
            if (isEdge) { return "Edge";}
        }
        if(browserType() === "IE6" || browserType() === "IE7" || browserType() === "IE8"  || browserType() === "IE9"){
            window.location = "/update_guide.html";
        }
        if(isMobile()){
            location.href = 'mobile.html';
        }
    </script>
</head>
<body>
<!--页面主内容[[-->
<div class="m-container index">
    <!--头部导航栏[[-->
    <div class="headnav ">
        <div class="headnav-wrap">
            <a class="headnav-logo" href="http://www.gad.qq.com" target="_blank">
                <img class="logo-img" width="144" height="41" src="./img/activity_logo.png">
            </a>
            <div class="headnav-main">
                <ul class="headnav-list f-clearfix f-fl">
                    <li class="list-item cur">
                        <a class="list-link" href="javascript:;">首页</a>
                    </li>
                    <li class="list-item">
                        <a class="list-link" href="javascript:;">作品征集</a>
                    </li>
                    <li class="list-item">
                        <a class="list-link" href="javascript:;">作品评选</a>
                    </li>
                    <li class="list-item">
                        <a class="list-link" href="javascript:;">线下巡回</a>
                    </li>
                    <li class="list-item">
                        <a class="list-link" href="javascript:;">合作伙伴</a>
                    </li>
                </ul>
                <!--[交互说明]在headnav-signup后追加类：
                    立即报名（默认） | show-signup-normal
                    我的报名 | show-signup-my
                    报名结束 | show-signup-end

                    点击 立即报名/我的报名，调起报名弹窗，报名结束不可点
                -->
                <div class="headnav-signup show-signup-normal">
                    <a class="signup-btn btn-default normal" href="//gad.qq.com/megagame/intro/93">立即参赛 &gt;</a>
                    <a class="signup-btn btn-default my" href="javascript:;">我的参赛</a>
                    <a class="signup-btn btn-disabled end" href="javascript:;">比赛结束</a>
                </div>
            </div>
        preloadImages: true,
        width: window.innerWidth,
        mousewheelControl: true,
        nextButton: '.slide-next',
        onSlideChangeStart: function () {
            var swiperI = mySwiper.activeIndex;
            console.log(swiperI);
            if(swiperI<0){
                $(".headnav-list .list-item").removeClass("cur");
            }else{
                $(".headnav-list .list-item").removeClass("cur").eq(swiperI).addClass('cur');
            }
        }
    });
    $(".headnav-list .list-item").click(function(event) {
        /* Act on the event */
        // console.log($(this).index());
        $(".headnav-list .list-item").removeClass("cur");
        $(this).addClass('cur');
        mySwiper.slideTo($(this).index(), 1000, false);
    });
</script>
<!--测试JS]]-->

</body>
</html>