首页猿问如何将幻灯片放映到网页中？我使用了...

如何将幻灯片放映到网页中？我使用了以下代码但它不起作用

JavaScript

偶然的你 2022-12-02 17:01:48

我想在一个div. 幻灯片将出现在网页左上角的某个位置。网页中还有其他 div 和功能。我在 div 中使用了这段代码来进行幻灯片放映。我主要使用内联样式。其余类仅用于 div 的定位和大小。var slideIndex = 1;showSlides(slideIndex);function plusSlides(n) { showSlides(slideIndex += n);}function currentSlide(n) { showSlides(slideIndex = n);}function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) { slideIndex = 1 } if (n < 1) { slideIndex = slides.length } for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].className += " active";}.dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; float: left; text-align: center;}<div role="list" class="banner__list w-dyn-items"> <div style="background-image:url(/frontEnd/5a10aaa4d85f4b0001a5419a_2017-lamborghini-huracan-spyder-orange-exterior-front-angle-royalty-exotic-cars.jpg)" role="listitem" class="banner__item w-dyn-item mySlides"> </div> <div style="background-image:url(/frontEnd/5a10aaa4d85f4b0001a541d8_2015-bentley-continental-gtc-red-car-hero-2-image-royalty-exotic-cars.jpg)" role="listitem" class="banner__item w-dyn-item mySlides"> </div> <div style="background-image:url(/frontEnd/5abda7fc38a916291e1647d3_2018-jeep-wrangler-white-isolated-front-angle-royalty-exotic-cars.jpg)" role="listitem" class="banner__item w-dyn-item mySlides"> </div> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span></div>这些点甚至没有出现。第一张图片仅出现。这里有什么问题吗？

查看完整描述

3 回答

墨色风雨

TA贡献1853条经验获得超6个赞

幻灯片放映有效，您只是看不到图像，因为它们是背景图像，并且没有样式或内容，divs 具有0px宽度和高度。正确显示图像的设置：

.banner__item {

width:50px;

height:50px;

}

附带说明一下，如果您将这些图像作为实际img标签放在 HTML 中，则无需指定宽度和高度。这具有允许您使用该alt属性的额外好处，从而提高了可访问性。

此外，内联样式可能会让人头疼。通过类应用样式可以清理标记，从长远来看更易于维护。

与内联样式一起，内联 JS 也会引起头痛。您可以将内联onClick处理程序移动到事件侦听器中，以使标记更清晰。在代码片段中，我添加了监听器：

window.addEventListener("click", currentSlide);

为了解释点击侦听器，而不是传递我查找的索引：

function currentSlide(event) {

const dots = document.getElementsByClassName("dot");

const clickIndex = Array.from(dots).indexOf(event.target);

showSlides(clickIndex);

}

我还修改了 showSlides 逻辑以仅使用基于 0 的数组，而不是从传入的整数中减去 1。希望它仍然对您有用！:)

如果你想居中，这些天我通常会使用flexbox！

您可以在这个 codepen中看到它与您的使用方式一起工作，或者在下面的代码片段中进行建议的更改：

showSlides(0);

function plusSlides(n) {

showSlides(slideIndex += n);

}

function currentSlide(event) {

const dots = document.getElementsByClassName("dot");

const clickIndex = Array.from(dots).indexOf(event.target);

showSlides(clickIndex);

}

function showSlides(slideIndex) {

var i;

var slides = document.getElementsByClassName("mySlides");

var dots = document.getElementsByClassName("dot");

for (i = 0; i < slides.length; i++) {

slides[i].style.display = "none";

}

for (i = 0; i < dots.length; i++) {

dots[i].className = dots[i].className.replace(" active", "");

}

slides[slideIndex].style.display = "block";

dots[slideIndex].className += " active";

}

window.addEventListener("click", currentSlide);

.dot {

cursor: pointer;

height: 15px;

width: 15px;

margin: 0 2px;

background-color: #bbb;

border-radius: 50%;

display: inline-block;

transition: background-color 0.6s ease;

float: left;

text-align: center;

}

.banner__list {

width: 100px;

}

.banner__item {

width: 100%;

margin: 0 auto;

text-align: center;

}

.banner__list {

display: flex;

flex-wrap: wrap;

justify-content: center;

}

</div>

</div>

</div>

</div>

反对回复 2022-12-02

慕森卡

TA贡献1806条经验获得超8个赞

也许您提到的那些其他类正在覆盖您的一些代码。

我刚刚向您的 div 添加了属性width并且效果很好。我还添加了一些边框颜色以显示图像确实在变化。heightbanner__list

看：

var slideIndex = 1;

showSlides(slideIndex);

function plusSlides(n) {

showSlides(slideIndex += n);

}

function currentSlide(n) {

showSlides(slideIndex = n);

}

function showSlides(n) {

var i;

var slides = document.getElementsByClassName("mySlides");

var dots = document.getElementsByClassName("dot");

if (n > slides.length) {

slideIndex = 1

}

if (n < 1) {

slideIndex = slides.length

}

for (i = 0; i < slides.length; i++) {

slides[i].style.display = "none";

}

for (i = 0; i < dots.length; i++) {

dots[i].className = dots[i].className.replace(" active", "");

}

slides[slideIndex - 1].style.display = "block";

dots[slideIndex - 1].className += " active";

}

</div>

</div>

</div>

<span class="dot" style="cursor: pointer;

height: 15px;

width: 15px;

margin: 0 2px;

background-color: #bbb;

border-radius: 50%;

display: inline-block;

transition: background-color 0.6s ease;

float:left;

text-align:center;" onclick="currentSlide(1)"></span>

<span class="dot" style="cursor: pointer;

height: 15px;

width: 15px;

margin: 0 2px;

background-color: #bbb;

border-radius: 50%;

display: inline-block;

transition: background-color 0.6s ease;

float:left;

text-align:center;" onclick="currentSlide(2)"></span>

<span class="dot" style="cursor: pointer;

height: 15px;

width: 15px;

margin: 0 2px;

background-color: #bbb;

border-radius: 50%;

display: inline-block;

transition: background-color 0.6s ease;

float:left;

text-align:center;" onclick="currentSlide(3)"></span>

</div>

反对回复 2022-12-02

潇潇雨雨

TA贡献1833条经验获得超4个赞

你可以试试 Twitter 的 Bootstrap。它有一个幻灯片组件。

将此添加到您的样式中：

这是示例模板：

</ol>

</div>

</div>

</div>

<span class="sr-only">Previous</span>

</a>

</a>

</div>

反对回复 2022-12-02

3 回答
0 关注
112 浏览

关注

添加回答

0/150

提交

取消

热搜

最近搜索清空

如何将幻灯片放映到网页中？我使用了以下代码但它不起作用

如何将幻灯片放映到网页中？我使用了以下代码但它不起作用

3 回答

添加回答