Home > Article > Web Front-end > Summarize the example tutorial of using Require.js to encapsulate the native js carousel chart

Summarize the example tutorial of using Require.js to encapsulate the native js carousel chart

零下一度Original: 2017-06-17 10:39:401262browse

This article mainly introduces the implementation code of using Require.js to encapsulate the native js carousel chart. Friends who need it can refer to the

index.html page:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>require.js封装轮播图</title>
<style type="text/css">
　　*{
　　　　margin: 0;
　　　　padding: 0;
　　　　list-style: none;
　　}
　　#banner{
　　　　width: 830px;
　　　　height: 440px;
　　　　border: solid 1px;
　　　　margin: 50px auto;
　　　　position: relative;
　　　　overflow: hidden;
　　}
　　#banner ul{
　　　　position: absolute;
　　　　left: 0;
　　　　top: 0;
　　}
　　#banner ul li{
　　　　width: 830px;
　　　　height: 440px;
　　　　float: left;
　　}
　　#banner p{
　　　　position: absolute;
　　　　left: 50%;
　　　　bottom: 10px;
　　　　margin-left: -30px;
　　}
　　#banner p span{
　　　　display: block;
　　　　float: left;
　　　　width: 15px;
　　　　height: 15px;
　　　　margin-right: 6px;
　　　　background: #ccc;
　　　　border-radius: 50%;
　　}
　　#banner p .on{
　　　　background: red;
　　}
</style>
<script type="text/javascript" src="require.js" data-main=&#39;init&#39;></script>
<!--<script type="text/javascript">
　　require([&#39;slider&#39;],function(mod){
　　mod.slide()
})
</script>-->
</head>
<body>
　　<p id="banner">
　　　　<ul>
　　　　　　<li><img src="images/1.jpg"/></li>
　　　　　　<li><img src="images/2.jpg"/></li>
　　　　</ul>
　　　　<p>
　　　　　　<span class="on"></span>
　　　　　　<span></span>
　　　　　　<span></span>
　　　　</p>
　　</p>
</body>
</html>

get.js code is as follows:

define(function(require,exports,module){
　　exports.getStyle = function (obj,name){
　　　　if(obj.currentStyle){
　　　　　　return obj.currentStyle[name];
　　　　}else{
　　　　　　return getComputedStyle(obj,false)[name];
　　　　};
　　};
});

init.js code is as follows

require([&#39;slider&#39;],function(mod){
　　mod.slide();
});

slider.js code is as follows

define(function(require, exports, module) {
　　var move = require(&#39;StartMove&#39;);
　　var aBtn = document.getElementById(&#39;banner&#39;).getElementsByTagName(&#39;span&#39;);
　　var oUl = document.getElementById(&#39;banner&#39;).getElementsByTagName(&#39;ul&#39;)[0];
　　var aLi = oUl.children;
　　//三张图片所占的宽度，length返回的是字符串中的字符数
　　　　oUl.style.width = aLi.length * aLi[0].offsetWidth + &#39;px&#39;;
　　　　exports.slide = function() {
　　　　　　for(var i = 0; i < aBtn.length; i++) {
　　　　　　　　aBtn[i].index = i;
　　　　　　　　aBtn[i].onclick = function() {
　　　　　　　　　　for(var i = 0; i < aBtn.length; i++) {
　　　　　　　　　　　　aBtn[i].className = &#39;&#39;;
　　　　　　　　　　}
　　　　　　　　aBtn[this.index].className = &#39;on&#39;;
　　　　　　　　　　move.move(oUl, {
　　　　　　　　　　left: -this.index * aLi[0].offsetWidth;
　　　　　　　　});
　　　　　　};
　　　　};
　　};
});

StartMove.js code is as follows

define(function(require, exports, module) {
　　var get = require(&#39;get&#39;);
　　exports.move = function move(obj, json, complete) {
　　　　clearInterval(obj.timer);
　　　　var complete = complete || {};
　　　　complete.dur = complete.dur || 1000;
　　　　complete.easing = complete.easing || &#39;ease-out&#39;;
　　　　var count = parseInt(complete.dur / 30); //总次数
　　　　var start = {}; //{width:300,height:300}
　　　　var dis = {};
　　　　//{width:300,height:300}
　　　　for(var name in json) {
　　　　　　start[name] = parseFloat(get.getStyle(obj, name));
　　　　　　dis[name] = json[name] - start[name];
　　　　}
　　　　var n = 0; //当前步数
　　　　obj.timer = setInterval(function() {
　　　　n++;
　　　　for(var name in json) {
　　　　　　var a = n / count;
　　　　　　switch(complete.easing) {
　　　　　　　　case &#39;linear&#39;:
　　　　　　　　var cur = start[name] + a * dis[name];
　　　　　　　　break;
　　　　　　　　case &#39;ease-in&#39;:
　　　　　　　　var cur = start[name] + Math.pow(a, 3) * dis[name];
　　　　　　　　break;
　　　　　　　　case &#39;ease-out&#39;:
　　　　　　　　var a = 1 - n / count;
　　　　　　　　var cur = start[name] + (1 - Math.pow(a, 3)) * dis[name];
　　　　　　　　break;
　　　　　　};
　　　　　　if(name == &#39;opacity&#39;) {
　　　　　　　　　　obj.style[name] = cur;
　　　　　　　　　　obj.style.filter = &#39;alpha(&#39; + cur * 100 + &#39;)&#39;;
　　　　　　　　} else {
　　　　　　　　　　obj.style[name] = cur + &#39;px&#39;;
　　　　　　　　};
　　　　　　};
　　　　　　if(n == count) {
　　　　　　　　clearInterval(obj.timer)
　　　　　　　　complete.fn && complete.fn();
　　　　　　};
　　　　}, 30);
　　　};
　});

The above is the detailed content of Summarize the example tutorial of using Require.js to encapsulate the native js carousel chart. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Introduction to npm&package.json in NodejsNext article：Introduction to npm&package.json in Nodejs

See more

Summarize the example tutorial of using Require.js to encapsulate the native js carousel chart

Related articles