简体   繁体   English

简单的图像滑块不起作用(jQuery)

[英]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">&#10094;</button> <button class="slider-btn" id="slide-btn2">&#10095;</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

  1. In if(n > x.length) : n = 1 and x.length = 2 if(n > x.length) :n = 1且x.length = 2
  2. In 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">&#10094;</button> <button class="slider-btn" id="slide-btn2">&#10095;</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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM