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)：活動(dòng)未開始（no-start）、活動(dòng)進(jìn)行中(start)、活動(dòng)結(jié)束(completed),可通過切換class進(jìn)行切換狀態(tài)，js會(huì)根據(jù)這3個(gè)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)角度判斷獲得什么獎(jiǎng)品
* @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元話費(fèi)
return "話費(fèi)5元";
} else if (deg > 210 && deg <= 270) { //IPad mini 4
return "ipad mini4";
} else if (deg > 270 && deg <= 330) { //20元話費(fèi)
return "話費(fèi)20元";
}
}
var KinerLottery = new KinerLottery({
rotateNum: 8, //轉(zhuǎn)盤轉(zhuǎn)動(dòng)圈數(shù)
body: "#box", //大轉(zhuǎn)盤整體的選擇符或zepto對象
direction: 0, //0為順時(shí)針轉(zhuǎn)動(dòng),1為逆時(shí)針轉(zhuǎn)動(dòng)
disabledHandler: function(key) {
switch (key) {
case "noStart":
alert("活動(dòng)尚未開始");
break;
case "completed":
alert("活動(dòng)已結(jié)束");
break;
}
}, //禁止抽獎(jiǎng)時(shí)回調(diào)
clickCallback: function() {
//此處訪問接口獲取獎(jiǎng)品
function random() {
return Math.floor(Math.random() * 360);
}
this.goKinerLottery(random());
}, //點(diǎn)擊抽獎(jiǎng)按鈕,再次回調(diào)中實(shí)現(xiàn)訪問后臺(tái)獲取抽獎(jiǎng)結(jié)果,拿到抽獎(jiǎng)結(jié)果后顯示抽獎(jiǎng)畫面
KinerLotteryHandler: function(deg) {
alert("恭喜您獲得:" + whichAward(deg));
} //抽獎(jiǎng)結(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
