Summarize the example tutorial of using Require.js to encapsulate the native js carousel chart-JS Tutorial-php.cn

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

零下一度

Release： 2017-06-17 10:39:40

Original

1322 people have browsed it

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>

Copy after login

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];
　　　　};
　　};
});

Copy after login

init.js code is as follows

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

Copy after login

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;
　　　　　　　　});
　　　　　　};
　　　　};
　　};
});

Copy after login

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);
　　　};
　});

Copy after login

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!