RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / 问题 / 985718
Accepted
Квартиры Петербург
Квартиры Петербург
Asked:2020-05-26 16:14:43 +0000 UTC2020-05-26 16:14:43 +0000 UTC 2020-05-26 16:14:43 +0000 UTC

如何删除缩略图的 alt,将其保留为主图像

  • 772

我正在尝试制作带有每张照片的文字描述的幻灯片。但是我同时在主图像和缩略图中获得文本。或者根本不显示文本。

告诉我如何将其从预览中删除,但将其保留在大图像中?

谢谢!

如果我将其添加到容器块中的幻灯片中,则根本不会显示 alt 描述。

或者,如果我尝试将其添加到预览中,则会显示两次 alt。

这是代码:

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("demo");
  var captionText = document.getElementById("caption");
  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";
  captionText.innerHTML = dots[slideIndex - 1].alt;
}
* {
  box-sizing: border-box;
}

img {
  vertical-align: middle;
}


/* Position the image container (needed to position the left and right arrows) */

.container {
  position: relative;
}


/* Hide the images by default */

.mySlides {
  display: none;
}


/* Add a pointer when hovering over the thumbnail images */

.cursor {
  cursor: pointer;
}


/* Next & previous buttons */

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}


/* Position the "next button" to the right */

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}


/* On hover, add a black background color with a little bit see-through */

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}


/* Number text (1/3 etc) */

.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}


/* Container for image text */

.caption-container {
  text-align: center;
  background-color: #222;
  padding: 2px 16px;
  color: white;
  font-size: 20px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}


/* Six columns side by side */

.column {
  float: left;
  width: 16.66%;
}


/* Add a transparency effect for thumnbail images */

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}


}
<div class="container">
  <div class="mySlides">
    <div class="numbertext">1 / 6</div>
    <img src="https://baseflat.ru/1KKV-final.jpg" style="width:100%;"> </div>
  <div class="mySlides">
    <div class="numbertext">2 / 6</div>
    <img src="img_5terre_wide.jpg" style="width:100%"> </div>
  <div class="mySlides">
    <div class="numbertext">3 / 6</div>
    <img src="img_mountains_wide.jpg" style="width:100%"> </div>
  <div class="mySlides">
    <div class="numbertext">4 / 6</div>
    <img src="img_lights_wide.jpg" style="width:100%"> </div>
  <div class="mySlides">
    <div class="numbertext">5 / 6</div>
    <img src="img_nature_wide.jpg" style="width:100%"> </div>
  <div class="mySlides">
    <div class="numbertext">6 / 6</div>
    <img src="img_snow_wide.jpg" style="width:100%"> </div>
  <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a>
  <div class="caption-container">
    <p id="caption"></p>
  </div>
  <div class="row">
    <div class="column"> <img class="demo cursor" src="img_woods.jpg" style="width:100%" onclick="currentSlide(1)" alt="1ккв, ул.Хорошая, д.17. Аренда 25 000 руб/мес, КУ включены. Отличное состояние, вся бытовая техника. Залог. Для русской семьи, можно с детьми"> </div>
    <div class="column"> <img class="demo cursor" src="img_5terre.jpg" style="width:100%" onclick="currentSlide(2)" alt="Cinque Terre">
    </div>
    <div class="column"> <img class="demo cursor" src="img_mountains.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
    </div>
    <div class="column"> <img class="demo cursor" src="img_lights.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
    </div>
    <div class="column"> <img class="demo cursor" src="img_nature.jpg" style="width:100%" onclick="currentSlide(5)" alt="Nature and sunrise">
    </div>
    <div class="column"> <img class="demo cursor" src="img_snow.jpg" style="width:100%" onclick="currentSlide(6)" alt="Snowy Mountains">
    </div>
  </div>
</div>

当我尝试这个时,alt描述显示两次:

这是代码:

jquery
  • 1 1 个回答
  • 10 Views

