मैं अपने स्लाइडर को एक परीक्षण पर इंटरैक्टिव बनाने की कोशिश कर रहा हूं जिस पर मैं काम कर रहा हूं और मैं इसे समझ नहीं पा रहा हूं। मेरे पास कुछ कोड है जिसका मैंने W3 से उपयोग किया है, लेकिन मैं बटनों के लिए कुछ ईवेंट जोड़ने की कोशिश कर रहा हूं, इसलिए यह HTML में एम्बेड किए जाने के बजाय अपनी स्वयं की जावास्क्रिप्ट फ़ाइल पर है।

यहां एचटीएमएल है:

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="main.js" defer></script>

<body>

<h2 class="w3-center">Manual Slideshow</h2>

<div class="w3-content w3-display-container">
  <img class="mySlides" src="./image_1.jpg" style="width:100%">
  <img class="mySlides" src="./image_2.jpg" style="width:100%">
  <img class="mySlides" src="./image_3.jpg" style="width:100%">

  <button id="clicker" class="w3-button w3-black w3-display-left">&#10094;</button>
  <button id="clicker" class="w3-button w3-black w3-display-right">&#10095;</button>
</div>

</body>
</html>

यहाँ जावास्क्रिप्ट है:

let leftSlideButton = document.getElementById("clicker");
let rightSlideButton = document.getElementById("clicker");

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";  
}

let slideForward = plusDivs(1);
let slideBack = plusDivs(-1);

leftSlideButton.onclick = slideBack;
rightSlideButton.onclick = slideForward;

स्लाइडर ने काम किया जब स्क्रिप्ट एचएमटीएल में एम्बेड की गई थी, लेकिन जब मैंने अपनी जावास्क्रिप्ट फ़ाइल में बटन के लिए कुछ कार्यक्षमता में लिखने की कोशिश की तो यह काम करना बंद कर देता है और अब मैं बहुत स्टंप हो गया हूं। मैंने उन्हें अपने स्वयं के चर में जोड़ा और इसके एचटीएमएल चयनकर्ता को पकड़ लिया ताकि मैं बदले में एक ईवेंट हैंडलर जोड़ सकूं और इसे फ़ंक्शन से लिंक कर सकूं लेकिन यह काम नहीं करता है। किसी भी सहायता की सराहना की जाएगी।

साथ ही, यह मेरी पहली पोस्ट है इसलिए क्षमा करें यदि मैंने इसे सही तरीके से प्रारूपित नहीं किया है।

टीआईए, नील।

0
neilvix 28 सितंबर 2019, 01:53

3 जवाब

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

सबसे अधिक संभावना 2 x id="clicker" के कारण होने वाली समस्या है। बटनों के लिए अद्वितीय आईडी का उपयोग करने से समस्या का समाधान हो जाना चाहिए।

इसके बाद, चूंकि slideIndex ने विश्व स्तर पर घोषित किया है, इसलिए इसके लिए plusDivs मिडिल-वेयर की आवश्यकता नहीं है।

मैं बेहतर पठनीयता के लिए स्पष्ट कार्यों और चर नामों का उपयोग करने का भी सुझाव दूंगा। इन्हें जांचें: slideDivs बनाम showDivs, step बनाम n, slides बनाम x, आदि। यह शायद बड़ा नहीं लगता दिए गए उदाहरण पर विचार करें, लेकिन यह एक अच्छी आदत है और बड़ी परियोजनाओं पर काम करते समय आपका बहुत समय बचाएगा।

कुछ छोटे अनुकूलन भी संभव हैं, जैसे कि एक लूप में दृश्यता बदलना और स्लाइडिंग फ़ंक्शन के बाहर स्लाइड को कैशिंग करना ताकि इसे हर क्लिक पर फिर से चुनने से बचा जा सके। सुझाए गए पुनर्लेखन कोड के लिए स्निप्ड की जाँच करें।

var visibleSlideIndex = 0;
var slides = document.getElementsByClassName("mySlides");

