Detailed explanation and examples of creating a carousel in HTML5
Dec 02, 2017 pm 01:07 PM
The case brought to you today is an HTML5 carousel example, which can be directly used as a lottery program. Friends in need can use it. The following is the case code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html5制作轉(zhuǎn)盤游戲 </title>
<meta name="keywords" content=" html5制作轉(zhuǎn)盤游戲 " />
<meta name="description" content=" html5制作轉(zhuǎn)盤游戲 " />
<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——大轉(zhuǎn)盤</h1>
<div id="box">
<div class="outer KinerLottery KinerLotteryContent"><img src="./imgs/lotteryContent.png"></div>
<!-- 大專盤分為三種狀態(tài)：活動未開始（no-start）、活動進(jìn)行中(start)、活動結(jié)束(completed),可通過切換class進(jìn)行切換狀態(tài)，js會根據(jù)這3個class進(jìn)行匹配狀態(tài) -->
<div class="inner KinerLotteryBtn start"></div>
</div>
<script src="js/zepto.min.js"></script>
<script src="js/kinerLottery.js"></script>
<script>
/**
* 根據(jù)轉(zhuǎn)盤旋轉(zhuǎn)角度判斷獲得什么獎品
* @param deg
* @returns {*}
*/
var whichAward = function(deg) {
if ((deg > 330 && deg <= 360) || (deg > 0 && deg <= 30)) { //10M流量
return "三網(wǎng)通流量 10M";
} else if ((deg > 30 && deg <= 90)) { //IPhone 7
return "iPhone7";
} else if (deg > 90 && deg <= 150) { //30M流量
return "三網(wǎng)通流量 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, //轉(zhuǎn)盤轉(zhuǎn)動圈數(shù)
body: "#box", //大轉(zhuǎn)盤整體的選擇符或zepto對象
direction: 0, //0為順時針轉(zhuǎn)動,1為逆時針轉(zhuǎn)動
disabledHandler: function(key) {
switch (key) {
case "noStart":
alert("活動尚未開始");
break;
case "completed":
alert("活動已結(jié)束");
break;
}
}, //禁止抽獎時回調(diào)
clickCallback: function() {
//此處訪問接口獲取獎品
function random() {
return Math.floor(Math.random() * 360);
}
this.goKinerLottery(random());
}, //點擊抽獎按鈕,再次回調(diào)中實現(xiàn)訪問后臺獲取抽獎結(jié)果,拿到抽獎結(jié)果后顯示抽獎畫面
KinerLotteryHandler: function(deg) {
alert("恭喜您獲得:" + whichAward(deg));
} //抽獎結(jié)束回調(diào)
});
</script>
</body>
</html>I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!
Related reading:
Implementation steps of using JS to operate HTTP Cookies
html Implementation steps of dotted border line
What is the common syntax of AJAX
The above is the detailed content of Detailed explanation and examples of creating a carousel in HTML5. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Understanding H5: The Meaning and Significance
May 11, 2025 am 12:19 AM
H5 is HTML5, the fifth version of HTML. HTML5 improves the expressiveness and interactivity of web pages, introduces new features such as semantic tags, multimedia support, offline storage and Canvas drawing, and promotes the development of Web technology.
HTML5: Limitations
May 09, 2025 pm 05:57 PM
HTML5hasseverallimitationsincludinglackofsupportforadvancedgraphics,basicformvalidation,cross-browsercompatibilityissues,performanceimpacts,andsecurityconcerns.1)Forcomplexgraphics,HTML5'scanvasisinsufficient,requiringlibrarieslikeWebGLorThree.js.2)I
Significant Goals of HTML5: Enhancing Web Development and User Experience
May 14, 2025 am 12:18 AM
HTML5aimstoenhancewebdevelopmentanduserexperiencethroughsemanticstructure,multimediaintegration,andperformanceimprovements.1)Semanticelementslike,,,andimprovereadabilityandaccessibility.2)andtagsallowseamlessmultimediaembeddingwithoutplugins.3)Featur
What is Microdata? HTML5 Explained
Jun 10, 2025 am 12:09 AM
MicrodataenhancesSEOandcontentdisplayinsearchresultsbyembeddingstructureddataintoHTML.1)Useitemscope,itemtype,anditempropattributestoaddsemanticmeaning.2)ApplyMicrodatatokeycontentlikebooksorproductsforrichsnippets.3)BalanceusagetoavoidclutteringHTML
HTML5 Microdata: The best online tools
Jun 09, 2025 am 12:06 AM
ThebestonlinetoolsforHTML5MicrodataareGoogleStructuredDataMarkupHelperandSchema.org'sMarkupValidator.1)GoogleStructuredDataMarkupHelperisuser-friendly,guidinguserstoaddMicrodatatagsforenhancedSEO.2)Schema.org'sMarkupValidatorchecksMicrodataimplementa
HTML5: Transforming the Web with New Features and Capabilities
May 11, 2025 am 12:12 AM
HTML5transformswebdevelopmentbyintroducingsemanticelements,multimediacapabilities,powerfulAPIs,andperformanceoptimizationtools.1)Semanticelementslike,,,andenhanceSEOandaccessibility.2)Multimediaelementsandallowdirectembeddingwithoutplugins,improvingu
HTML5: Goals in 2024
May 13, 2025 am 12:13 AM
HTML5'sgoalsin2024focusonrefinementandoptimization,notnewfeatures.1)Enhanceperformanceandefficiencythroughoptimizedrendering.2)Improveaccessibilitywithrefinedattributesandelements.3)Addresssecurityconcerns,particularlyXSS,withwiderCSPadoption.4)Ensur
The Aims of HTML5: Creating a More Powerful and Accessible Web
May 14, 2025 am 12:18 AM
HTML5aimstoenhancewebcapabilities,makingitmoredynamic,interactive,andaccessible.1)Itsupportsmultimediaelementslikeand,eliminatingtheneedforplugins.2)Semanticelementsimproveaccessibilityandcodereadability.3)Featureslikeenablepowerful,responsivewebappl
