[英]Multiple Scripts on same HTML page for rotating banner
嘗試為頁腳中的內容制作一種自動旋轉橫幅。 問題在於,當他們更新幻燈片時,前兩個在更改一次后停止,第三個更新比應該更快。 每個部分都有唯一的類名,我似乎無法找到問題所在。 我認為問題出在HTML或JS腳本中,但這是我第一次在一個頁面上使用多個腳本。 (這是一個項目)HTML
<footer>
<div class = "grid-container" id = "footer-grid">
<div class = "grid-100 mobile-grid-100 grid-parent" id = "slideshow">
<div class = "Slide1 grid-33 mobile-grid-33">
<h1>Slide 1</h1>
</div>
<div class = "Slide1 grid-33 mobile-grid-33">
<h1>Slide 2</h1>
</div>
<div class = "Slide1 grid-33 mobile-grid-33">
<h1>Slide 3</h1>
</div>
<div class = "Slide1 grid-33 mobile-grid-33">
<h1>Slide 4</h1>
</div>
<div class = "Slide1 grid-33 mobile-grid-33">
<h1>Slide 5</h1>
</div>
<div class = "Slide grid-33 mobile-grid-33">
<h1>Slide 1</h1>
</div>
<div class = "Slide grid-33 mobile-grid-33">
<h1>Slide 2</h1>
</div>
<div class = "Slide grid-33 mobile-grid-33">
<h1>Slide 3</h1>
</div>
<div class = "Slide grid-33 mobile-grid-33">
<h1>Slide 4</h1>
</div>
<div class = "Slide grid-33 mobile-grid-33">
<h1>Slide 5</h1>
</div>
<div class = "mySlides3 grid-33 mobile-grid-33">
<h1>Slide 1</h1>
</div>
<div class = "mySlides3 grid-33 mobile-grid-33">
<h1>Slide 2</h1>
</div>
<div class = "mySlides3 grid-33 mobile-grid-33">
<h1>Slide 3</h1>
</div>
<div class = "mySlides3 grid-33 mobile-grid-33">
<h1>Slide 4</h1>
</div>
<div class = "mySlides3 grid-33 mobile-grid-33">
<h1>Slide 5</h1>
</div>
</div>
<div class = "clear"></div>
<div class = "clear"></div>
<div class = "grid-100" id = "footer-info">
<p>some stuff might go here</p>
</div>
</div>
</footer>
<!-- SCRIPTS -->
<script>
var slideIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("Slide1");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {slideIndex = 1}
x[slideIndex-1].style.display = "block";
setTimeout(carousel, 1000); // Change image every 2 seconds
}
</script>
<script>
var slideIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("Slide");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {slideIndex = 1}
x[slideIndex-1].style.display = "block";
setTimeout(carousel, 1000); // Change image every 2 seconds
}
</script>
<script>
var slideIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides3");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {slideIndex = 1}
x[slideIndex-1].style.display = "block";
setTimeout(carousel, 1000); // Change image every 2 seconds
}
</script>
CSS
Slide1, .Slide, .mySlides3 {
display: none;
border: 1px solid black;
text-align: center;
padding-top:10px;
margin-bottom:10px;
}
任何幫助表示贊賞,這是我此時使用javascript的唯一真正問題。 我似乎無法找到為什么會發生這種情況,我嘗試將類名更改為更加清晰。
在全局范圍內創建新函數時,基本上執行以下操作:
window.carousel = function () { ... }
你有3個腳本部分。 首次執行時,它會旋轉第一個元素。 但在那之后,它被第二個腳本塊覆蓋了。 所以你的代碼目前是這樣的:
window.carousel = function () { /* logic for elm 1 */ }
window.carousel()
window.carousel = function () { /* logic for elm 2 */ }
window.carousel()
window.carousel = function () { /* logic for elm 3 */ }
window.carousel()
簡而言之,3個腳本標簽共享一個范圍,因此您的問題。 解決方案可能是創建一個輪播函數,它將id作為參數。 無論如何,這是更好的編碼實踐
您現在可以合並您的JavaScript,讓自己更輕松。 您只需要1個輪播功能即可完成所有通話。 每個輪播函數調用之間唯一的變化是類名。 因此,將其添加為輪播功能的參數。
<!-- SCRIPTS -->
<script>
var slideIndex = 0;
carousel("Slide1");
carousel("Slide");
carousel("mySlides3");
function carousel(slideName) {
var i;
var x = document.getElementsByClassName(slideName);
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {
slideIndex = 1
}
x[slideIndex - 1].style.display = "block";
setTimeout(function() { carousel(slideName) }, 1000); // Change image every 2 seconds
}
</script>
PS ...你錯過了一個“。” 在你的CSS中的Slide1上。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.