英文:
jQuery: html shows nothing with no error, maybe head error?
问题
I understand that you want a translation for the provided text, excluding the code. Here's the translated text:
"抱歉，我的英文不太好，这是我的第二语言。
我正试图修复来自CodePen的使用jQuery的代码。这是一个自动滑动的轮播代码。但是，当我尝试将这些代码移到我的自己的文件时，我的HTML不显示轮播。控制台没有错误消息。
这是我的HTML头部：
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="main.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.1.0/velocity.min.js"></script>
<script src="main.js"></script>
</head>
这是我尝试使用的JavaScript文件(main.js)：
var sliderTeam = (function(document, $) {
'use strict';
// ...（这里是代码部分）
return {
init: _init
};
})(document, jQuery);
$(window).load(function(){
'use strict';
sliderTeam.init();
});
这是CodePen链接：
https://codepen.io/fixcl/pen/KwpKvb
我是否添加了错误版本的JavaScript文件？还是我漏掉了其他东西？
编辑：
main.js已连接到HTML文件。我可以使用以下代码检查main.js文件：
console.log($current);
编辑2：这是我的HTML文件的主体部分：
<body>
<div class="slider--teams">
<div class="slider--teams__team">
<ul id="list" class="cf">
<li>
<figure class="active">
<figcaption>
<img src="https://odium.kr/assets/css/images/symbol-cernium.png">
<h2>Billie</h2>
<p>Team Head</p>
</figcaption>
</figure>
</li>
<li>
<figure>
<figcaption>
<img src="https://odium.kr/assets/css/images/symbol-arcus.png">
<h2>Roger</h2>
<p>Art Director</p>
</figcaption>
</figure>
</li>
<li>
<figure>
<figcaption>
<img src="https://odium.kr/assets/css/images/symbol-odium.png">
<h2>Wendy</h2>
<p>Designer</p>
</figcaption>
</figure>
</li>
</ul>
</div>
</div>
</body>
希望这些信息有助于解决您的问题。
英文:
Sorry for poor English, it is my second language.
I am trying to fix a code from codepen that uses jQuery. It is a code for carousel that slides auto. However, when I try to move these code to my own file, my html does not show up carousel. There is no error on console log.
Here is my HTML header
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="main.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.1.0/velocity.min.js"></script>
<script src="main.js"></script>
</head>
This is the javascript file(main.js) that I am trying to use
var sliderTeam = (function(document, $) {
'use strict';
var $sliderTeams = $('.slider--teams'),
$list = $('#list'),
$listItems = $('#list li'),
$nItems = $listItems.length,
$nView = 3,
autoSlider,
$current = 0,
$isAuto = true,
$acAuto = 2500,
_init = function() {
_initWidth();
_eventInit();
},
_initWidth = function() {
$list.css({
'margin-left': ~~(100 / $nView) + '%',
'width': ~~(100 * ($nItems / $nView)) + '%'
});
$listItems.css('width', 100 / $nItems + '%');
$sliderTeams.velocity({ opacity: 1 }, { display: "block" }, { delay:1000 });
},
_eventInit = function() {
window.requestAnimFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback, element){
window.setTimeout(callback, 1000 / 60);
};
})();
window.requestInterval = function(fn, delay) {
if( !window.requestAnimationFrame &&
!window.webkitRequestAnimationFrame &&
!window.mozRequestAnimationFrame &&
!window.oRequestAnimationFrame &&
!window.msRequestAnimationFrame)
return window.setInterval(fn, delay);
var start = new Date().getTime(),
handle = new Object();
function loop() {
var current = new Date().getTime(),
delta = current - start;
if(delta >= delay) {
fn.call();
start = new Date().getTime();
}
handle.value = requestAnimFrame(loop);
};
handle.value = requestAnimFrame(loop);
return handle;
}
window.clearRequestInterval = function(handle) {
window.cancelAnimationFrame ? window.cancelAnimationFrame(handle.value) :
window.webkitCancelRequestAnimationFrame ? window.webkitCancelRequestAnimationFrame(handle.value) :
window.mozCancelRequestAnimationFrame ? window.mozCancelRequestAnimationFrame(handle.value) :
window.oCancelRequestAnimationFrame ? window.oCancelRequestAnimationFrame(handle.value) :
window.msCancelRequestAnimationFrame ? msCancelRequestAnimationFrame(handle.value) :
clearInterval(handle);
};
$.each($listItems, function(i) {
var $this = $(this);
$this.on('touchstart click', function(e) {
e.preventDefault();
_stopMove(i);
_moveIt($this, i);
});
});
autoSlider = requestInterval(_autoMove, $acAuto);
},
_moveIt = function(obj, x) {
var n = x;
obj.find('figure').addClass('active');
$listItems.not(obj).find('figure').removeClass('active');
$list.velocity({
translateX: ~~((-(100 / $nItems)) * n) + '%',
translateZ: 0
}, {
duration: 1000,
easing: [400, 26],
queue: false
});
},
_autoMove = function(currentSlide) {
if ($isAuto) {
$current = ~~(($current + 1) % $nItems);
} else {
$current = currentSlide;
}
console.log($current);
_moveIt($listItems.eq($current), $current);
},
_stopMove = function(x) {
clearRequestInterval(autoSlider);
$isAuto = false;
_autoMove(x);
};
return {
init: _init
};
})(document, jQuery);
$(window).load(function(){
'use strict';
sliderTeam.init();
});
This is the codepen:
https://codepen.io/fixcl/pen/KwpKvb
Did I add the wrong version of js file? Or did I miss something else?
Edited:
main.js is connected to html file. I can check with the code from main.js
console.log($current);
Edited2: This is my body of html file
<body>
<div class="slider--teams">
<div class="slider--teams__team">
<ul id="list" class="cf">
<li>
<figure class="active">
<figcaption>
<img src="https://odium.kr/assets/css/images/symbol-cernium.png">
<h2>Billie</h2>
<p>Head of Team</p>
</figcaption>
</figure>
</li>
<li>
<figure>
<figcaption>
<img src="https://odium.kr/assets/css/images/symbol-arcus.png">
<h2>Roger</h2>
<p>Art Director</p>
</figcaption>
</figure>
</li>
<li>
<figure>
<figcaption>
<img src="https://odium.kr/assets/css/images/symbol-odium.png">
<h2>Wendy</h2>
<p>Designer</p>
</figcaption>
</figure>
</li>
</ul>
</div>
</div>
</body>
答案1
得分: 1
请将main.js放在
评论