第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

如何使用 JavaScript 變量的值更新虛擬 html 元素的樣式屬性？

如何使用 JavaScript 變量的值更新虛擬 html 元素的樣式屬性？

躍然一笑 2023-04-14 17:27:16
我正在處理這個(gè) JavaScript 圖像（和文本）滑塊。我在 JavaScript 中創(chuàng)建了一個(gè)幻燈片列表，并將其附加到 DOM 中的一個(gè) div：let slidesHtml = '<ul style="width: ' + slidesListWidth + '; transform: translateX(' + translateAmount + ')">'; for (let i = 0; i < slidesLen; i++) {   slidesHtml += '<li style="width: ' + slideWidth + '">' + '<img src="' + slides[i].image + '" alt="' + slides[i].text + '"><span class="text">' + slides[i].text + '</span></li>'; } slidesHtml += '</ul>' sliderControls.insertAdjacentHTML('afterend', slidesHtml);在上面的代碼中，translateAmount當(dāng) JavaScript 變量let translateAmount = 0更改其值（從 0 到不同的百分比）時(shí)不會(huì)更新。 let slides = [{     text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto fugiat enim voluptate eos placeat quis veniam quod inventore ipsum sapiente vel, earum, ratione neque.",     image: "https://picsum.photos/1200/600?gravity=east"   },   {     text: "Sit quis provident reiciendis sed optio molestias impedit maiores nesciunt!",     image: "https://picsum.photos/1200/600?gravity=west"   },   {     text: "Odio mollitia inventore nostrum quasi labore architecto quis id repudiandae quidem!",     image: "https://picsum.photos/1200/600?gravity=north"   } ];let slider = document.getElementById('imageSlider');let sliderControls = document.getElementById('sliderControls');let slidesLen = slides.length;let slidesListWidth = slidesLen + '00%';let slideWidth = (1 / slidesLen * 100) + '%';let clickCount = 0;let translateAmount = 0;function updateAmount() {  translateAmount = clickCount * 1 / slidesLen * 100 + '%';  console.log(translateAmount);}function nextSlide() {  if (Math.abs(clickCount) < slidesLen - 1) {    clickCount--;  } else {    clickCount = 0;  }  updateAmount();}function prevSlide() {  if (clickCount < 0) {    clickCount++;  } else {    clickCount = 1 - slidesLen;  }  updateAmount();}
查看完整描述

3 回答

?
喵喔喔

TA貢獻(xiàn)1735條經(jīng)驗(yàn) 獲得超5個(gè)贊

你修改了值而不是元素的樣式（它不是數(shù)據(jù)綁定的，因?yàn)樗诶绶磻?yīng)中），所以你必須把你的 UL 變成變量，然后在 updateAmount 中你應(yīng)該做類似的事情

function updateAmount() {
    translateAmount = clickCount * 1 / slidesLen * 100 + '%';
    yourUlElement.style.transform = 'translateX(' + translateAmount + ')';
}


查看完整回答
反對(duì) 回復(fù) 2023-04-14
?
莫回?zé)o

TA貢獻(xiàn)1865條經(jīng)驗(yàn) 獲得超7個(gè)贊

您沒有向 DOM 寫入任何內(nèi)容，您只是設(shè)置了一個(gè) JavaScript 變量。

在您的 updateAmount() 函數(shù)中，您需要獲取對(duì) DOM 中 ul 元素的引用，并使用更新后的值設(shè)置樣式屬性。

也就是說，這不是一個(gè)很好的實(shí)現(xiàn)。而不是使用全局變量，也許可以嘗試為此創(chuàng)建一個(gè)封裝的組件，其中包含您在單擊下一個(gè)和上一個(gè)按鈕時(shí)更新的本地狀態(tài)。此外，通過使用模板字符串而不是所有這些連接，您可以大大提高可讀性。


查看完整回答
反對(duì) 回復(fù) 2023-04-14
?
HUWWW

TA貢獻(xiàn)1874條經(jīng)驗(yàn) 獲得超12個(gè)贊

有完整的工作滑塊，供可能需要的人使用：


