javascript 中的图像滑块代码不起作用

Question

i have done this code of imageslider in javascript that when click on an image its slides to show the next one, but the problem is i want this code to run with out global variables (only closure) but it is not working with me, any help? ( ps: i tried this code with closure but it doesn't work with me )

 var liEls = document.querySelectorAll('ul li'); var index = 0; var max = liEls.length - 1; window.show = function(increase) { if (index == max) { index = -1; } index = index + increase; liEls[index].scrollIntoView({ behavior: 'smooth' }); // console.log(index); }

 body { background-color: black; } h1 { text-align: center; color: pink; } ul { display: flex; width: 400px; margin-left: 450px; padding-top: 30px; position: relative; z-index: 1; overflow: hidden; } li { position: relative; display: block; list-style: none; }

 <h1>Image Slide Show</h1> <ul> <li><img class="img2" src="https://image.shutterstock.com/image-photo/beautiful-luxury-home-exterior-twilight-600w-639916900.jpg" onclick="show(+1)"></li> <li><img class="img3" src="https://image.shutterstock.com/image-photo/beautiful-luxury-home-exterior-twilight-600w-639916900.jpg" onclick="show(+1)"></li> <li><img class="img4" src="https://image.shutterstock.com/image-photo/beautiful-luxury-home-exterior-twilight-600w-639916900.jpg" onclick="show(+1)"></li> <li><img class="img2" src="https://image.shutterstock.com/image-photo/beautiful-luxury-home-exterior-twilight-600w-639916900.jpg" onclick="show(+1)"></li> <li><img class="img3" src="https://image.shutterstock.com/image-photo/beautiful-luxury-home-exterior-twilight-600w-639916900.jpg" onclick="show(+1)"></li> <li><img class="img4" src="https://image.shutterstock.com/image-photo/beautiful-luxury-home-exterior-twilight-600w-639916900.jpg" onclick="show(+1)"></li> </ul>

Answer 1

This is how you can do it without setting global variables. Only thing you have to do is to define which elements you want to click on, but that can also be put into a wrapper function if you'd like. Here is a good example on how you could do it. Even tough it's jQuery page, the first example doesn't use jQuery, it just shows you how you can wrap your code in your own function.

You would then have something like myCarousel.init() on page load.

 function scrollToNextElement(nextLI) { nextLI.scrollIntoView({ behavior: 'smooth' }); } function scrollToFirstElement() { document.querySelector('.slideshow li').scrollIntoView({ behavior: 'smooth' }); } var lis = document.querySelectorAll('.slideshow li'); lis.forEach( li => { li.addEventListener('click', () => { li.nextElementSibling? scrollToNextElement(li.nextElementSibling): scrollToFirstElement(); }); });

 body { background-color: black; } h1 { text-align: center; color: pink; } ul { display: flex; width: 400px; margin: 0 auto; padding-top: 30px; position: relative; z-index: 1; overflow: hidden; } li { position: relative; display: block; list-style: none; }

 <h1>Image Slide Show</h1> <ul class="slideshow"> <li><img class="img2" src="https://image.shutterstock.com/image-photo/beautiful-luxury-home-exterior-twilight-600w-639916900.jpg" ></li> <li><img class="img3" src="https://image.shutterstock.com/image-photo/beautiful-luxury-home-exterior-twilight-600w-639916900.jpg" ></li> <li><img class="img4" src="https://image.shutterstock.com/image-photo/beautiful-luxury-home-exterior-twilight-600w-639916900.jpg" ></li> <li><img class="img2" src="https://image.shutterstock.com/image-photo/beautiful-luxury-home-exterior-twilight-600w-639916900.jpg" ></li> <li><img class="img3" src="https://image.shutterstock.com/image-photo/beautiful-luxury-home-exterior-twilight-600w-639916900.jpg" ></li> <li><img class="img4" src="https://image.shutterstock.com/image-photo/beautiful-luxury-home-exterior-twilight-600w-639916900.jpg" ></li> </ul>