HTML5에서 캐러셀을 만드는 방법에 대한 자세한 설명과 예-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

HTML5에서 캐러셀을 만드는 방법에 대한 자세한 설명과 예

php中世界最好的语言

Dec 02, 2017 pm 01:07 PM

h5html5예

오늘 가져온 케이스는 로또 프로그램으로 바로 사용할 수 있는 HTML5 캐러셀 예시입니다. 필요한 친구들이 사용할 수 있는 케이스 코드는 다음과 같습니다.

<!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="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>

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 기사

HTML 태그와 HTML 속성의 차이점은 무엇입니까?May 14, 2025 am 12:01 AM

htmltagsdefinestructureofawebpage, whiletributesdfunctionalityanddetails.1) tags, andoutlinethecontent'splacement.2) agtributessuchassrc, class 및 styleenhancetagsbysingingimages ources, styling, and mormore, mormor, 개선.

HTML의 미래 : 진화와 트렌드May 13, 2025 am 12:01 AM

HTML의 미래는보다 의미적이고 기능적이며 모듈 식 방향으로 발전 할 것입니다. 1) 의미화로 인해 태그가 콘텐츠를보다 명확하게 설명하여 SEO 및 장벽없는 액세스를 향상시킵니다. 2) 기능화는 사용자의 요구를 충족시키기 위해 새로운 요소와 속성을 소개합니다. 3) 모듈화는 구성 요소 개발을 지원하고 코드 재사용 성을 향상시킵니다.

HTML 속성이 웹 개발에 중요한 이유는 무엇입니까?May 12, 2025 am 12:01 AM

htmlattributesarecrucialinwebdevelopmentforcontrollingbehavior, 외관 및 기능. 접근성, 접근성, andseo.forexample, thesrcattributeintagspactsseo, whike whike whike whike whike whike thercattributeintagspactsseo

ALT 속성의 목적은 무엇입니까? 왜 중요한가요?May 11, 2025 am 12:01 AM

ALT 속성은 HTML에서 태그의 중요한 부분이며 이미지에 대한 대체 텍스트를 제공하는 데 사용됩니다. 1. 이미지를로드 할 수 없으면 ALT 속성의 텍스트가 표시되어 사용자 경험을 향상시킵니다. 2. 스크린 리더는 ALT 속성을 사용하여 시각 장애가있는 사용자가 그림의 내용을 이해하도록 도와줍니다. 3. 검색 엔진 인덱스 텍스트 텍스트는 웹 페이지의 SEO 순위를 향상시키기 위해 ALT 속성의 텍스트를 색인 텍스트입니다.

HTML, CSS 및 JavaScript : 예제 및 실제 응용 프로그램May 09, 2025 am 12:01 AM

웹 개발에서 HTML, CSS 및 JavaScript의 역할은 다음과 같습니다. 1. HTML은 웹 페이지 구조를 구축하는 데 사용됩니다. 2. CSS는 웹 페이지의 모양을 아름답게하는 데 사용됩니다. 3. JavaScript는 동적 상호 작용을 달성하는 데 사용됩니다. 태그, 스타일 및 스크립트를 통해이 세 가지는 함께 현대 웹 페이지의 핵심 기능을 구축합니다.

태그에서 Lang 속성을 어떻게 설정합니까? 이것이 중요한 이유는 무엇입니까?May 08, 2025 am 12:03 AM

태그의 Lang 속성을 설정하는 것은 웹 접근성 및 SEO를 최적화하는 핵심 단계입니다. 1) 태그에 LANG 속성을 설정하십시오. 2) 다국어 컨텐츠에서는 다른 언어 부품에 대한 LANG 속성을 설정하십시오. 3) "en", "fr", "zh"와 같은 ISO639-1 표준을 준수하는 언어 코드를 사용하여 LANG 속성을 올바르게 설정하면 웹 페이지 및 검색 엔진 순위의 접근성을 향상시킬 수 있습니다.

HTML 속성의 목적은 무엇입니까?May 07, 2025 am 12:01 AM

htmlattributesearsentialforenhancingwebelements'functionalityandAmpearance.theyaddinformationTodeFineBehavior, 외관 및 간호, WebsITESITERACTIVE, RAPITIVE 및 VVESILLY -CAMENTION.ATTRIBUTESLIKESRC, HREF, 클래스, 유형 및 디스티브 트랜스포트

HTML에서 목록을 어떻게 만드나요?May 06, 2025 am 12:01 AM

ToCreateAlistInhtml, useUnorderEdListandForOrdLists : 1) forUnderedList, wrapitemSinanduseForeachitem, renderingasabulletedList.2) forOrderEdlists, useandfornumberedLists, useandfornumberedlists, useandfornumberedlists, useandfornumberedlists, withTheyPeatTributeFferentNumberingStyles.

See all articles