1 个回答

  • Voted
  1. Best Answer
    OPTIMUS PRIME
    2020-05-26T18:06:00Z2020-05-26T18:06:00Z

    如果您不想在图片上显示 alt……您可以将 alt 更改为任何data-alt位置(可以使用任何其他词代替 alt)。data-而在脚本中,你可以通过表单的记录来获取里面写的内容element.dataset.alt。仅更改了脚本中的最后一行:

    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("demo");
      var captionText = document.getElementById("caption");
      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";
      captionText.innerHTML = dots[slideIndex - 1].dataset.alt;
    }
    * {
      box-sizing: border-box;
    }
    
    img {
      vertical-align: middle;
    }
    
    
    /* Position the image container (needed to position the left and right arrows) */
    
    .container {
      position: relative;
    }
    
    
    /* Hide the images by default */
    
    .mySlides {
      display: none;
    }
    
    
    /* Add a pointer when hovering over the thumbnail images */
    
    .cursor {
      cursor: pointer;
    }
    
    
    /* Next & previous buttons */
    
    .prev,
    .next {
      cursor: pointer;
      position: absolute;
      top: 40%;
      width: auto;
      padding: 16px;
      margin-top: -50px;
      color: white;
      font-weight: bold;
      font-size: 20px;
      border-radius: 0 3px 3px 0;
      user-select: none;
      -webkit-user-select: none;
    }
    
    
    /* Position the "next button" to the right */
    
    .next {
      right: 0;
      border-radius: 3px 0 0 3px;
    }
    
    
    /* On hover, add a black background color with a little bit see-through */
    
    .prev:hover,
    .next:hover {
      background-color: rgba(0, 0, 0, 0.8);
    }
    
    
    /* Number text (1/3 etc) */
    
    .numbertext {
      color: #f2f2f2;
      font-size: 12px;
      padding: 8px 12px;
      position: absolute;
      top: 0;
    }
    
    
    /* Container for image text */
    
    .caption-container {
      text-align: center;
      background-color: #222;
      padding: 2px 16px;
      color: white;
      font-size: 20px;
    }
    
    .row:after {
      content: "";
      display: table;
      clear: both;
    }
    
    
    /* Six columns side by side */
    
    .column {
      float: left;
      width: 16.66%;
    }
    
    
    /* Add a transparency effect for thumnbail images */
    
    .demo {
      opacity: 0.6;
    }
    
    .active,
    .demo:hover {
      opacity: 1;
    }
    <div class="container">
      <div class="mySlides">
        <div class="numbertext">1 / 6</div>
        <img src="https://baseflat.ru/1KKV-final.jpg" style="width:100%;"> </div>
      <div class="mySlides">
        <div class="numbertext">2 / 6</div>
        <img src="img_5terre_wide.jpg" style="width:100%"> </div>
      <div class="mySlides">
        <div class="numbertext">3 / 6</div>
        <img src="img_mountains_wide.jpg" style="width:100%"> </div>
      <div class="mySlides">
        <div class="numbertext">4 / 6</div>
        <img src="img_lights_wide.jpg" style="width:100%"> </div>
      <div class="mySlides">
        <div class="numbertext">5 / 6</div>
        <img src="img_nature_wide.jpg" style="width:100%"> </div>
      <div class="mySlides">
        <div class="numbertext">6 / 6</div>
        <img src="img_snow_wide.jpg" style="width:100%"> </div>
      <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a>
      <div class="caption-container">
        <p id="caption"></p>
      </div>
      <div class="row">
        <div class="column"> <img class="demo cursor" src="img_woods.jpg" style="width:100%" onclick="currentSlide(1)" data-alt="1ккв, ул.Хорошая, д.17. Аренда 25 000 руб/мес, КУ включены. Отличное состояние, вся бытовая техника. Залог. Для русской семьи, можно с детьми"> </div>
        <div class="column"> <img class="demo cursor" src="img_5terre.jpg" style="width:100%" onclick="currentSlide(2)" data-alt="Cinque Terre">
        </div>
        <div class="column"> <img class="demo cursor" src="img_mountains.jpg" style="width:100%" onclick="currentSlide(3)" data-alt="Mountains and fjords">
        </div>
        <div class="column"> <img class="demo cursor" src="img_lights.jpg" style="width:100%" onclick="currentSlide(4)" data-alt="Northern Lights">
        </div>
        <div class="column"> <img class="demo cursor" src="img_nature.jpg" style="width:100%" onclick="currentSlide(5)" data-alt="Nature and sunrise">
        </div>
        <div class="column"> <img class="demo cursor" src="img_snow.jpg" style="width:100%" onclick="currentSlide(6)" data-alt="Snowy Mountains">
        </div>
      </div>
    </div>

    对您的代码的评论和略有不同的选项:

    • 你已经上了demo图片课。Zadolbayetes 为每个单独添加style="width: 100%"到 HTML。直接用 CSS 编写它更容易,.demo {width: 100%};同样的故事.mySlides img {width: 100%;}
    • 此外,如果代码稍大一点,很容易对这些 onclicks 及其参数感到困惑。(至少)正因为如此,已经值得直接在脚本中记录点击,然后根据需要编辑 HTML,知道脚本仍然可以工作。(查找有关addEventListener 与 onclick的文章)
    •<div class="numbertext">1 / 6</div>您可以一次在脚本中编写整个编号,而不是为每个元素编写整个编号 - 再次,在编辑图片时遇到的麻烦更少。
    • 如果您只需要在元素内添加文本,而不需要 HTML 代码,那么通常使用它来innerText代替innerHTML. 第一个只是将所有字符作为文本插入而不进行解析......第二个对 HTML 进行了额外的检查,以便将其作为代码执行。尽管有这么小的文字,它并不是特别引人注目。

    并且...代码:

    提琴手

    (function(){
    
    let current = 0; /*Переменная для сохранения номера открытого слайда */
    let captionText = document.getElementById("caption");
    let demo = document.getElementsByClassName('demo');
    let slides = document.getElementsByClassName("mySlides");
    let numbertext = document.getElementsByClassName("numbertext");
    for( let i = 0; i < demo.length; i++ ){
      /*Сразу прописываем нумерацию слайдов*/
      numbertext[i].innerText = (i+1) + ' / ' + demo.length;
      
      /*На каждую картинку вешаем событие click...*/
      demo[i].addEventListener('click', function(){
        /*Всё равно картинок и слайдов одинаковое кол-во, так?
        Значит можно вместо двух циклов использовать один*/
        for( let u = 0; u < demo.length; u++ ){
          demo[u].classList.remove('active');
          slides[u].style.display = 'none';
        }
        this.classList.add('active');
        slides[i].style.display = 'block';    
        captionText.innerText = this.dataset.alt;
        
        current = i; /* После клика каждый раз current получает новый номер кликнутой кнопки */
      });
    }
    
    document.getElementById("prev").addEventListener('click', function(){
      /* Это дело называется "тернарный оператор". При клике проверям - current равен 0 ?
      Если да - то ему некуда уменьшаться, станет = demo.length - 1
      А если нет, уменьшится на единицу, current--; */
      (current == 0) ? (current = demo.length - 1) : (current--);
      for( let u = 0; u < demo.length; u++ ){
        demo[u].classList.remove('active');
        slides[u].style.display = 'none';
      }
      captionText.innerText = demo[current].dataset.alt;
      demo[current].classList.add('active');
      slides[current].style.display = 'block';
    });
    document.getElementById("next").addEventListener('click', function(){
      ( current == (demo.length-1) ) ? (current = 0) : (current++);
      /*Оба записал так, чтобы было "перед глазами", что происходит...
      их можно записать в одной функции и вызвать её и тут, и там*/
      for( let u = 0; u < demo.length; u++ ){
        demo[u].classList.remove('active');
        slides[u].style.display = 'none';
      }
      captionText.innerText = demo[current].dataset.alt;
      demo[current].classList.add('active');
      slides[current].style.display = 'block';
    });
    
    })();
    * {
      box-sizing: border-box;
    }
    
    .demo {width: 100%;}
    .mySlides img {width: 100%;}
    
    img {
      vertical-align: middle;
    }
    
    
    /* Position the image container (needed to position the left and right arrows) */
    
    .container {
      position: relative;
    }
    
    
    /* Hide the images by default */
    
    .mySlides {
      display: none;
    }
    
    
    /* Add a pointer when hovering over the thumbnail images */
    
    .cursor {
      cursor: pointer;
    }
    
    
    /* Next & previous buttons */
    
    .prev,
    .next {
      cursor: pointer;
      position: absolute;
      top: 40%;
      width: auto;
      padding: 16px;
      margin-top: -50px;
      color: white;
      font-weight: bold;
      font-size: 20px;
      border-radius: 0 3px 3px 0;
      user-select: none;
      -webkit-user-select: none;
    }
    
    
    /* Position the "next button" to the right */
    
    .next {
      right: 0;
      border-radius: 3px 0 0 3px;
    }
    
    
    /* On hover, add a black background color with a little bit see-through */
    
    .prev:hover,
    .next:hover {
      background-color: rgba(0, 0, 0, 0.8);
    }
    
    
    /* Number text (1/3 etc) */
    
    .numbertext {
      color: #f2f2f2;
      font-size: 12px;
      padding: 8px 12px;
      position: absolute;
      top: 0;
    }
    
    
    /* Container for image text */
    
    .caption-container {
      text-align: center;
      background-color: #222;
      padding: 2px 16px;
      color: white;
      font-size: 20px;
    }
    
    .row:after {
      content: "";
      display: table;
      clear: both;
    }
    
    
    /* Six columns side by side */
    
    .column {
      float: left;
      width: 16.66%;
    }
    
    
    /* Add a transparency effect for thumnbail images */
    
    .demo {
      opacity: 0.6;
    }
    
    .active,
    .demo:hover {
      opacity: 1;
    }
    <div class="container">
      <div class="mySlides">
        <div class="numbertext"></div>
        <img src="https://baseflat.ru/1KKV-final.jpg"> </div>
      <div class="mySlides">
        <div class="numbertext"></div>
        <img src="img_5terre_wide.jpg"> </div>
      <div class="mySlides">
        <div class="numbertext"></div>
        <img src="img_mountains_wide.jpg"> </div>
      <div class="mySlides">
        <div class="numbertext"></div>
        <img src="img_lights_wide.jpg"> </div>
      <div class="mySlides">
        <div class="numbertext"></div>
        <img src="img_nature_wide.jpg"> </div>
      <div class="mySlides">
        <div class="numbertext"></div>
        <img src="img_snow_wide.jpg"> </div>
      <a id="prev" class="prev">❮</a>
      <a id="next" class="next">❯</a>
      <div class="caption-container">
        <p id="caption"></p>
      </div>
      <div class="row">
        <div class="column"> <img class="demo cursor" src="img_woods.jpg" data-alt="1ккв, ул.Хорошая, д.17. Аренда 25 000 руб/мес, КУ включены. Отличное состояние, вся бытовая техника. Залог. Для русской семьи, можно с детьми"> </div>
        <div class="column"> <img class="demo cursor" src="img_5terre.jpg" data-alt="Cinque Terre">
        </div>
        <div class="column"> <img class="demo cursor" src="img_mountains.jpg" data-alt="Mountains and fjords">
        </div>
        <div class="column"> <img class="demo cursor" src="img_lights.jpg" data-alt="Northern Lights">
        </div>
        <div class="column"> <img class="demo cursor" src="img_nature.jpg" data-alt="Nature and sunrise">
        </div>
        <div class="column"> <img class="demo cursor" src="img_snow.jpg"data-alt="Snowy Mountains">
        </div>
      </div>
    </div>

    Ps 如果有什么不清楚的地方,这里会更详细地描述这种切换... JavaScript 可切换选项卡 - 选项卡(和一些 CSS)

    • 1

相关问题

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    根据浏览器窗口的大小调整背景图案的大小

    • 2 个回答
  • Marko Smith

    理解for循环的执行逻辑

    • 1 个回答
  • Marko Smith

    复制动态数组时出错(C++)

    • 1 个回答
  • Marko Smith

    Or and If,elif,else 构造[重复]

    • 1 个回答
  • Marko Smith

    如何构建支持 x64 的 APK

    • 1 个回答
  • Marko Smith

    如何使按钮的输入宽度?

    • 2 个回答
  • Marko Smith

    如何显示对象变量的名称?

    • 3 个回答
  • Marko Smith

    如何循环一个函数?

    • 1 个回答
  • Marko Smith

    LOWORD 宏有什么作用?

    • 2 个回答
  • Marko Smith

    从字符串的开头删除直到并包括一个字符

    • 2 个回答
  • Martin Hope
    Alexandr_TT 2020年新年大赛! 2020-12-20 18:20:21 +0000 UTC
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5