如何使用javascript中的手动单击项目符号创建自动幻灯片显示？
[英]How to create auto slideshow with manual click bullet in javascript?
问题描述
我一直在研究自动幻灯片显示，我的问题是当我单击项目符号以显示下一张图像时，该图像突然消失了。
起初我以为是因为我使用了addEventListener事件，所以它不起作用，所以我改为使用“ click”事件（即jquery），结果还是一样。
我现在真的不知道下一步该怎么做，我想听听专业人士或Web开发人员的一些建议！ 我会很感激。
var toggleMenu = $(document).ready(function () { $("#maintopics").click(function (e) { e.preventDefault(); e.stopPropagation(); $("#subtopics").toggle("fast"); }); $("html").click(function() { if ($("#subtopics").is(':visible')) { $("#subtopics").toggle(); } }); }); // slideshow var slideShow = $(document).ready(function () { var slideImages = document.getElementsByClassName("slide"); var bulletImages = document.getElementsByClassName("bullets"); var index = 0; function hideImages() { for (var i = 0; i < slideImages.length; i++) { slideImages[i].style.display = 'none'; $(bulletImages[i]).removeClass("clicked"); } } function initiaImage() { for (var i = 0; i < slideImages.length; i++) { slideImages[0].style.display = 'block'; $(bulletImages[index]).addClass("clicked"); } } function slidingImages() { hideImages(); if (index < slideImages.length - 1) index++; else { index = 0; } slideImages[index].style.display = 'block'; $(bulletImages[index]).addClass("clicked"); } function autoSlide() { setInterval(function () { slidingImages(); }, 2000); } function arrowSlide() { var prev = document.getElementById("prev"); var next = document.getElementById("next"); $(prev).click(function () { hideImages(); if (index === 0) { index = slideImages.length; } slideImages[index - 1].style.display = 'block'; index--; $(bulletImages[index]).addClass("clicked"); }); $(next).click(function () { hideImages(); if (index === slideImages.length - 1) { index = -1; } slideImages[index + 1].style.display = 'block'; index++; $(bulletImages[index]).addClass("clicked"); }); } function bulletSlide() { for (var i = 0; i < bulletImages.length; i++) { $(bulletImages).click(function () { hideImages(); slideImages[i].style.display = 'block'; index = i; }); } } return { hideImages: hideImages(), initiaImage: initiaImage(), autoSlide: autoSlide(), arrowSlide: arrowSlide(), bulletSlide: bulletSlide() } });
/*slideshow*/ #slide1 { background-image: url(https://preview.ibb.co/mV3TR7/1.jpg); } #slide2 { background-image: url(https://preview.ibb.co/bSCBeS/2.jpg); } #slide3 { background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg); } #slideshow { position: relative; max-width: 800px; margin: 0 auto; } .slide { background-repeat: no-repeat; background-position: center; background-size: 100% 100%; width: 800px; height: 400px; margin: 0 auto; max-width: 100%; z-index: 1; } .slidecontent { position: absolute; color: white; top: 50%; left: 50%; transform: translate3d(-50%,-50%,0); } .arrow { position: absolute; cursor: pointer; width: auto; padding: 15px; top: 50%; font-size: 50px; color: white; border-radius: 0 10px 10px 0; transition: 0.5s ease; transform: translate3d(0,-50%,0); } #prev { left: 0px; max-width: 100%; } #next { right: 0px; max-width: 100%; border-radius: 10px 0px 0px 10px; } #previous:hover, #next:hover { background-color: rgba(0,0,0,0.8); } #slidebullets { position: relative; text-align: center; top: -30px; } .bullets { display: inline-block; background-color: gray; width: 15px; height: 15px; border-radius: 10px; cursor: pointer; transition: background-color 0.6s ease; } .clicked { background-color: #ff0000; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="index2.css" /> </head> <body> <div id="slideshow"> <div id="slide1" class="slide"> <span class="slidecontent">SlideImage1</span> </div> <div id="slide2" class="slide"> <span class="slidecontent">SlideImage2</span> </div> <div id="slide3" class="slide"> <span class="slidecontent">SlideImage3</span> </div> <div id="prev" class="arrow">❮</div> <div id="next" class="arrow">❯</div> </div> <div id="slidebullets"> <div id="bullet1" class="bullets"></div> <div id="bullet2" class="bullets"></div> <div id="bullet3" class="bullets"></div> </div> <script src="jquery.js"></script> <script src="index2.js"></script> </body> </html>
1 个解决方案
解决方案1
0 已采纳 2018-08-09 06:06:42
以错误的方式获取i的值，请提醒i查看其值：
function bulletSlide() {
for (var i = 0; i < bulletImages.length; i++) {
$(bulletImages).click(function () {
alert(i); // i = 3
hideImages();
slideImages[i].style.display = 'block';
index = i;
});
}
}
请修改如下：
function bulletSlide() {
$(bulletImages).click(function () {
hideImages();
slideImages[$(this).index()].style.display = 'block';
index = $(this).index();
});
}
香草JS版本：
function bulletSlide() {
[].forEach.call(bulletImages, function(bimg,i,a) {
bimg.addEventListener('click', function () {
hideImages();
slideImages[i].style.display = 'block';
index = i;
});
});
}
用JavaScript创建自动幻灯片图像的方法是什么？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.