वेनिला जावास्क्रिप्ट

Question

के साथ एक अनंत कैरोसेल, मैं शुद्ध जावास्क्रिप्ट के साथ अपना खुद का कैरोसेल बनाने की कोशिश कर रहा हूं।

मैं विकल्प जोड़ने के लिए कुशल को चुनने के साथ संघर्ष कर रहा हूं।

कुछ कारणों के लिए

, हर तत्व (फोटो, सामान्य वस्तु) एक id

एल्गोरिथ्म मुझे लगता है कि जैसे हो जाता है होना चाहिए:

• आप जाँच लें कि हिंडोला बहकर है (वे पर्याप्त वस्तुओं रहे हैं पूरे कंटेनर फिट करने के लिए)
• यदि नहीं: पहले तत्व की प्रतिलिपि, फिर दूसरे तत्व की एक प्रति संलग्न करें और इसी तरह। (लेकिन वहाँ आईडी के साथ एक मुद्दा होगा, क्योंकि इस वस्तु एक ही आईडी होगा)

- उपयोगकर्ता (दाईं ओर) पिछले वस्तु को स्क्रॉल कर रही है तो पहले डोम वस्तु को संलग्न सरणी वापस
- यदि उपयोगकर्ता पर पहली ऑब्जेक्ट (बाएं) तक स्क्रॉल कर रहा है तो अंतिम DOM बच्चे को फ्रंट सरणी में जोड़ें।

क्या यह काम करने जा रहा है? क्या एक अनंत कैरोसेल करने का कोई और कुशल तरीका है?

मैंने यह भी सुना है कि बाएं, दाएं गुणों को बदलने के बजाय अनुवाद संपत्ति का उपयोग करना बेहतर है, इसलिए CPU के मुकाबले GPU के लिए और अधिक काम होगा।

Answer 1

मैंने एनीमेशन तकनीक और सादा जावास्क्रिप्ट के रूप में सीएसएस रूपांतरणों के साथ एक साधारण स्लाइडर बनाया।

var img = document.getElementsByClassName("img")[0]; 
img.style.transform = 'translate('+value+'px)'; 

आप इस कोडेन स्निपेट में इसका परीक्षण कर सकते हैं। http://codepen.io/TobiObeck/pen/QKpaBr

बटन पर एक प्रेस एक्स-अक्ष के साथ संबंधित दिशा में सभी छवियों का अनुवाद करता है। किनारे पर एक छवि, पारदर्शी outerImg.style.opacity = '0'; सेट की गई है और दूसरी तरफ अनुवादित है। आप HTML में छवि तत्व जोड़ या निकाल सकते हैं और यह अभी भी काम करता है।

इस दूसरे कोडेन स्निपेट में आप देख सकते हैं कि यह कैसे काम करता है। opacity0.5 पर सेट है, इसलिए यह देखा जा सकता है कि कौन सी छवि पक्ष को स्विच करती है। क्योंकि overflow: hidden हटा दिया गया है, आप देख सकते हैं कि किनारे पर छवियों को दूसरी ओर कैसे लगाया जाता है। http://codepen.io/TobiObeck/pen/WGpdLE

इसके अलावा यह ध्यान देने योग्य है कि एनीमेशन पूर्ण हो गया है, अन्यथा साथ ही साथ जोड़े गए अनुवाद अजीब लगेंगे। इसलिए जब तक एनीमेशन पूरा नहीं हो जाता तब तक एक क्लिक एक और एनीमेशन ट्रिगर नहीं करेगा।

img.addEventListener("transitionend", transitionCompleted, true); 

var transitionCompleted = function(){ 
    translationComplete = true; 
} 

leftBtnCLicked(){ 
    if(translationComplete === true){ 
     //doAnimation 
    } 
}