] यह लेख दर्शाता है कि स्क्रैच से एक सरल और अनुकूलन योग्य JQuery छवि स्लाइडर कैसे बनाया जाए। siblings। Fadein / fadeout प्रभाव

html:

...

• 1
• 2
...

css:

स्थिति: रिश्तेदार; } ul.images li { स्थिति: निरपेक्ष; }

• jQuery:

var लक्ष्य; var ट्रिगर = $ ('ul.triggers li'); var चित्र = $ ('ul.images li'); var lastemem = triggers.length - 1; triggers.first ()। AddClass ('सक्रिय'); छवियां। हाइड ()। पहले ()। शो (); फ़ंक्शन स्लाइडरेस्पोन्स (लक्ष्य) { Images.Fadeout (300) .eq (लक्ष्य) .Fadein (300); triggers.removeclass ('सक्रिय')। eq (लक्ष्य) .addclass ('सक्रिय'); }

2। स्लाइडिंग इफेक्ट

html: के समान fadein/fadeout प्रभाव

css:

• 
• 
...

• 1
• 2
...

jQuery:

ul.images {
  position: relative;
}
ul.images li {
  position: absolute;
}

var लक्ष्य; var ट्रिगर = $ ('ul.triggers li'); var चित्र = $ ('ul.images li'); var lastemem = triggers.length - 1; var मास्क = $ ('। मास्क ul.images'); var imgwidth = images.width (); triggers.first ()। AddClass ('सक्रिय'); mask.css ('चौड़ाई', imgwidth * (lastelemam 1) 'px'); फ़ंक्शन स्लाइडरेस्पोन्स (लक्ष्य) { mask.stop (सच, गलत)। triggers.removeclass ('सक्रिय')। eq (लक्ष्य) .addclass ('सक्रिय'); … if ($ (यह) .hasclass ('सक्रिय')) { लक्ष्य = $ (यह) .index (); SliderResponse (लक्ष्य); resettiming (); } }); $ ('। अगला')। क्लिक करें (फ़ंक्शन () { लक्ष्य = $ ('ul.triggers li.active')। सूचकांक (); लक्ष्य === lastelemem? लक्ष्य = 0: लक्ष्य = लक्ष्य 1; SliderResponse (लक्ष्य); resettiming (); }); $ ('। प्रीव')। क्लिक करें (फ़ंक्शन () { लक्ष्य = $ ('ul.triggers li.active')। सूचकांक (); lastelem = triggers.length - 1; लक्ष्य === 0? लक्ष्य = lastemem: लक्ष्य = लक्ष्य - 1; SliderResponse (लक्ष्य); resettiming (); }); फ़ंक्शन स्लाइडर्टिमिंग () { लक्ष्य = $ ('ul.triggers li.active')। सूचकांक (); लक्ष्य === lastelemem? लक्ष्य = 0: लक्ष्य = लक्ष्य 1; SliderResponse (लक्ष्य); } var timingrun = setInterval (function () {slidertiming ();}, 5000); फ़ंक्शन resettiming () { Clearnterval (टाइमिंग्रुन); timingrun = setInterval (फ़ंक्शन () {slidertiming ();}, 5000); }

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