(function() {

  let slides = [{

      text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto fugiat enim voluptate eos placeat quis veniam quod inventore ipsum sapiente vel, earum, ratione neque.",

      image: "https://picsum.photos/1200/600?gravity=east"

    },

    {

      text: "Aperiam eligendi animi, suscipit repellendus tempore amet totam excepturi, porro facere nulla dignissimos pariatur doloribus dolorum sunt, et veritatis expedita consectetur.",

      image: "https://picsum.photos/1200/600?gravity=west"

    },

    {

      text: "Odio mollitia inventore nostrum quasi labore architecto quis id repudiandae quidem!",

      image: "https://picsum.photos/1200/600?gravity=north"

    },

    {

      text: "Iusto fugiat enim voluptate eos placeat quis veniam quod inventore ipsum sapiente vel, earum, ratione neque. Inventore nostrum quasi labore architecto quis id repudiandae quidem!",

      image: "https://picsum.photos/1200/600?gravity=south"

    }

  ];


  let slider = document.getElementById('imageSlider');

  let sliderControls = document.getElementById('sliderControls');

  let slidesLen = slides.length;

  let slidesListWidth = slidesLen + '00%';

  let slideWidth = (1 / slidesLen * 100) + '%';

  let clickCount = 0;

  let translateAmount = 0;


  function updateAmount() {

    translateAmount = clickCount * 1 / slidesLen * 100 + '%';

    document.getElementById('slidesList').style.transform = 'translateX(' + translateAmount + ')';

  }


  window.nextSlide = function() {

    if (Math.abs(clickCount) < slidesLen - 1) {

      clickCount--;

    } else {

      clickCount = 0;

    }

    updateAmount();

  }


  window.prevSlide = function() {

    if (clickCount < 0) {

      clickCount++;

    } else {

      clickCount = 1 - slidesLen;

    }

    updateAmount();

  }


  let slidesHtml = '<ul id="slidesList" style="width: ' + slidesListWidth + '; transform: translateX(' + translateAmount + ')">';

  for (let i = 0; i < slidesLen; i++) {

    slidesHtml += '<li style="width: ' + slideWidth + '">' + '<img src="' + slides[i].image + '" alt="' + slides[i].text + '"><span class="text">' + slides[i].text + '</span></li>';

  }

  slidesHtml += '</ul>';


  sliderControls.insertAdjacentHTML('afterend', slidesHtml);

})();

body {

  margin: 0;

  padding: 0;

}


#imageSlider {

  margin: 0 auto;

  max-width: 1200px;

  position: relative;

  overflow-x: hidden;

}


#imageSlider ul {

  list-style-type: none;

  margin: 0;

  padding: 0;

  transition: all 1.0s ease-in-out;

}


#imageSlider li {

  display: block;

  float: left;

  position: relative;

}


#imageSlider img {

  display: block;

  width: 100%;

  height: auto;

}


#imageSlider .text {

  font-family: Arial, Helvetica, sans-serif;

  font-size: 13px;

  text-align: justify;

  line-height: 1.5;

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  padding: 15px;

  color: #fff;

  background: rgba(0, 0, 0, 0.15);

}


.controls span {

    line-height: 1;

    display: inline-block;

    text-align: center;

    width: 30px;

    height: 32px;

    line-height: 21px;

    cursor: pointer;

    color: #fff;

    font-size: 54px;

    position: absolute;

    top: 50%;

    margin-top: -18px;

    z-index: 2;

    opacity: 0;

    transition: opacity 0.25s ease-in-out;

}


.controls span:last-child {

  right: 0;

}


#imageSlider:hover .controls span {

  opacity: .75;

}

<div id="imageSlider">

  <div class="controls" id="sliderControls">

    <span onClick="prevSlide()">&lsaquo;</span>

    <span onClick="nextSlide()">&rsaquo;</span>

  </div>

</div>

注意：對(duì)于即時(shí)轉(zhuǎn)換，請(qǐng)?zhí)鎿Qtransition: all 1.0s ease-in-out為transition: all 0s.



查看完整回答
反對(duì) 回復(fù) 2023-04-14
  • 3 回答
  • 0 關(guān)注
  • 243 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)