У меня есть div для автоматической прокрутки изображений, состоящий из ультрасовременных изображений. Цель состоит в том, чтобы иметь простой скроллер, который запускается сразу после загрузки страницы. Он отлично работает, когда я просто запускаю код (Html, CSS и файл js с jquery) в браузере локально, но не работает должным образом, когда приложение работает на сервере узлов.
Я пробовалчтобы убедиться, что мой jQuery распознается и в него включена функция $ (window) .on ("load") для переноса вокруг основного кода, который управляет скроллером. Многие из подобных постов, которые я изучал, имеют эту проблему. Я также дважды проверил, загружает ли сервер внешний файл. Журналы консоли внутри функции отображаются в chrome консоли без ошибок. Также заглядывая в chrome консоль показывает необходимые изображения и внешний скрипт, загружаемый на страницу. Проверка большего количества значений журналирования внутри внешней функции показывает, что к ресурсам обращаются, поэтому, возможно, это проблема синхронности с узлом jQuery +? Любая помощь будет принята с благодарностью.
JQuery
$(window).on("load", function () {
$(function () {
var scroller = $('#scroller div.innerScrollArea');
var scrollerContent = scroller.children('ul');
scrollerContent.children().clone().appendTo(scrollerContent);
var curX = 0;
scrollerContent.children().each(function () {
var $this = $(this);
$this.css('left', curX);
curX += $this.outerWidth(true);
});
var fullW = curX / 2;
var viewportW = scroller.width();
var controller = { curSpeed: 0, fullSpeed: 1 };
var $controller = $(controller);
var tweenToNewSpeed = function (newSpeed, duration) {
if (duration === undefined) {
duration = 600;
$controller.stop().animate({ curSpeed: newSpeed }, duration);
}
};
var doScroll = function () {
var curX = scroller.scrollLeft();
var newX = curX + controller.curSpeed;
if (newX > fullW * 2 - viewportW)
newX -= fullW;
scroller.scrollLeft(newX);
};
setInterval(doScroll, 20);
tweenToNewSpeed(controller.fullSpeed);
console.log("foo")
console.log(scrollerContent);
});
});
Файл сервера
var express = require("express");
var db = require("./models/company.js");
var app = express();
var PORT = process.env.PORT || 8080;
app.use(express.urlencoded({ extended: false }));
app.use(express.json());
app.use(express.static( __dirname + "/public"));
require("./routes/htmlRoutes.js")(app);
require("./routes/apiRoutes.js")(app);
db.sequelize.sync({ force: false }).then(function() {
app.listen(PORT, function () {
console.log("App listening on PORT: " + PORT);
});
})
module.exports = app;
Соответствующий CSS
#scroller {
position: relative;
}
#scroller .innerScrollArea {
overflow: hidden;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#scroller ul {
padding: 0;
margin: 0;
position: relative;
}
#scroller li {
padding: 0;
margin: 0;
list-style-type: none;
position: absolute;
margin-left: 1%;
margin-right: 1%;
}
соответствующий код отindex.html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/index.css">
<title>RepoMan</title>
</head>
...
<!--AD Space-->
<div id="scroller" style="width: 1110px; height: 75px; margin: 0 auto;">
<div class="innerScrollArea">
<ul>
<!-- Define photos here -->
<li><img class="ad-img" src="assets/images/sidebar/sm-allied.gif" /></li>
<li><img class="ad-img" src="assets/images/sidebar/sm-baja.gif" /></li>
<li><img class="ad-img" src="assets/images/sidebar/sm-bigtime.png" /></li>
<li><img class="ad-img" src="assets/images/sidebar/sm-det.png" /></li>
<li><img class="ad-img" src="assets/images/sidebar/sm-dyn.gif" /></li>
<li><img class="ad-img" src="assets/images/sidebar/sm-ken.png" /></li>
<li><img class="ad-img" src="assets/images/sidebar/sm-locating.png" /></li>
<li><img class="ad-img" src="assets/images/sidebar/sm-minuteman.png" /></li>
<li><img class="ad-img" src="assets/images/sidebar/sm-nams.jpeg" /></li>
<li><img class="ad-img" src="assets/images/sidebar/sm-rec.png" /></li>
<li><img class="ad-img" src="assets/images/sidebar/sm-recmng.gif" /></li>
<li><img class="ad-img" src="assets/images/sidebar/sm-repfl.png" /></li>
<li><img class="ad-img" src="assets/images/sidebar/sm-rsig.gif" /></li>
</ul>
</div>
</div>
...
<script src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script src="assets/js/index.js"></script>
</body>
</html>
package.json
{
"name": "UW2",
"version": "1.0.0",
"description": "",
"main": "index.html",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node server.js",
"dev": "nodemon server.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"dotenv": "^8.2.0",
"express": "^4.17.1",
"jquery": "^3.4.1",
"mysql2": "^1.7.0",
"nodemon": "^1.19.4",
"sequelize": "^5.21.1"
}
}