[英]Simple image slider not working (jQuery)
I am creating a simple slider using jQuery. 我正在使用jQuery创建一个简单的滑块。
The problem: The slider is disappearing and/or collapsing (you can see it when you refresh before it disappears). 问题:滑块消失和/或塌陷(刷新后消失之前可以看到它)。
What I'm trying to do: Make the positions of the images absolute
and then using JavaScript show the nth
index using the display
property in the script. 我正在尝试做的事情:使图像的位置absolute
,然后使用JavaScript通过脚本中的display
属性显示第nth
索引。
Not sure if it is the css or the JavaScript that is making it hidden. 不知道是CSS还是JavaScript使其隐藏。 Any ideas what I am doing wrong? 有什么想法我做错了吗?
$(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>
In your code snippet... You have the error: 在您的代码段中...您有错误:
Cannot read property 'style' of undefined" 无法读取未定义的属性“样式”
That error says x[index-1]
is undefined. 该错误表明x[index-1]
未定义。
It IS undefined because index
is defined in one of the two if
conditions above... Which both evaluate to false
. 它是未定义的,因为在上述if
条件中的两个条件之一中定义了index
...两者都评估为false
。
if(n > x.length)
: n = 1 and x.length = 2 在if(n > x.length)
:n = 1且x.length = 2 if(n < 1 )
: n = 1 if(n < 1 )
:n = 1 So index
is "undefined". 因此index
是“未定义的”。
Then comes a for
loop, setting all images to display:none
. 然后是for
循环,将所有图像设置为display:none
。
That is why you may see them a couple milliseconds on refresh. 这就是为什么您可能会在刷新后看到它们几毫秒的原因。
And finally, x[index-1]
also is undefined.. So no image is setted back to display:block
. 最后, x[index-1]
也是未定义的。因此,没有图像设置回display:block
。
I suggest you to add a case where the condition could be evaluated to true
: 我建议您添加一个条件可以评估为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.