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

Maison

interface Web

tutoriel HTML

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

php中世界最好的语言

Dec 02, 2017 pm 01:07 PM

h5html5实例

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 id="KinerLotter-大转盘">KinerLotter——大转盘</h1>
    <div id="box">
        <div class="outer KinerLottery KinerLotteryContent"><img  src="/static/imghwm/default1.png"  data-src="./imgs/lotteryContent.png"  class="lazy"   alt="Explication détaillée et exemples de création d'un carrousel en HTML5" ></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>

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!

Déclaration

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article connexe

HTML vs CSS vs JavaScript: un aperçu comparatifApr 16, 2025 am 12:04 AM

Les rôles de HTML, CSS et JavaScript dans le développement Web sont: HTML est responsable de la structure du contenu, CSS est responsable du style et JavaScript est responsable du comportement dynamique. 1. HTML définit la structure et le contenu de la page Web via des balises pour assurer la sémantique. 2. CSS contrôle le style de page Web via des sélecteurs et des attributs pour le rendre beau et facile à lire. 3. JavaScript contrôle le comportement de la page Web via les scripts pour atteindre des fonctions dynamiques et interactives.

HTML: Est-ce un langage de programmation ou autre chose?Apr 15, 2025 am 12:13 AM

HtmlisnotaprogrammingNanguage; itisamarkupLanguage.1) htmlstructuresAndFormaSwebContentUsingTags.2) itworkswithcssforStylingandjavaScriptForIterActivity, EnhancingWebDevelopment.

HTML: construire la structure des pages WebApr 14, 2025 am 12:14 AM

HTML est la pierre angulaire de la construction de la structure des pages Web. 1. HTML définit la structure et la sémantique du contenu et les utilisations, etc. Tags. 2. Fournir des marqueurs sémantiques, tels que, etc., pour améliorer l'effet SEO. 3. Pour réaliser l'interaction de l'utilisateur via des balises, faites attention à la vérification de la forme. 4. Utilisez des éléments avancés tels que, combinés avec JavaScript pour obtenir des effets dynamiques. 5. Les erreurs courantes incluent des étiquettes non clôturées et des valeurs d'attribut non déposées et des outils de vérification sont nécessaires. 6. Les stratégies d'optimisation comprennent la réduction des demandes HTTP, la compression du HTML, l'utilisation de balises sémantiques, etc.

Du texte aux sites Web: la puissance de HTMLApr 13, 2025 am 12:07 AM

HTML est un langage utilisé pour créer des pages Web, définissant la structure des pages Web et le contenu via des balises et des attributs. 1) HTML organise la structure des documents via des balises, telles que. 2) Le navigateur analyse HTML pour construire le DOM et rend la page Web. 3) De nouvelles caractéristiques de HTML5, telles que, améliorez les fonctions multimédias. 4) Les erreurs courantes incluent des étiquettes non clôturées et des valeurs d'attribut non attribuées. 5) Les suggestions d'optimisation incluent l'utilisation de balises sémantiques et la réduction de la taille du fichier.

Comprendre HTML, CSS et JavaScript: un guide pour débutantApr 12, 2025 am 12:02 AM

WebDevelopmentReliesOnHTML, CSS, etjavascript: 1) HTMLSTRUCTURESCONTENT, 2) CSSSTYLESIT, et3) JavascriptAdddsInterActivity, Forming TheasisofmodernweBEBExperiences.

Le rôle de HTML: Structurer le contenu WebApr 11, 2025 am 12:12 AM

Le rôle de HTML est de définir la structure et le contenu d'une page Web via des balises et des attributs. 1. HTML organise le contenu via des balises telles que, ce qui le rend facile à lire et à comprendre. 2. Utilisez des balises sémantiques telles que, etc. pour améliorer l'accessibilité et le référencement. 3. Optimisation du code HTML peut améliorer la vitesse de chargement des pages Web et l'expérience utilisateur.

HTML et code: un examen plus approfondi de la terminologieApr 10, 2025 am 09:28 AM

Htmlisaspecificypeofcodefocusedonconstructringwebcontent, tandis que "code" en général incluse les langues liés à lajavaScriptandpythonforfonctionnality.1) htmldefineswebpagestructureusingtags.2) "Code" enclueSawidererRangeFlanguageForgicandInteract "

HTML, CSS et JavaScript: outils essentiels pour les développeurs WebApr 09, 2025 am 12:12 AM

HTML, CSS et JavaScript sont les trois piliers du développement Web. 1. HTML définit la structure de la page Web et utilise des balises telles que, etc. 2. CSS contrôle le style de page Web, en utilisant des sélecteurs et des attributs tels que la couleur, la taille de la police, etc. 3. JavaScript réalise les effets dynamiques et l'interaction, par la surveillance des événements et les opérations DOM.

See all articles