Question

我创建了简单的幻灯片。如果你想改变图像，你必须点击键盘上的箭头按钮。我想添加说明，例如＆＃34;来自7＆＃34;的1项等。

这是我的来源：

＆＃13;

var img_index = 0;
var imgs = [
  "assets/1.jpg",
  "assets/2.jpg",
  "assets/3.jpg",
  "assets/4.jpg",
  "assets/5.jpg",
  "assets/6.jpg",
  "assets/7.jpg"

];

function changeImage() {
  var img = document.getElementById("images");
  img_index = ++img_index % 7;
  img.src = imgs[img_index];
}


function checkKey(e) {

  e = e || window.event;
  if (e.keyCode == '37') {
    changeImage();
  } else if (e.keyCode == '39') {
    changeImage();
  }

}

document.onkeydown = checkKey;



function sliderText (){
  
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style12.css">
  <title>Task 12</title>
</head>
<div id="slideshow_section">
  <img id="images" src="assets/1.jpg" />
</div>

<body>

</body>
<script src="script12.js"></script>

</html>

＆＃13;

你能给我一些提示我该怎么做？

谢谢你，鲇鱼

Answer 1

下面是另一个工作代码（我将解释，如何设置图像描述。）：

          var images = [
          "http://www.helloworld.com/uploads/slider/1.jpg", 
          "http://www.helloworld.com/uploads/slider/2.jpg", 
          "http://www.helloworld.com/uploads/slider/3.jpg"
          ];
          var num = 0;
        function next() {
          var slider = document.getElementById("slider");
          num++;
          if(num >= images.length) {
            num = 0;
          }
          slider.src = images[num];
          setDescription();//calling function
          }

        function prev() {
          var slider = document.getElementById("slider");
          num--;
          if(num < 0) {
            num = images.length-1;
          }
          slider.src = images[num];
              setDescription();
//calling function - this can be included to your changeImage() function without any errors.
        }
    //To set the image description, i use following function:


            function setDescription(){
          var descr = document.getElementById("Description");
             var selectedimageindex = num + 1;/*beause Arrays start counting at 0
*/
        descr.innerHTML= "image "+ selectedimageindex +" of " + images.length;

        }

参考你的代码，它看起来像这样（运行它！;））： 我需要像图像资源那样使用某些部件。

var img_index = 0;
var imgs = [
  "http://www.sololearn.com/uploads/slider/1.jpg", 
  "http://www.sololearn.com/uploads/slider/2.jpg", 
  "http://www.sololearn.com/uploads/slider/3.jpg"
];

function changeImage() {
  var img = document.getElementById("images");
  img_index = ++img_index % 3;
  img.src = imgs[img_index];
  sliderText();
}

//needed to remove keychange functions because its not working on stackoverflow

function sliderText (){
  var Description = document.getElementById("description");
  var imagenumber = img_index + 1; //Arrays start counting at 0.
  Description.innerHTML = "image "+ imagenumber + " of "+imgs.length;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style12.css">
  <title>Task 12</title>
</head>
<div id="slideshow_section">
  <img id="images" src="http://www.sololearn.com/uploads/slider/1.jpg" />
  <span id="description">Image 1 of 3</span>
  <button id="nextbtn" onclick="changeImage()">Next</button>
</div>

<body>

</body>

</html>

对此答案的反馈？请！希望它有用！

祝你好运！

Answer 2

试试这个，这对你有帮助！

refer this link（或）试用此代码

在 HTML

中

    <div class="slideshow-container">
  <div class="mySlides fade">
    <div class="numbertext">1 / 3</div>
    <img src="img1.jpg" style="width:100%">
    <div class="text">Caption Text</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">2 / 3</div>
    <img src="img2.jpg" style="width:100%">
    <div class="text">Caption Two</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">3 / 3</div>
    <img src="img3.jpg" style="width:100%">
    <div class="text">Caption Three</div>
  </div>

  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>
<br>

<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span> 
  <span class="dot" onclick="currentSlide(2)"></span> 
  <span class="dot" onclick="currentSlide(3)"></span> 
</div>

在 Css ：

{box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.mySlides {
    display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* 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);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor:pointer;
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

在 JS：

中

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";
}

为您的JS项目提供最佳服务;）

页面编号为js的幻灯片

2 个答案: