如何解决更改HTML中的onclick以添加事件侦听器
在这里,我想将html中的 onclick =“ currentSlide(1)更改为javascript中的ADDEVENTLISTENER。这是一个图片库,一切正常,但我想更改此操作的方式被触发
<div class="product__slide-row">
<div class="product__row-images">
<img class="demo cursor product__row-img" src="../imgs/productos/licuadora/1.jpg" style="width:100%" onclick="currentSlide(1)" alt="The Woods">
</div>
<div class="product__row-images">
<img class="demo cursor product__row-img" src="../imgs/productos/licuadora/2.jpg" style="width:100%" onclick="currentSlide(2)" alt="Cinque Terre">
</div>
<div class="product__row-images">
<img class="demo cursor product__row-img" src="../imgs/productos/licuadora/3.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="product__row-images">
<img class="demo cursor product__row-img" src="../imgs/productos/licuadora/4.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
<div class="product__row-images">
<img class="demo cursor product__row-img" src="../imgs/productos/licuadora/5.jpg" style="width:100%" onclick="currentSlide(5)" alt="Nature and sunrise">
</div>
<div class="product__row-images">
<img class="demo cursor product__row-img" src="../imgs/productos/licuadora/6.jpg" style="width:100%" onclick="currentSlide(6)" alt="Snowy Mountains">
</div>
</div>
var slideIndex = 1;
showSlides(slideIndex);
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("product__slide-images");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex-1].style.display = "block";
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。