<分区>
好的,这是我的问题。我从 youtube 上的教程中获得了一个图像 slider ,我不得不稍微更改它,因为我正在使用 Angular 并从数组中获取图像。如果我检查 google chrome 中的源,我的 slider.js 文件在那里,我的 css 等,一切都会加载......但是 slider 不起作用,它不会被激活是一个更好的方式来表达它:如果我将 slider.js 中的代码插入 chrome 控制台:按回车键 -> BOOOM 完美运行,我一直在寻找问题所在,尝试在脚本标签中添加 type="text/javascript",添加了(文档).ready 在我的 jquery 中,仍然没有...我将添加一些我的代码,希望这里的任何人都能发现问题!
slider.js 文件
'use strict';
$(document).ready(function() {
//settings for slider
var width = 320;
var animationSpeed = 1000;
var pause = 3000;
var currentSlide = 1;
//cache DOM elements
var $slider = $('.project-slider');
var $slideContainer = $('.slides', $slider);
var $slides = $('.slide', $slider);
var interval;
function startSlider() {
interval = setInterval(function() {
$slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function() {
if (++currentSlide === $slides.length) {
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
}, pause);
}
function pauseSlider() {
clearInterval(interval);
}
$slideContainer
.on('mouseenter', pauseSlider)
.on('mouseleave', startSlider);
startSlider();
});