亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

如何將幻燈片放映到網頁中？我使用了以下代碼但它不起作用

如何將幻燈片放映到網頁中？我使用了以下代碼但它不起作用

偶然的你 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 role="list" class="banner__list w-dyn-items">

  <div role="listitem" class="banner__item w-dyn-item mySlides">

    <img src="http://placehold.it/50/bada55" alt="green square" />

  </div>

  <div role="listitem" class="banner__item w-dyn-item mySlides">

    <img src="http://placehold.it/50/990000" alt="red square" />

  </div>

  <div role="listitem" class="banner__item w-dyn-item mySlides">

    <img src="http://placehold.it/50/000099" alt="blue square" />

  </div>

  <span class="dot"></span>

  <span class="dot"></span>

  <span class="dot"></span>

</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 role="list" class="banner__list w-dyn-items" style="width: 300px; height: 300px;">

  <div style="border: 3px solid red; background-image:url(https://via.placeholder.com/300); width: 100%; height: 100%;" role="listitem" class="banner__item w-dyn-item mySlides">

  </div>

  <div style="border: 3px solid green; background-image:url(https://via.placeholder.com/300); width: 100%; height: 100%;" role="listitem" class="banner__item w-dyn-item mySlides">

  </div>

  <div style="border: 3px solid blue; background-image:url(https://via.placeholder.com/300); width: 100%; height: 100%;" role="listitem" class="banner__item w-dyn-item mySlides">

  </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。它有一個幻燈片組件。


將此添加到您的樣式中：


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

這是示例模板：


<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">

  <ol class="carousel-indicators">

    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>

    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>

    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>

  </ol>

  <div class="carousel-inner">

    <div class="carousel-item active">

      <img class="d-block w-100" src="[IMAGE-1-SOURCE]" alt="First slide">

    </div>

    <div class="carousel-item">

      <img class="d-block w-100" src="[IMAGE-2-SOURCE]" alt="Second slide">

    </div>

    <div class="carousel-item">

      <img class="d-block w-100" src="[IMAGE-3-SOURCE]" alt="Third slide">

    </div>

  </div>

  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">

    <span class="carousel-control-prev-icon" aria-hidden="true"></span>

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

  </a>

  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">

    <span class="carousel-control-next-icon" aria-hidden="true"></span>

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

  </a>

</div>


查看完整回答
反對 回復 2022-12-02
  • 3 回答
  • 0 關注
  • 147 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號