2010-08-16 20 views
7

पर छवि स्लाइडर प्राप्त करें मैं 4000 मिलीसेकंड के अंतराल के साथ ऑटो प्ले करने के लिए अपना स्वयं का छवि स्लाइडर प्राप्त करने का प्रयास कर रहा हूं। मैंने setTimeout का उपयोग करने का प्रयास किया है, लेकिन मुझे इसे काम करने के लिए प्रतीत नहीं होता है। अगर कोई मेरी मदद कर सकता है तो मैं इसकी सराहना करता हूं। यहाँ स्लाइडर के उदाहरण है:ऑटो स्लाइडर

http://www.matthewruddy.com/slider-intervalissue/

कोई भी विचार कैसे मैं इसे ऑटो खेलने के लिए मिल सकता है?

$(document).ready(function(){ 
    var images = $('.slider li'); 
    var slides = images.length; 
    var sliderwidth = 500; 
    var currentimage = 0; 
    var containerwidth = sliderwidth*slides; 
    var autoplay = 4000; 

    $('.slider').css('width', containerwidth); 

    $('#next').bind('click',nextimage); 

    function nextimage(){ 
     if(currentimage<slides-1){ 
      currentimage++; 
      $('.slider').animate({left:-sliderwidth*(currentimage)},{duration:800,easing:'easeInOutCubic'}); 
     } 
     else{ 
      currentimage = 0; 
      $('.slider').animate({left:0},{duration:800,easing:'easeInOutCubic'}) 
     } 
    }; 

}); 

धन्यवाद, मैथ्यू

उत्तर

2

मैं एक ऑटोप्ले कि काफी अच्छी तरह से चलाता है, setTimeout और प्रत्यावर्तन के संयोजन का उपयोग की स्थापना करने में सक्षम था:

यहाँ jQuery कोड है।

मैंने nextimage() एक पैरामीटर autoplay फ़ंक्शन दिया, जो एक बूलियन है।

if (autoplay) { setTimeout(function() { nextimage(true); }, 4000); } 

अंत में मैं ऑटोप्ले लूप चलते रहने के लिए स्क्रिप्ट के अंत में इस लाइन कहा,: तब मैं समारोह के अंत में निम्नलिखित पंक्ति जोड़ा डेमो

setTimeout(function() { nextimage(true); }, 4000); 

चेक आउट यहाँ, क्या आप कुछ संशोधनों के साथ प्रदान की है, स्वत: चलना करने के लिए से ज्यादातर का निर्माण: http://jsfiddle.net/bVjkP/

संक्षेप में, आप nextimage() फ़ंक्शन में एक बूलियन गुजरती हैं, यह बताने के लिए किया जाए या नहीं एक ऑटोप्ले शुरू करने के लिए। फिर आप गेंद रोलिंग प्राप्त करने के लिए बस प्रारंभिक सेटटाइमआउट को कॉल करते हैं। इस विधि के साथ चाल यह है कि आपको setTimeout के माध्यम से एक अनाम फ़ंक्शन को कॉल करना होगा, जो ऑटॉप्ले फ़ंक्शन को ऑटॉप्ले सेट के साथ सत्य पर कॉल करता है, क्योंकि आप setTimeout के साथ फ़ंक्शन को कॉल करते समय पैरामीटर पास नहीं कर सकते हैं। यह jQuery का उपयोग करके क्लिक या होवर जैसी घटनाओं के लिए बाध्यकारी कार्यों के लिए विधि के समान है।

+0

धन्यवाद! आपकी विधि पूरी तरह से काम करती है हालांकि मैं अभी भी कुछ हद तक इसे समझ नहीं पा रहा हूं (मुझे यह समझना अच्छा लगता है कि वे काम करते हैं या नहीं)। आपको लाइन को दो बार क्यों लिखना है? पहली पंक्ति क्यों नहीं है; > यदि (ऑटोप्ले) {setTimeout (फ़ंक्शन() {nextimage (true);}, 4000); } ऑटोप्लेइंग जा रहा है? –

+0

वह पंक्ति केवल पहली बार कॉल होने के बाद ही हर 4 सेकंड में चलती रहती है (माना जाता है कि इसे ऑटोप्ले = सत्य कहा जाता है)। आपको पहली जगह लूप शुरू करने के लिए कुछ चाहिए। इसके बारे में सोचें जैसे सीढ़ियों के किनारे पर एक बदबूदार धक्का देना। इसे गति में सेट करने के बाद यह जारी रहेगा, लेकिन इसे शुरू करने के लिए आपको इसे प्रारंभिक धक्का देना होगा। – Ender

+0

ठीक है अब मैं समझता हूँ! बहुत - बहुत धन्यवाद! –

संबंधित मुद्दे