function slideDivs(step) {
    visibleSlideIndex = (visibleSlideIndex + step + slides.length) % slides.length;
    for (let index = 0; index < slides.length; index++) {
        slides[index].style.display = visibleSlideIndex === index ? "block" : "none";
    }
}

document.getElementById("slideLeftBtn").onclick = () => slideDivs(1);
document.getElementById("slideRightBtn").onclick = () => slideDivs(-1);
slideDivs(0);
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="main.js" defer></script>

<body>

<h2 class="w3-center">Manual Slideshow</h2>

<div class="w3-content w3-display-container">
	<img class="mySlides" src="./image_1.jpg" style="background-color: red;">
	<img class="mySlides" src="./image_2.jpg" style="background-color: green;">
	<img class="mySlides" src="./image_3.jpg" style="background-color: blue;">
  
	<button id="slideLeftBtn" class="w3-button w3-black w3-display-left">&#10094;</button>
	<button id="slideRightBtn" class="w3-button w3-black w3-display-right">&#10095;</button>
</div>

</body>
</html>
0
Denis O. 28 सितंबर 2019, 04:45

आपके पास कई मुद्दे हैं:

सबसे पहले, बटन चयन। आप एक ही आईडी के साथ 2 बटन प्राप्त करने का प्रयास कर रहे हैं, आपको इसे बदलना होगा।

फिर, वे 2 पंक्तियाँ:

let slideForward = plusDivs(1);
let slideBack = plusDivs(-1);

plusDivs(1) और plusDivs(-1) फ़ंक्शन को कॉल कर रहे हैं और मान लौटा रहे हैं। इसे ठीक करने के लिए, आप plusDivs को कॉल करने के लिए एक अनाम फ़ंक्शन (या एक तीर फ़ंक्शन) बना सकते हैं

यहां एक निश्चित संस्करण है (मैंने छवियों की चौड़ाई को 25% में बदल दिया है, इसलिए इसे स्निपेट में देखना आसान होगा):

let leftSlideButton = document.getElementById("clickerLeft");
let rightSlideButton = document.getElementById("clickerRight");

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";  
}


leftSlideButton.onclick = () => plusDivs(1);
rightSlideButton.onclick = () => plusDivs(-1);
<h2 class="w3-center">Manual Slideshow</h2>

<div class="w3-content w3-display-container">
  <img class="mySlides" src="https://via.placeholder.com/150" style="width:25%">
  <img class="mySlides" src="https://via.placeholder.com/200" style="width:25%">
  <img class="mySlides" src="https://via.placeholder.com/250" style="width:25%">

  <button id="clickerLeft" class="w3-button w3-black w3-display-left">&#10094;</button>
  <button id="clickerRight" class="w3-button w3-black w3-display-right">&#10095;</button>
</div>
0
Seblor 28 सितंबर 2019, 02:07

आपके पास दो समान आईडी नहीं हो सकते हैं, इसलिए मैंने बटनों को अलग-अलग आईडी दी, फिर मैंने प्रत्येक को addEventListener के साथ एक ईवेंट श्रोता संलग्न किया। प्रत्येक श्रोता के अंदर मैंने सीधे plusDivs() फ़ंक्शन जोड़ा।

let leftSlideButton = document.getElementById("clicker-left");
let rightSlideButton = document.getElementById("clicker-right");

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";  
}

leftSlideButton.addEventListener("click",  () => {plusDivs(1)});
rightSlideButton.addEventListener("click", () => {plusDivs(-1)});
.w3-content > img{
   max-height: 200px;
   object-fit: contain;
   background-color: lightblue;
}
<h2 class="w3-center">Manual Slideshow</h2>

<div class="w3-content w3-display-container">
  <img class="mySlides" src="http://placekitten.com/100/200" style="width:100%">
  <img class="mySlides" src="http://placekitten.com/200/200" style="width:100%">
  <img class="mySlides" src="http://placekitten.com/150/200" style="width:100%">

  <button id="clicker-left" class="w3-button w3-black w3-display-left">&#10094;</button>
  <button id="clicker-right" class="w3-button w3-black w3-display-right">&#10095;</button>
</div>
0
symlink 28 सितंबर 2019, 02:11