मैं एक छवि गैलरी बना रहा था और मैं इस समस्या में भाग गया, जब मैं कुछ बार दाएं स्क्रॉल करता हूं और फिर बाएं स्क्रॉल करता हूं, तो अंतिम छवि दो बार प्रदर्शित होती है, और वर्तमान छवि संख्या [संकेतक] आइटम की अनुक्रमणिका से मेल नहीं खाती है सरणी, मैंने कहाँ खराब कर दिया है? ऐसा क्यों हो रहा है इस पर कोई स्पष्टीकरण की भी सराहना की जाएगी।

let names = ["imageone.jpg", "imagetwo.jpg", "imagethree.jpg", "imagefour.jpg", "imagefive.jpg", "imagesix.jpg", "imageseven.jpg", "imageeight.jpg", "imagenine.jpg"];

let imageContainer = document.querySelector("#screenShotGallery img");
let indicator = document.querySelector("#indicator");
let left = document.querySelector("#left");
let right = document.querySelector("#right");
let current = 0;

function rightScroll() {
  console.log(names[current++], current)
  indicator.textContent = current;
  if (current >= names.length) {
    current = 0
  }

}

right.addEventListener("click", rightScroll);

function leftScroll() {
  // console.log(names[current--],current) this line produces even worse results
  console.log(names[current = current - 1], current)
  indicator.textContent = current;

  if (current <= 0) {
    current = names.length - 1;
    indicator.textContent = current;
  }

}

left.addEventListener("click", leftScroll);
.screenShots {
  padding-bottom: 30px;
}

#screenShotsIntro {
  text-align: center;
}

#screenShotGallery {
  height: 550px;
  width: 90%;
  margin: 20px auto;
}

#left {
  height: 30px;
  width: 30px;
  position: absolute;
  margin-top: 0%;
  left: 45%;
}

#right {
  height: 30px;
  width: 30px;
  position: absolute;
  margin-top: 0%;
  right: 45%;
}

#right:hover,
#left:hover {
  box-shadow: 0px 6px 1px 2px gray;
}

#indicator {
  height: 23px;
  width: 25px;
  background: gainsboro;
  position: absolute;
  left: 49%;
  margin-top: 5%;
  text-align: center;
  line-height: 23px;
  font-weight: bolder;
}
<div id="screenShotGallery">

  <div id=" controls">
    <div id="indicator"></div>
    <div id="left">left</div>
    <div id="right">right</div>
  </div>
</div>
0
KingRogue 9 अक्टूबर 2018, 13:59

1 उत्तर

सबसे बढ़िया उत्तर

इस पर एक नज़र डालें। साथ ही, ध्यान रखें कि एक सरणी 0 से शुरू होती है, इसलिए आपके सरणी की लंबाई 9 है, लेकिन इसका मतलब है कि 0-8 1-9 नहीं। इसलिए यदि आप current चर का उपयोग करके सरणी के किसी तत्व को लक्षित करना चाहते हैं, तो इसे इस तरह names[current - 1] से घटाएं। इस तरह ऐरे का पहला एलिमेंट आपके इंडिकेटर बॉक्स में 1 के बराबर होगा।

let names = ["imageone.jpg", "imagetwo.jpg", "imagethree.jpg", "imagefour.jpg", "imagefive.jpg", "imagesix.jpg", "imageseven.jpg", "imageeight.jpg", "imagenine.jpg"];

let imageContainer = document.querySelector("#screenShotGallery img");
let indicator = document.querySelector("#indicator");
let left = document.querySelector("#left");
let right = document.querySelector("#right");
let current = 0;

function rightScroll() {
  current++;

  if (current > names.length) {
    current = 1;
  }
  indicator.textContent = current;
}

function leftScroll() {
  current--;

  if (current === 0) {
    current = names.length;
  }
  indicator.textContent = current;
}

left.addEventListener("click", leftScroll);
right.addEventListener("click", rightScroll);
.screenShots {
  padding-bottom: 30px;
}

#screenShotsIntro {
  text-align: center;
}

#screenShotGallery {
  height: 550px;
  width: 90%;
  margin: 20px auto;
}

#left {
  height: 30px;
  width: 30px;
  position: absolute;
  margin-top: 0%;
  left: 45%;
}

#right {
  height: 30px;
  width: 30px;
  position: absolute;
  margin-top: 0%;
  right: 45%;
}

#right:hover,
#left:hover {
  box-shadow: 0px 6px 1px 2px gray;
}

#indicator {
  height: 23px;
  width: 25px;
  background: gainsboro;
  position: absolute;
  left: 49%;
  margin-top: 5%;
  text-align: center;
  line-height: 23px;
  font-weight: bolder;
}
<div id="screenShotGallery">

  <div id=" controls">
    <div id="indicator"></div>
    <div id="left">left</div>
    <div id="right">right</div>
  </div>
</div>
0
Cata John 9 अक्टूबर 2018, 11:19