[英]Simple image slider not working (jQuery)
我正在使用jQuery創建一個簡單的滑塊。
問題:滑塊消失和/或塌陷(刷新后消失之前可以看到它)。
我正在嘗試做的事情:使圖像的位置absolute
,然后使用JavaScript通過腳本中的display
屬性顯示第nth
索引。
不知道是CSS還是JavaScript使其隱藏。 有什么想法我做錯了嗎?
$(document).ready(function() { $('#sidebar-btn').click(function() { $('#sidebar-nav').toggleClass('visible'); }); }); var index = 0; function plusIndex(n) { index = index + 1; showImage(index); } /* SLIDER */ showImage(1); /* Slider function */ function showImage(n) { var i; var x = document.getElementsByClassName("slider-img"); // for next slide - forward. if(n > x.length) { index = 1 }; // for prev slide - backwards if(n < 1 ) { index = x.length /* last one */ }; for(i=0; i<x.length; i++) { x[i].style.display = "none"; } x[index-1].style.display = "block"; }
.updates-box { background-color: #f5f5f5; text-align: center; padding: 2rem; } .updates-item-headline { font-weight: bold; } .updates-item { padding: 1rem; margin: 1rem auto; } .slider { position: relative; } .slider-img { position: absolute; } .slider .slider-btn { position: absolute; color: black; width: 50px; border:none; border-radius: 25px; top: 190px; font-size: 35px; margin: 1rem; } .slider #slide-btn2 { position: relative; float: right; } .slider #slide-btn1:hover { box-shadow: 10px 0px 20px 0px black; } .slider #slide-btn2:hover { box-shadow: 10px 0px 20px 0px black; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="hero-box"> <div id="slide-wrapper"> <div class="slider"> <div class="slide"> <picture> <source media="(max-width: 620px)" srcset="img/hero-slider-mobile.jpg"> <source media="(min-width: 621)" srcset="img/hero-slider-tablet.jpg"> <img class="slider-img" src="img/hero-slider-home.jpg" alt="Flowers"> </picture> </div> <div class="slide"> <picture> <source media="(max-width: 620px)" srcset="img/slide-2-mobile.jpg"> <source media="(min-width: 621)" srcset="img/slide-2-tablet.jpg"> <img class="slider-img" src="img/slide-2-home.jpg" alt="Flowers"> </picture> </div> <button class="slider-btn" id="slide-btn1">❮</button> <button class="slider-btn" id="slide-btn2">❯</button> </div> </div> </div> <div class="updates-box"> <div class="updates-item-headline"> <p> UPCOMING EVENT DATES</p> </div> <div class="updates-item"> <img class="update-icon" src="img/dates-icon.png"> <p><b>Thursday 3 August</b></p> <p> Open Seminar Enrollment</p> </div> <div class="updates-item"> <img class="update-icon" src="img/dates-icon.png"> <p><b>Thursday 3 August</b></p> <p> Open Seminar Enrollment</p> </div> <div class="updates-item-4"> <img class="update-icon" src="img/dates-icon.png"> <p><b>Thursday 3 August</b></p> <p> Open Seminar Enrollment</p> </div> </div>
在您的代碼段中...您有錯誤:
無法讀取未定義的屬性“樣式”
該錯誤表明x[index-1]
未定義。
它是未定義的,因為在上述if
條件中的兩個條件之一中定義了index
...兩者都評估為false
。
if(n > x.length)
:n = 1且x.length = 2 if(n < 1 )
:n = 1 因此index
是“未定義的”。
然后是for
循環,將所有圖像設置為display:none
。
這就是為什么您可能會在刷新后看到它們幾毫秒的原因。
最后, x[index-1]
也是未定義的。因此,沒有圖像設置回display:block
。
我建議您添加一個條件可以評估為true
:
if(n >= 1 && n<=x.length ){ index = n; };
console.clear(); $(document).ready(function() { $('#sidebar-btn').click(function() { $('#sidebar-nav').toggleClass('visible'); }); }); var index = 0; function plusIndex(n) { index = index + 1; showImage(index); } /* SLIDER */ showImage(1); /* Slider function */ function showImage(n) { var i; var x = document.getElementsByClassName("slider-img"); // for next slide - forward. if(n > x.length) { index = 1 }; // for prev slide - backwards if(n < 1 ) { index = x.length /* last one */ }; if(n >= 1 && n<=x.length ){ index = n; }; // ADD THIS CASE for(i=0; i<x.length; i++) { x[i].style.display = "none"; } x[index-1].style.display = "block"; }
.updates-box { background-color: #f5f5f5; text-align: center; padding: 2rem; } .updates-item-headline { font-weight: bold; } .updates-item { padding: 1rem; margin: 1rem auto; } .slider { position: relative; } .slider-img { position: absolute; } .slider .slider-btn { position: absolute; color: black; width: 50px; border:none; border-radius: 25px; top: 190px; font-size: 35px; margin: 1rem; } .slider #slide-btn2 { position: relative; float: right; } .slider #slide-btn1:hover { box-shadow: 10px 0px 20px 0px black; } .slider #slide-btn2:hover { box-shadow: 10px 0px 20px 0px black; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="hero-box"> <div id="slide-wrapper"> <div class="slider"> <div class="slide"> <picture> <source media="(max-width: 620px)" srcset="img/hero-slider-mobile.jpg"> <source media="(min-width: 621)" srcset="img/hero-slider-tablet.jpg"> <img class="slider-img" src="http://lorempixel.com/400/200/cats" alt="Flowers"> </picture> </div> <div class="slide"> <picture> <source media="(max-width: 620px)" srcset="img/slide-2-mobile.jpg"> <source media="(min-width: 621)" srcset="img/slide-2-tablet.jpg"> <img class="slider-img" src="http://lorempixel.com/400/200/nature" alt="Flowers"> </picture> </div> <button class="slider-btn" id="slide-btn1">❮</button> <button class="slider-btn" id="slide-btn2">❯</button> </div> </div> </div> <div class="updates-box"> <div class="updates-item-headline"> <p> UPCOMING EVENT DATES</p> </div> <div class="updates-item"> <img class="update-icon" src="img/dates-icon.png"> <p><b>Thursday 3 August</b></p> <p> Open Seminar Enrollment</p> </div> <div class="updates-item"> <img class="update-icon" src="img/dates-icon.png"> <p><b>Thursday 3 August</b></p> <p> Open Seminar Enrollment</p> </div> <div class="updates-item-4"> <img class="update-icon" src="img/dates-icon.png"> <p><b>Thursday 3 August</b></p> <p> Open Seminar Enrollment</p> </div> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.