Jquery स्लाइड शो में चित्र बड़बड़ा रहे हैं और गलत तरीके से दिखा रहे हैं

Question

मेरे पास 5 छवियों का एक स्लाइड शो है, हर दो सेकंड में। यह अगली छवि, और लूप पर जाने वाला है।

वर्तमान में जो हो रहा है वह यह है कि पहली छवि दिखाई देती है, फिर अगले में संक्रमण होता है। जब अगला दिखाई देता है, तो यह पहली छवि पर वापस चमकता है। फिर यह तीसरी छवि पर जाता है जैसा कि इसे श्रृंखला में होना चाहिए, लेकिन फिर से पहली छवि पर वापस आ जाता है। यह पाँचवीं छवि के माध्यम से सभी तरह से जारी है।

लेकिन एक बार जब यह पहली छवि के माध्यम से फिर से चक्र करता है (सभी पांचों के माध्यम से जाने के बाद) वहां से सब कुछ ठीक काम करता है। प्रत्येक छवि 3 सेकंड के लिए बैठती है और फिर आगे बढ़ती है, छवि एक या किसी भी चीज़ पर वापस नहीं जाती है।

मैं जिस कोड का उपयोग कर रहा हूं वह यहां है।

एचटीएमएल:

<div id="slideshow">
   <div>
     <img src="Images/1.gif">
   </div>
   <div>
     <img src="Images/2.gif">
   </div>
   <div>
     <img src="Images/3.gif">
   </div>
   <div>
     <img src="Images/4.gif">
   </div>
   <div>
     <img src="Images/5.gif">
   </div>
</div>

सीएसएस:

#slideshow { 
    clear: both;
    margin: 50px auto; 
    position: relative; 
    max-width: 960px; 
    height: 643px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}

#slideshow img {
    max-width: 100%;    
}

जेएस:

$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(800)
    .next()
    .fadeIn(800)
    .end()
    .appendTo('#slideshow');
},  3000);

मैं जिस वास्तविक साइट को एक साथ रख रहा हूं वह यहां है ताकि आप इसे क्रिया में देख सकें:

Schmelzerwedding.com

इसे वापस कूदने में कोई मदद नहीं है, इसकी बहुत सराहना की जाएगी। आपको धन्यवाद!

javascript jquery html css

1

Kyle Schmelzer 30 मई 2016, 18:31

Answer 1

JQuery का उपयोग करना:

//Just for demo - takes a few secs to load the images
setTimeout(function(){
  $('#ld').hide();
},500);


var cnt = 0;
$("#slideshow > div:gt(0)").hide();
setTimeout(showSlide, 2000);

function showSlide() {
  cnt++;
  cnt = (cnt>3)?0:cnt;
  $("#slideshow > div").fadeOut();
  $("#slideshow > div:eq("+cnt+")").fadeIn();
  setTimeout(showSlide, 2000);
}

#slideshow {clear:both;margin:50px auto;position:relative;max-width:960px;height:643px;padding:10px;box-shadow:0 0 20px rgba(0, 0, 0, 0.4);}

#slideshow > div {position:absolute;top:10px;left:10px;right:10px;bottom:10px;}

#slideshow img {max-width:100%;}

/* For Demo Only */
#ld{position:absolute;top:10%;left:20%;font-size:5rem;text-shadow:5px;z-index:2;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="slideshow">
  <div><img src="http://placekitten.com/550/200"></div>
  <div><img src="http://placekitten.com/548/200"></div>
  <div><img src="http://placekitten.com/550/202"></div>
  <div><img src="http://placekitten.com/548/202"></div>
</div>
<div id="ld">Loading . . . </div>

0

cssyphus 1 जून 2016, 19:19

Answer 2

जैसा कि मैंने अपनी टिप्पणी में उल्लेख किया है, मुझे लगता है कि appendTo() का उपयोग अपराधी हो सकता है। मैं यह भी मानता हूं कि प्रदर्शन के हिसाब से करना सबसे अच्छी बात नहीं है।

यहां एक ऐसा संस्करण है जो केवल इस बात का ट्रैक रखता है कि हम किस स्लाइड पर हैं और संख्या को बढ़ाते हैं।

(function () {
  var slideshow = document.getElementById('slideshow');
  var slides = slideshow.getElementsByTagName('img');
  var currSlide = 0;
  var numSlides = slides.length;
  
  // Set first slide to active
  slides[currSlide].classList.add('active');
  
  setInterval(function () {
    slides[currSlide].classList.remove('active');
    currSlide = (currSlide + 1) >= numSlides ? 0 : currSlide + 1;
    slides[currSlide].classList.add('active');
  }, 2000);
})();

#slideshow {
  position: relative;
  width: 200px;
  height: 200px;
}

#slideshow img {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: opacity .2s ease-out;
}

#slideshow img.active {
  opacity: 1;
}

<div id="slideshow">
<img src="http://placehold.it/199x199">
<img src="http://placehold.it/200x200">
<img src="http://placehold.it/201x201">
<img src="http://placehold.it/202x202">
</div>

संपादित करें: यदि आप (किसी कारण से) शुद्ध जेएस का उपयोग नहीं करना चाहते हैं, तो यहां jQuery में वही कोड है:

(function () {
    var slideshow = $('#slideshow');
    var slides = slideshow.find('> *');
    var currSlide = 0;
    var numSlides = slides.length;

    slides.eq(currSlide).addClass('active');

    setInterval(function () {
        slides.eq(currSlide).removeClass('active');
        currSlide = (currSlide + 1) >= numSlides ? 0 : currSlide + 1;
        slides.eq(currSlide).addClass('active');
    }, 200);
})();

1

powerbuoy 31 मई 2016, 22:44

Answer 3

बूस्ट्रैप तुरंत jQuery को पिक नहीं कर सकता है, उस क्रम को बदलने का प्रयास करें जिसे उन्हें सिर में बुलाया जाता है।

-1

Martin Hugo 30 मई 2016, 18:39

Jquery स्लाइड शो में चित्र बड़बड़ा रहे हैं और गलत तरीके से दिखा रहे हैं

3 जवाब

संबंधित सवाल

जुड़े हुए प्रश्न

नए सवाल