Explication détaillée et exemples de création d'un carrousel en HTML5-tutoriel HTML-php.cn

Explication détaillée et exemples de création d'un carrousel en HTML5

php中世界最好的语言

Libérer： 2017-12-02 13:07:21

original

7179 Les gens l'ont consulté

Le cas qui vous est présenté aujourd'hui est un exemple de carrousel HTML5, qui peut être directement utilisé comme programme de loterie. Les amis dans le besoin peuvent l'utiliser. Voici le code du cas.

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <title>html5制作转盘游戏 </title>
         <meta name="keywords" content=" html5制作转盘游戏 " />
         <meta name="description" content=" html5制作转盘游戏 " />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="css/kinerLottery.css">
    <style>  
         h1{
                   width: 100%;
                   height: 3rem;
                   line-height: 3rem;
                   font-size: 1.8rem;
                   color:#c60;
                   text-align: center;
                   font-weight: bolder;
         }
 
    </style>
</head>
<body>
         <h1>KinerLotter——大转盘</h1>
    <div id="box">
        <div class="outer KinerLottery KinerLotteryContent"><img src="./imgs/lotteryContent.png"></div>
        <!-- 大专盘分为三种状态：活动未开始（no-start）、活动进行中(start)、活动结束(completed),可通过切换class进行切换状态，js会根据这3个class进行匹配状态 -->
        <div class="inner KinerLotteryBtn start"></div>
    </div>
    <script src="js/zepto.min.js"></script>
    <script src="js/kinerLottery.js"></script>
    <script>
    /**
     * 根据转盘旋转角度判断获得什么奖品
     * @param deg
     * @returns {*}
     */
    var whichAward = function(deg) {
        if ((deg > 330 && deg <= 360) || (deg > 0 && deg <= 30)) { //10M流量
            return "三网通流量 10M";
        } else if ((deg > 30 && deg <= 90)) { //IPhone 7
            return "iPhone7";
        } else if (deg > 90 && deg <= 150) { //30M流量
            return "三网通流量 30M";
        } else if (deg > 150 && deg <= 210) { //5元话费
            return "话费5元";
        } else if (deg > 210 && deg <= 270) { //IPad mini 4
            return "ipad mini4";
        } else if (deg > 270 && deg <= 330) { //20元话费
            return "话费20元";
        }
    }
 
    var KinerLottery = new KinerLottery({
        rotateNum: 8, //转盘转动圈数
        body: "#box", //大转盘整体的选择符或zepto对象
        direction: 0, //0为顺时针转动,1为逆时针转动
        disabledHandler: function(key) {
            switch (key) {
                case "noStart":
                    alert("活动尚未开始");
                    break;
                case "completed":
                    alert("活动已结束");
                    break;
            }
        }, //禁止抽奖时回调
        clickCallback: function() {
            //此处访问接口获取奖品
            function random() {
                return Math.floor(Math.random() * 360);
            }
            this.goKinerLottery(random());
        }, //点击抽奖按钮,再次回调中实现访问后台获取抽奖结果,拿到抽奖结果后显示抽奖画面
        KinerLotteryHandler: function(deg) {
                alert("恭喜您获得:" + whichAward(deg));
            } //抽奖结束回调
    });
    </script>
</body>
 
</html>

Copier après la connexion

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Étapes pour implémenter les cookies HTTP à l'aide de Js

Étapes pour implémenter la ligne pointillée de la bordure HTML

Quelle est la syntaxe commune d'AJAX

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!