Я довольно новичок в js и jquery, и я пытаюсь сделать что-то очень простое с моим приложением Rails: я хочу переключаться между 2 изображениями каждые 3 секунды с эффектом затухания. Конечно, этот вопрос уже задавался в StackOverflow, но я не смог заставить его работать, к сожалению.
Я основывал свои тщетные попытки на этих двух вопросах:
Изменить изображениена странице HTML каждые несколько секунд (автоматическое изменение без исчезновения)
постепенное изменение изображения каждые n секунд (автоматическое изменение с исчезновением)
Мне удалось сделать этоработать с автоматическим изменением, но без эффекта затухания. Вот мой код для этого:
HTML-код (находится на странице просмотра, скажем, index.html.erb)
<div class="container p-5">
<div class="row">
<div class="col">
<h2 class="display-5 mb-4">Title here</h2>
<p class="lead">Lead</p>
</div>
<div class="col">
<img id="img" src="http://localhost:3000/images/pdf_template.png" />
</div>
</div>
</div>
jquery code (находится в начале моего файла application.html.erb)
<script type = "text/javascript">
function displayNextImage() {
x = (x === images.length - 1) ? 0 : x + 1;
document.getElementById("img").src = images[x];
}
function startTimer() {
setInterval(displayNextImage, 3000);
}
var images = [], x = -1;
images[0] = "http://localhost:3000/images/pdf_template.png";
images[1] = "http://localhost:3000/images/watermark_template.png";
</script>
Чтобы он работал, я изменил тег body с <body> на <body onload = "startTimer()">
В предыдущем коде у меня есть изображение, которое автоматически меняется каждые 3 секунды.
Затем я попытался использовать вторую ссылку, предоставленную мной, для реализации эффекта затухания, но безуспешно.
HTMLКод, конечно же, одинаков.
jquery code
<script type = "text/javascript">
var images = [];
images[0] = "http://localhost:3000/images/pdf_template.png";
images[1] = "http://localhost:3000/images/watermark_template.png";
var x = 0;
setInterval(displayNextImage, 3000);
function displayNextImage() {
x = x < images.length - 1 ? x : 0;
$("#img").fadeOut(300, function(){
$(this).attr('src', images[x]).fadeIn(300);
})
x++;
}
</script>
Это действительно странно, потому что я использовал jsfiddle во второй ссылке, которую я предоставил, чтобы проверить свой код jqueryтам прекрасно работаетЯ подозреваю, что что-то не так с моим приложением на Rails, может быть, я не разместил скрипт в нужном месте? На данный момент он находится в теге head, но, возможно, это неправильно.
Я использую Rails 5.2.3, jquery-rails 4.3.5, jquery 3.2.1
Любая помощь будетоценил, спасибо.