با استفاده از قالب های جاوا اسکریپت یک نمایش اسلاید ایجاد کنید. آزمایشگاه عکس. کنترل های Slidr

نمای کلی برنامه های ایجاد نمایش اسلاید ایجاد یک نمایش اسلاید برای یک وب سایت

هنگام ایجاد یک نمایش اسلاید برای ارسال در یک وب سایت، بهتر است از راه حل های نرم افزاری آماده استفاده کنید. به نظر من بهترین و ساده ترین گزینه استفاده از jQuery است، یک کتابخانه رایگان ویژه از اسکریپت ها (برنامه های کوچک جاوا اسکریپت). مقالات قبلی قبلاً در مورد این ابزار فوق العاده توسعه وب صحبت کرده اند. برای مثال به مقاله گالری عکس مراجعه کنید جی کوئری- ساده و زیبا! . حال بیایید از jQuery برای ایجاد یک نمایش اسلاید در سایت استفاده کنیم که اصطلاحاً اسلایدر نامیده می شود.

برای این کار از پلاگین Slides که توسط برنامه نویس Nathan Searles، مدیر فنی استودیوی طراحی "The Brigade" در پورتلند، اورگان، ایالات متحده ایجاد شده است، استفاده خواهیم کرد. یکی دیگر از پیشرفت های او در مقاله گالری عکس برای یک فروشگاه آنلاین شرح داده شد.

نصب پلاگین اسلایدها آسان است، چندین گزینه برای تغییر تصاویر در یک نمایش اسلاید دارد و اغلب برای هدر سایت استفاده می شود. نمونه ای از نحوه عملکرد این نوار لغزنده با تنظیمات پیش فرض در شکل نشان داده شده است:

نصب اسلایدشو اسلایدها

مثل همیشه ابتدا یک پوشه اسکریپت در سایت ایجاد کنید. سپس باید آرشیو را دانلود کرده و آن را در پوشه ایجاد شده باز کنید. این شامل دو اسکریپت jquery-1.8.3.min.js و jquery.cycle.all.min.js خواهد بود.

بعد، در عنوان صفحه داخل تگ ... خطوط زیر را وارد می کنیم که نشان دهنده مسیر اسکریپت ها و یک جاوا اسکریپت کوچک است که پارامترهای نمایش اسلاید را مشخص می کند:

$(".نمایش اسلاید").cycle((
fx: "محو شدن"
});
});

.نمایش اسلاید(
عرض: 200 پیکسل؛
ارتفاع: 135px;
حاشیه: خودکار;
}

همانطور که می بینید، یک قانون CSS ساده نیز وجود دارد که در آن باید اندازه پنجره را برای تصاویر نمایش اسلاید آینده (عرض - ارتفاع) مشخص کنید. طبیعتاً همه تصاویر باید یک اندازه باشند. در صورت تمایل، می‌توانید گزینه‌های CSS را با افزودن، به عنوان مثال، حاشیه‌ها، پس‌زمینه، بالشتک‌ها و عناصر دیگر برای تصاویر نمایش اسلاید خود گسترش دهید. در این حالت باید اندازه کل یعنی تصویر به اضافه تورفتگی ها و حاشیه ها در طول و عرضی که تنظیم کردید را مشخص کنید.

یادداشت مهم:اگر سایت شما از چندین پلاگین jQuery استفاده می کند، راحت تر است که فایل jquery.js (ترجیحا آخرین نسخه) را به پوشه root منتقل کنید تا چندین بار آن را دانلود نکنید. در این صورت خط دسترسی به آن برای همه افزونه ها یکسان خواهد بود. به طور خاص، برای مثال ما به این صورت معلوم می شود:

استفاده از چندین نسخه مختلف جی کوئری در یک صفحه توصیه نمی شود تا با یکدیگر تضاد نداشته باشند. در عین حال، مطمئن شوید که افزونه ها با نسخه نصب شده jQuery کار می کنند، زیرا همه نسخه ها قابل تعویض نیستند.

آخرین مرحله قرار دادن تصاویر در صفحه است. اینجا هم همه چیز ساده است. تصاویر را داخل یک تگ یا تگ دیگری قرار دهید که به شما امکان می دهد عرض و ارتفاع را تنظیم کنید و کلاس = "نمایش اسلاید" آن را مشخص کنید. برای مثال ما، کد HTML اسلایدر به شکل زیر است:

در این مرحله، ساخت اسلایدشو تقریباً کامل شده است و می توانید با باز کردن صفحه خود در مرورگر، آن را مشاهده کنید.

تنظیم گزینه های نمایش اسلاید اسلایدها

در نمایش اسلاید ایجاد شده، می توانید انواع مختلف انتقال بین فریم ها را با تغییر جاوا اسکریپت قرار داده شده در هدر صفحه تنظیم کنید. علاوه بر این، با جایگزینی خط sync:false در اسکریپت با sync:true، می‌توانید هنگام تغییر تصاویر فضا را حذف کنید.

مدت زمان نمایش تصاویر توسط پارامتر timeout و سرعت توسط پارامتر سرعت کنترل می شود. به عنوان مثال، در اینجا چندین گزینه رایج نمایش اسلاید و اسکریپت های مربوطه وجود دارد که باید در هدر صفحه درج شوند.

1. انحلال (مثال ما): $(document).ready(function() ( $(".نمایش اسلاید").cycle(( fx: "fade"، //نوع انتقال سرعت: 1000، //سرعت تغییر تصویر تایم اوت: 1000 // مدت زمان فریم }); });
2. مخلوط کردن: $(document).ready(function() ( $(".نمایش اسلاید").cycle(( fx: "shuffle", همگام سازی: نادرست، سرعت: 500 تایم اوت: 5000 }); });
3. بزرگنمایی: $(document).ready(function() ( $(".نمایش اسلاید").cycle(( fx: "zoom", همگام سازی: نادرست }); });
4. چرخش در محور X یا Y: $(document).ready(function() ( $(".نمایش اسلاید").cycle(( fx: "curtainX"، // برای چرخش در امتداد محور Y - curtainY همگام سازی: نادرست }); });
5. جمع شدن عمودی: $(document).ready(function() ( $(".نمایش اسلاید").cycle(( fx: "turnDown"، // جهت را می توان turnUp، turnLeft، turnRight تنظیم کرد همگام سازی: درست است }); });
6. پیمایش (افست): $(document).ready(function() ( $(".نمایش اسلاید").cycle(( fx:"scrollDown"، // جهت افست را می توان scrollUp، scrollLeft، scrollRight تنظیم کرد همگام سازی: درست است }); });
7. محو شدن به سمت راست: $(document).ready(function() ( $(".نمایش اسلاید").cycle(( fx: "پوشش }); });

گاهی اوقات لازم است چندین گزینه نمایش اسلاید را در یک صفحه از سایت قرار دهید، همانطور که در این مقاله انجام شده است. برای انجام این کار، فقط باید کلاس های مختلفی را برای هر گزینه در خط $(.slideshow)).cycle(((به کد جدول بالا مراجعه کنید) مشخص کنید و فراموش نکنید که اندازه پنجره ها را برای هر کلاس مشخص کنید. در CSS

اگر اسلایدها فقط حاوی تصاویر هستند، می توانید ساختار را کمی تغییر دهید:

قبلی بعدی

فراموش نکنید که یک مقدار معنی دار به ویژگی alt اضافه کنید.

برای استفاده از پیوندهای صفحه، می توانید موارد زیر را انجام دهید:

... ... ... 1 2 3

قبلی بعدی 1 2 3

به استفاده از ویژگی های "داده" توجه کنید - برخی از نمایش های اسلاید می توانند تصاویر را به عنوان پس زمینه درج کنند، و این ویژگی ها در اسکریپت به عنوان مکان هایی برای اتصال پس زمینه و اسلاید استفاده می شود.

استفاده از لیست ها یک رویکرد صحیح معنایی استفاده از آیتم های لیست به عنوان اسلاید است. در این حالت ساختار به صورت زیر خواهد بود:

اگر ترتیب اسلایدها به خوبی تعریف شده باشد (مثلاً در یک ارائه)، می توانید از لیست های شماره گذاری شده استفاده کنید.

CSS بیایید با ساختار زیر شروع کنیم:

قبلی بعدی

زیرا از آنجایی که نمایش اسلاید از راست به چپ اجرا می شود، محفظه بیرونی اندازه ثابتی خواهد داشت و ظرف داخلی عریض تر خواهد بود زیرا شامل همه اسلایدها است. اولین اسلاید قابل مشاهده خواهد بود. این از طریق سرریز تنظیم می شود:

لغزنده (عرض: 1024 پیکسل؛ سرریز: پنهان؛ ) .لغزنده-لغزنده (عرض: 9999 پیکسل؛ ارتفاع: 683 پیکسل؛ موقعیت: نسبی؛ انتقال: سمت چپ 500 میلی‌ثانیه خطی؛ )

سبک های لفاف داخلی عبارتند از:

عرض زیاد
- ارتفاع ثابت، حداکثر ارتفاع اسلاید
- موقعیت: نسبی، که به شما امکان ایجاد حرکت اسلاید را می دهد
- انتقال CSS به سمت چپ، که حرکت را صاف می کند. برای سادگی، ما همه پیشوندها را وارد نکرده ایم. همچنین می توانید از تبدیل های CSS (همراه با ترجمه) برای این کار استفاده کنید.

اسلایدها دارای یک ویژگی float هستند تا آنها را در یک ردیف قرار دهد. آنها نسبتاً طوری قرار گرفته اند که می توانید افست سمت چپ آنها را در JS بدست آورید. ما از آن برای ایجاد یک افکت کشویی استفاده می کنیم.

اسلاید ( شناور: چپ؛ موقعیت: نسبی؛ عرض: 1024 پیکسل؛ ارتفاع: 683 پیکسل؛ )

اگرچه عرض مشخصی را تعیین کرده ایم، اما در اسکریپت می توانیم با ضرب تعداد اسلایدها در عرض اسلاید آن را تغییر دهیم. شما هرگز نمی دانید چه عرضی ممکن است نیاز داشته باشید.

پیمایش از طریق دکمه های "قبلی" و "بعدی" انجام می شود. ما سبک های پیش فرض آنها را بازنشانی می کنیم و سبک خود را اختصاص می دهیم:

نوار نوار لغزنده ( ارتفاع: 40 پیکسل؛ عرض: 100 درصد؛ حاشیه بالا: 1.5 میلی متر؛ ) .دکمه نوار کشویی ( حاشیه: هیچ، نمایش: بلوک؛ عرض: 40 پیکسل؛ ارتفاع: 40 پیکسل؛ مکان نما: اشاره گر؛ تورفتگی نوشتاری : -9999em؛ رنگ پس‌زمینه: شفاف؛ پس‌زمینه تکرار: بدون تکرار؛ ) .slider-nav button.slider-previous ( شناور: سمت چپ؛ پس‌زمینه-تصویر: url(previous.png)؛ ) .slider-nav button. .slider-next ( شناور: راست؛ پس‌زمینه-تصویر: url(next.png)؛ )

هنگام استفاده از پیوندهای صفحه به جای دکمه ها، می توانید سبک های زیر را ایجاد کنید:

نوار لغزنده (تراز متن: مرکز؛ حاشیه بالا: 1.5em؛ ) .slider-nav a (نمایش: بلوک درون خطی؛ تزئین متن: هیچکدام؛ حاشیه: 1px جامد #ddd؛ رنگ: #444؛ عرض: 2em؛ ارتفاع: 2em؛ ارتفاع خط: 2؛ تراز نوشتاری: مرکز؛ ) .slider-nav a.current (رنگ حاشیه: #000؛ رنگ: #000؛ وزن قلم: پررنگ؛ )

این کلاس ها به صورت پویا از روی اسکریپت اختصاص داده می شوند.

این رویکرد برای اثر کشویی مناسب است. اگر می‌خواهیم به افکت محو شدن دست یابیم، باید استایل‌ها را تغییر دهیم، زیرا float لایه‌های افقی را بین اسلایدها اضافه می‌کند. یعنی ما به اسلاید در یک خط نیاز نداریم - ما به یک "بسته" اسلاید نیاز داریم:

لغزنده (عرض: 1024 پیکسل؛ حاشیه: 2em خودکار؛ ) .لغزنده-لغزنده (عرض: 100%؛ ارتفاع: 683 پیکسل؛ موقعیت: نسبی؛ /* زمینه ای برای موقعیت یابی مطلق ایجاد می کند */ ) .slide ( موقعیت: مطلق؛ /* موقعیت یابی مطلق همه اسلایدها */ عرض: 100%؛ ارتفاع: 100%؛ کدورت: 0؛ /* همه اسلایدها پنهان هستند */ انتقال: کدورت 500 میلی ثانیه خطی؛ ) /* در ابتدا فقط اولین مورد قابل مشاهده است */ .slider- لفاف >
ما از ویژگی opacity برای پنهان کردن اسلایدها استفاده می‌کنیم، زیرا صفحه‌خوان‌ها محتوای عناصری را که نمایش دارند: هیچ‌کدام را نادیده می‌گیرند (به CSS در عمل مراجعه کنید: محتوای نامرئی فقط برای کاربران صفحه‌خوان).

به لطف موقعیت‌یابی متنی CSS، ما یک «پشته» از اسلایدها ایجاد کردیم که آخرین اسلاید در منبع جلوتر از اسلایدهای دیگر است. اما این چیزی نیست که ما نیاز داریم. برای حفظ ترتیب اسلایدها، باید همه اسلایدها را به جز اسلاید اول مخفی کنیم.

JS از انتقال CSS استفاده می کند، مقدار خاصیت opacity اسلاید فعلی را تغییر می دهد و این مقدار را برای سایرین به صفر می رساند.

کد جاوا اسکریپت نمایش اسلاید بدون صفحه بندی نمایش اسلاید بدون صفحه بندی با کلیک روی دکمه های «بعدی» و «قبلی» کار می کند. آنها را می توان به عنوان عملگرهای افزایشی و کاهشی در نظر گرفت. همیشه یک اشاره گر (یا مکان نما) وجود دارد که با هر بار فشار دادن دکمه ها کم یا زیاد می شود. مقدار اولیه آن 0 است و هدف انتخاب اسلاید جاری به همان روشی است که عناصر آرایه انتخاب می شوند.

بنابراین وقتی بار اول Next را کلیک می کنیم، نشانگر 1 افزایش می یابد و یک اسلاید دوم دریافت می کنیم. با کلیک بر روی Previous نشانگر را کاهش می دهیم و اسلاید اول را می گیریم. و غیره.

همراه با اشاره گر، از متد .eq() jQuery برای دریافت اسلاید فعلی استفاده می کنیم. در JS خالص به این صورت است:

تابع Slideshow(element) ( this.el = document.querySelector(element); this.init(); ) Slideshow.prototype = (init: function() ( this.slides = this.el.querySelectorAll(.slide") ; //... ), _slideTo: function(اشاره گر) ( var currentSlide = this.slides; //... ) );

به یاد داشته باشید - NodeList از شاخص ها درست مانند یک آرایه استفاده می کند. راه دیگر برای انتخاب اسلاید فعلی با انتخابگرهای CSS3 است:

Slideshow.prototype = ( init: function() ( //...)، _slideTo: function(اشاره‌گر) (var n = نشانگر + 1؛ var currentSlide = this.el.querySelector(.slide:nth-child(" + n + ")"); //... ) );

انتخابگر CSS3:nth-child() عناصر را از 1 می شمارد، بنابراین باید یک عدد 1 به اشاره گر اضافه کنید. پس از انتخاب یک اسلاید، ظرف اصلی آن باید از راست به چپ منتقل شود. در jQuery می توانید از متد .animate() استفاده کنید:

(function($) ($.fn.slideshow = function(گزینه‌ها) (گزینه‌ها = $.extend(( wrapper: ".slider-wrapper", slides: ".slide", //... speed: 500, easing : "خطی")، گزینه ها)؛ var slideTo = تابع(اسلاید، عنصر) ( var $currentSlide = $(options.slides، element).eq(slide)؛ $(options.wrapper، عنصر). animate(( سمت چپ : - $currentSlide.position().left)، options.speed، options.easing); //...)؛ ))(jQuery);

هیچ متد animate() در JS معمولی وجود ندارد، بنابراین از انتقال CSS استفاده می کنیم:

نوار لغزنده (موقعیت: نسبی؛ // انتقال مورد نیاز: چپ 500 میلی ثانیه خطی؛ )

اکنون می توانید ویژگی سمت چپ را به صورت پویا از طریق شی style تغییر دهید:

حال باید برای هر کنترل یک رویداد کلیک ایجاد کنیم. در jQuery می توانید از متد .on () و در JS خالص می توانید از متد ()adEventListener استفاده کنید.

همچنین باید بررسی کنید که آیا نشانگر به مرزهای لیست رسیده است - 0 برای "قبلی" و تعداد کل اسلایدها برای "بعدی". در هر مورد، باید دکمه مربوطه را پنهان کنید:

(function($) ($.fn.slideshow = function(گزینه‌ها) (گزینه‌ها = $.extend(( wrapper: ".slider-wrapper"، اسلایدها: ".slide"، قبلی: ".slider-previous"، بعدی : ".slider-next"، //... سرعت: 500، کاهش: "خطی")، گزینه ها؛ var slideTo = تابع (اسلاید، عنصر) ( var $currentSlide = $(options.slides، عنصر). eq(slide)؛ $(options.wrapper, element).animate(( سمت چپ: - $currentSlide.position().left ), options.speed, options.easing); )؛ بازگشت this.each(function() ( var $element = $(this)، $previous = $(options.previous، $element)، $next = $(options.next، $element)، index = 0، کل = $(options.slides).length; $next.on("click", function() ( index++; $previous.show(); if(index == total - 1) ( index = total - 1; $next.hide(); ) slideTo(index, $previous.on("click", function() ( index--; $next.show(); if(index == 0) (index = 0; $previous.hide(); ) slideTo(index, $element); )); )); )))(jQuery);

و در JS خالص به این صورت است:

تابع Slideshow(element) ( this.el = document.querySelector(element); this.init(); ) Slideshow.prototype = ( init: function() ( this.wrapper = this.el.querySelector(.slider-wrapper ")؛ this.slides = this.el.querySelectorAll(".slide"); this.previous = this.el.querySelector(".slider-previous"); this.next = this.el.querySelector(".slider -next")؛ this.index = 0; this.total = this.slides.length; this.actions(); ), _slideTo: function(اشاره گر) ( var currentSlide = this.slides; this.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; )، اقدامات: function() ( var self = this; self.next.addEventListener("click", function() (self.index++; self.previous.style. display = "block"; if(self.index == self.total - 1) (self.index = self.total - 1; self.next.style.display = "none"; ) self._slideTo(self.index ); ), false); self.previous.addEventListener("click", function() (self.index--; self.next.style.display = "block"; if(self.index == 0) (self .index = 0;self.previous.style.display = "هیچکدام"; ) self._slideTo(self.index); ) نادرست) )))

نمایش اسلاید صفحه بندی شده در این نوع نمایش اسلاید، هر لینک مسئول یک اسلاید می باشد، بنابراین نیازی به نمایه نیست. انیمیشن ها تغییر نمی کنند، نحوه حرکت کاربر در اسلایدها تغییر می کند. برای jQuery کد زیر را خواهیم داشت:

(function($) ($.fn.slideshow = function(گزینه‌ها) (گزینه‌ها = $.extend(( wrapper: ".slider-wrapper", slides: ".slide", nav: ".slider-nav", speed : 500، easing: "خطی")، گزینه ها)؛ var slideTo = تابع(اسلاید، عنصر) ( var $currentSlide = $(options.slides، element).eq(slide)؛ $(options.wrapper، عنصر). animate(( سمت چپ: - $currentSlide.position().left)، options.speed، options.easing); )؛ return this.each(function() (var $element = $(this)، $navigationLinks = $( "a"، options.nav)؛ $navigationLinks.on("click", function(e) (e.preventDefault(); var $a = $(this)، $slide = $($a.attr("href "))؛ slideTo($slide، $element)؛ $a.addClass("current").siblings(). removeClass("current"); )); )); ))(jQuery);

در این حالت، هر لنگر مربوط به شناسه یک اسلاید خاص است. در JS خالص، می‌توانید هم از آن و هم از ویژگی داده استفاده کنید، که شاخص عددی اسلایدها را در NodeList ذخیره می‌کند:

تابع Slider(element) ( this.el = document.querySelector(element); this.init(); ) Slider.prototype = ( init: function() ( this.links = this.el.querySelectorAll("#slider-nav a"); this.wrapper = this.el.querySelector("#slider-wrapper"); this.navigate(); ), navigate:function() ( for (var i = 0; i< this.links.length; ++i) { var link = this.links[i]; this.slide(link); } }, slide: function(element) { var self = this; element.addEventListener("click", function(e) { e.preventDefault(); var a = this; self.setCurrentLink(a); var index = parseInt(a.getAttribute("data-slide"), 10) + 1; var currentSlide = self.el.querySelector(".slide:nth-child(" + index + ")"); self.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; }, false); }, setCurrentLink: function(link) { var parent = link.parentNode; var a = parent.querySelectorAll("a"); link.className = "current"; for (var j = 0; j < a.length; ++j) { var cur = a[j]; if (cur !== link) { cur.className = ""; } } } };

از IE10 می توانید کلاس ها را از طریق classList مدیریت کنید:

Link.classList.add("current");

و با IE11، ویژگی های داده را می توان از طریق ویژگی مجموعه داده به دست آورد:

Var index = parseInt(a.dataset.slide, 10) + 1;

نمایش اسلاید صفحه‌دار با کنترل‌ها این نمایش‌های اسلاید پیچیدگی‌هایی را برای کد ایجاد می‌کنند - شما باید استفاده از فهرست و هش صفحه را ترکیب کنید. یعنی اسلاید فعلی باید بر اساس موقعیت اشاره گر و اسلاید انتخاب شده از طریق پیوندها انتخاب شود.

این را می توان از طریق شاخص شماره هر پیوند در DOM همگام کرد. یک پیوند - یک اسلاید، بنابراین شاخص های آنها 0، 1، 2 و غیره خواهد بود.

در jQuery کد به این صورت خواهد بود:

(function($) ($.fn.slideshow = function(گزینه‌ها) (گزینه‌ها = $.extend(( //... صفحه‌بندی: ".slider-pagination"، //...)، گزینه‌ها)؛ $. fn.slideshow.index = 0؛ بازگشت this.each(function() ( var $element = $(this)، //... $pagination = $(options.pagination، $element)، $paginationLinks = $(" a"، $pagination)، //... $paginationLinks.on("click", function(e) (e.preventDefault(); var $a = $(this)، elemIndex = $a.index(); // نمایه عددی DOM $.fn.slideshow.index = elemIndex؛ if($.fn.slideshow.index > 0) ($previous.show(); ) else ($previous.hide();) if($. fn.slideshow.index == کل - 1) ( $.fn.slideshow.index = کل - 1؛ $next.hide(); ) else ($next.show(); ) slideTo($.fn.slideshow. index, $element)؛ $a.addClass("current"). siblings().removeClass("current"); )); )); //... ))(jQuery);

بلافاصله می توانید ببینید که نمایان شدن مکان نما تغییر کرده است - ایندکس اکنون به عنوان ویژگی شی نمایش اسلاید اعلام می شود. به این ترتیب از مشکلات محدوده ای که می تواند توسط callback در jQuery ایجاد شود جلوگیری می کنیم. مکان نما اکنون در همه جا در دسترس است، حتی خارج از فضای نام افزونه، زیرا به عنوان یک ویژگی عمومی شیء نمایش اسلاید اعلام شده است.

متد index() شاخص عددی هر پیوند را می دهد.

چنین روشی در JS خالص وجود ندارد، بنابراین استفاده از ویژگی های داده آسان تر است:

اکنون می‌توانیم رویه‌های خود را با مراجع مرتبط کنیم و از ویژگی‌های داده‌ای که ایجاد کردیم استفاده کنیم:

اقدامات: function() ( var self = this; //... for(var i = 0; i< self.navigationLinks.length; ++i) { var a = self.navigationLinks[i]; a.addEventListener("click", function(e) { e.preventDefault(); var n = parseInt(this.getAttribute("data-index"), 10); // Или var n = parseInt(this.dataset.index, 10); self.index = n; if(self.index == 0) { self.index = 0; self.previous.style.display = "none"; } if(self.index >0) (self.previous.style.display = "block"; ) if(self.index == self.total - 1) (self.index = self.total - 1; self.next.style.display = "هیچکدام "; ) else (self.next.style.display = "block"; ) self._slideTo(self.index); self._highlightCurrentLink(this); ) نادرست) ))

درک ابعاد اجازه دهید به قانون CSS زیر برگردیم:

نوار لغزنده (عرض: 9999 پیکسل؛ ارتفاع: 683 پیکسل؛ موقعیت: نسبی؛ انتقال: سمت چپ 500 میلی‌ثانیه خطی؛ )

اگر اسلایدهای زیادی داشته باشیم، ممکن است 9999 کافی نباشد. شما باید اندازه اسلایدها را بر اساس عرض هر اسلاید و تعداد اسلایدها تنظیم کنید.

در jQuery ساده است:

// نمایش اسلاید با عرض کامل this.each(function() ( var $element = $(this), total = $(options.slides).length; //... $(options.slides, $element ).width ($(window).width())؛ $(options.wrapper, $element).width($(window).width() * total); //... ));

عرض پنجره را بگیرید و عرض هر اسلاید را تنظیم کنید. عرض کل لفاف داخلی با ضرب پهنای پنجره و تعداد اسلایدها به دست می آید.

// نمایش اسلاید با عرض ثابت این.each(function() ( var $element = $(this), total = $(options.slides).length؛ //... $(options.wrapper, $element) .width ($(options.slides).eq(0).width() * total); //... ));

در اینجا عرض اولیه به عرض هر اسلاید تنظیم می شود. فقط باید عرض کلی لفاف را تنظیم کنید.

ظرف داخلی اکنون به اندازه کافی پهن است. در JS خالص این کار تقریباً به همین صورت انجام می شود:

// نمایش اسلاید با عرض کامل Slideshow.prototype = ( init: function() ( this.wrapper = this.el.querySelector(."slider-wrapper"); this.slides = this.el.querySelectorAll(".slide "); //... this.total = this.slides.length; this.setDimensions(); this.actions(); ), setDimensions: function() ( var self = this; // Viewport's width var winWidth = پنجره .innerWidth || document.documentElement.clientWidth || document.body.clientWidth؛ var wrapperWidth = winWidth * self.total; for(var i = 0; i< self.total; ++i) { var slide = self.slides[i]; slide.style.width = winWidth + "px"; } self.wrapper.style.width = wrapperWidth + "px"; }, //... }; // Слайд-шоу фиксированной ширины Slideshow.prototype = { init: function() { this.wrapper = this.el.querySelector(".slider-wrapper"); this.slides = this.el.querySelectorAll(".slide"); //... this.total = this.slides.length; this.setDimensions(); this.actions(); }, setDimensions: function() { var self = this; var slideWidth = self.slides.offsetWidth; // Single slide"s width var wrapperWidth = slideWidth * self.total; self.wrapper.style.width = wrapperWidth + "px"; }, //... };

جلوه های محو جلوه های محو اغلب در نمایش های اسلاید استفاده می شود. اسلاید فعلی ناپدید می شود و اسلاید بعدی ظاهر می شود. jQuery دارای متدهای fadeIn() و fadeOut() است که با هر دو ویژگی opacity و display کار می کنند، بنابراین با تکمیل انیمیشن، عنصر از صفحه حذف می شود (display:none).

در JS خالص، بهتر است با ویژگی opacity کار کنید و از پشته موقعیت یابی CSS استفاده کنید. سپس در ابتدا اسلاید قابل مشاهده خواهد بود (تاری: 1) و بقیه پنهان می شوند (تاری: 0).

مجموعه سبک های زیر این روش را نشان می دهد:

لغزنده (عرض: 100%؛ سرریز: پنهان؛ موقعیت: نسبی؛ ارتفاع: 400 پیکسل؛ ) .لغزنده-لغزنده (عرض: 100%؛ ارتفاع: 100%؛ موقعیت: نسبی؛ ) .slide ( موقعیت: مطلق؛ عرض: 100 %؛ ارتفاع: 100%؛ کدورت: 0؛ ) .slider-wrapper > .slide:first-child ( opacity: 1; )

در JS خالص باید انتقال CSS هر اسلاید را ثبت کنید:

اسلاید ( شناور: چپ؛ موقعیت: مطلق؛ عرض: 100٪؛ ارتفاع: 100٪؛ کدورت: 0؛ انتقال: کدورت 500 میلی ثانیه خطی؛ )

با جی کوئری، برای استفاده از متدهای ()fadeIn و ()fadeOut، باید opacity و نمایش را تغییر دهید:

اسلاید ( شناور: چپ؛ موقعیت: مطلق؛ عرض: 100 درصد؛ ارتفاع: 100 درصد؛ نمایشگر: هیچکدام؛ ) .slider-wrapper > .slide:first-child (نمایش: بلوک؛ )

در jQuery کد به صورت زیر است:

(function($) ($.fn.slideshow = function(گزینه‌ها) (گزینه‌ها = $.extend(( wrapper: ".slider-wrapper"، قبلی: ".slider-previous"، بعدی: ".slider-next" , اسلایدها: ".slide"، nav: ".slider-nav"، سرعت: 500، easing: "خطی")، گزینه ها؛ var slideTo = تابع(اسلاید، عنصر) ( var $currentSlide = $(options.slides , element).eq(slide)؛ $currentSlide. animate(( کدورت: 1 )، options.speed، options.easing). خواهر و برادر (options.slides). css("معروفی"، 0); )؛ //. ..); ))(jQuery);

هنگام متحرک سازی opacity، باید مقادیر این ویژگی را برای اسلایدهای باقی مانده نیز تغییر دهید.

در جاوا اسکریپت این خواهد بود:

Slideshow.prototype = ( //... _slideTo: تابع(اسلاید) ( var currentSlide = this.slides; currentSlide.style.opacity = 1; for(var i = 0; i< this.slides.length; i++) { var slide = this.slides[i]; if(slide !== currentSlide) { slide.style.opacity = 0; } } }, //... };

عناصر رسانه: ویدئو ما می توانیم ویدئو را در یک نمایش اسلاید قرار دهیم. در اینجا یک نمونه از یک نمایش اسلاید ویدیویی از Vimeo آمده است:

ویدئوها از طریق iframe گنجانده شده است. این همان بلوک درون خطی قابل تعویض مانند تصویر است. قابل تعویض – زیرا محتوا از منبع خارجی گرفته شده است.

برای ایجاد یک نمایش اسلاید تمام صفحه، باید استایل ها را به صورت زیر تغییر دهید:

Html، بدنه (حاشیه: 0؛ بالشتک: 0؛ ارتفاع: 100%؛ حداقل ارتفاع: 100%؛ /* ارتفاع باید کل صفحه باشد */ ) لغزنده (عرض: 100%؛ سرریز: پنهان؛ ارتفاع: 100 ٪؛ حداقل ارتفاع: 100٪؛ /* ارتفاع و عرض تا کامل */ موقعیت: مطلق؛ /* موقعیت مطلق */ ) .slider-wrapper (عرض: 100٪؛ ارتفاع: 100٪؛ /* ارتفاع و عرض به کامل */ موقعیت: نسبی؛) .slide ( شناور: چپ؛ موقعیت: مطلق؛ عرض: 100%؛ ارتفاع: 100٪؛ ) .iframe اسلاید (نمایش: بلوک؛ /* عنصر بلوک */ موقعیت: مطلق؛ /* موقعیت یابی مطلق */ عرض: 100%؛ ارتفاع: 100%؛ /* ارتفاع و عرض کامل */ )

نمایش اسلاید خودکار نمایش اسلاید خودکار از تایمر استفاده می کند. هر بار که تابع تایمر setInterval() به عقب فراخوانی می شود، مکان نما 1 افزایش می یابد و بنابراین اسلاید بعدی انتخاب می شود.

وقتی مکان نما به حداکثر تعداد اسلایدها رسید، باید بازنشانی شود.

نمایش اسلایدهای بی پایان به سرعت برای کاربران خسته کننده می شود. بهترین کار این است که انیمیشن را زمانی که کاربر روی آن می‌چرخد متوقف کنید و وقتی مکان‌نما دور شد، آن را از سر بگیرید.

(function($) ($.fn.slideshow = function(گزینه ها) (گزینه = $.extend(( اسلایدها: ".slide"، سرعت: 3000، easing: "خطی")، گزینه ها)؛ var timer = null. // تایمر var index = 0؛ // مکان نما var slideTo = تابع(اسلاید، عنصر) ( var $currentSlide = $(options.slides, element).eq(slide)؛ $currentSlide.stop(true, true). متحرک (( کدورت : 1 )، options.speed، options.easing). خواهر و برادر (options.slides). css("معروفی"، 0); var autoSlide = تابع(عنصر) (// راه اندازی تایمر توالی = setInterval (function() ( index++; // مکان نما را 1 افزایش دهید if(index == $(options.slides, element).length) ( index = 0; // Reset the cursor ) slideTo(index, element); ), options.speed)؛ // همان فاصله زمانی که در method.animate())؛ var startStop = function(element) ( element.hover(function() ( // توقف انیمیشن clearInterval(timer)؛ timer = null. ), function () ( autoSlide(element); // Resume animation )); )؛ return this.each(function() ( var $element = $(this); autoSlide($element); startStop($element); ))؛ ) ))(jQuery);

هر دو پارامتر متد .stop() روی true تنظیم می شوند، زیرا ما نیازی به ایجاد یک صف انیمیشن از دنباله خود نداریم.

در JS خالص، کد ساده تر می شود. ما یک انتقال CSS برای هر اسلاید با مدت زمان مشخصی ثبت می کنیم:

اسلاید ( انتقال: کدورت 3 ثانیه خطی؛ /* 3 ثانیه = 3000 میلی ثانیه */ )

و کد به شکل زیر خواهد بود:

پیمایش صفحه‌کلید نمایش‌های اسلاید پیشرفته، ناوبری صفحه‌کلید را ارائه می‌دهند، یعنی. با فشار دادن کلیدها در میان اسلایدها حرکت کنید. برای ما، این به سادگی به این معنی است که باید مدیریت رویداد فشار کلید را ثبت کنیم.

برای این کار به ویژگی keyCode شی رویداد دسترسی خواهیم داشت. کد کلید فشرده شده (لیست کدها) را برمی گرداند.

رویدادهایی که به دکمه‌های «قبلی» و «بعدی» متصل کردیم، اکنون می‌توانند به کلیدهای «چپ» و «راست» متصل شوند. جی کوئری:

$("body").on("keydown", function(e) ( var code = e.keyCode; if(code == 39) ( // فلش چپ $next.trigger("click"); ) if( کد == 37) ( // پیکان راست $previous.trigger("click"); ) ));

در JS خالص، به جای روش ساده .trigger()، باید از dispatchEvent():

Document.body.addEventListener("keydown", function(e) ( var code = e.keyCode; var evt = new MouseEvent("click"); // کلیک ماوس if(code == 39) ( // فلش چپ خود .next.dispatchEvent(evt); ) if(code == 37) ( // فلش سمت راست self.previous.dispatchEvent(evt); ) ), false);

در پروژه های مناسب انجام این کار مرسوم نیست. ما باید عملکردی را تعریف کنیم که در یک متد عمومی فلیپ کردن را فراهم می کند، و سپس با کلیک روی دکمه، آن را فراخوانی کنیم. سپس اگر بخش دیگری از برنامه نیاز به پیاده سازی این قابلیت داشت، نیازی به شبیه سازی رویدادهای DOM نخواهد بود، بلکه به سادگی می توان این متد را فراخوانی کرد.

پاسخ به تماس ها خوب است که بتوانید کدی را به هر عمل نمایش اسلایدی که هنگام انجام آن عمل اجرا می شود، پیوست کنید. این هدف توابع پاسخ به تماس است - آنها فقط زمانی اجرا می شوند که یک عمل خاص رخ دهد. فرض کنید نمایش اسلاید ما زیرنویس دارد و به طور پیش فرض پنهان هستند. در زمان انیمیشن، ما باید یک عنوان برای اسلاید فعلی نشان دهیم یا حتی کاری با آن انجام دهیم.

در jQuery می توانید یک callback مانند این ایجاد کنید:

(function($) ($.fn.slideshow = function(گزینه‌ها) (گزینه‌ها = $.extend(( //... callback: function() ())، گزینه‌ها؛ var slideTo = تابع (اسلاید، عنصر) ( var $currentSlide = $(options.slides, element).eq(slide)؛ $currentSlide. animate(( opacity: 1 ), options.speed, options.easing, // Callback for the slide options.callback($ currentSlide)). خواهر و برادر (گزینه‌ها. اسلایدها).

در این مورد، callback تابعی از .animate() است که اسلاید جاری را به عنوان آرگومان می گیرد. در اینجا نحوه استفاده از آن آورده شده است:

$(function() ($("#main-slider").slideshow(( callback: function(slide) ( var $wrapper = slide.parent(); // عنوان فعلی را نشان می دهد و بقیه $wrapper.find را پنهان می کند (" .slide-caption").hide(); slide.find(".slide-caption").show("slow"); ) )); ));

در JS خالص:

(تابع = ( init: function() ( //... this.slides = this.el.querySelectorAll(."slide"); //... //...), _slideTo: تابع(اسلاید) ( var self = این؛ var currentSlide = self.slides؛ currentSlide.style.opacity = 1؛ for(var i = 0؛ i< self.slides.length; i++) { var slide = self.slides[i]; if(slide !== currentSlide) { slide.style.opacity = 0; } } setTimeout(self.callback(currentSlide), 500); // Вызывает функцию по окончанию перехода } }; // })();

تابع callback به عنوان دومین پارامتر سازنده تعریف می شود. می توانید از آن به این صورت استفاده کنید:

Document.addEventListener("DOMContentLoaded", function() ( var slider = new Slideshow("#main-slider", function(slide) ( var wrapper = slide.parentNode; // عنوان فعلی را نشان می دهد و بقیه را پنهان می کند var allSlides = wrapper. querySelectorAll(".slide"); var caption = slide.querySelector(".slide-caption"); caption.classList.add("visible"); for(var i = 0; i< allSlides.length; ++i) { var sld = allSlides[i]; var cpt = sld.querySelector(".slide-caption"); if(sld !== slide) { cpt.classList.remove("visible"); } } }); });

APIهای خارجی تاکنون سناریوی کاری ما ساده است: همه اسلایدها از قبل در سند هستند. اگر نیاز به وارد کردن داده‌ها از خارج (یوتیوب، ویمئو، فلیکر) در آن داشته باشیم، باید اسلایدها را به محض دریافت محتوای خارجی پر کنیم.

از آنجایی که پاسخ سرور شخص ثالث ممکن است فوری نباشد، باید یک انیمیشن بارگیری را وارد کنید تا نشان دهید که فرآیند در حال انجام است:

قبلی بعدی

این می تواند یک گیف یا یک انیمیشن CSS خالص باشد:

#اسپینر (شعاع حاشیه: 50%؛ حاشیه: 2px جامد #000؛ ارتفاع: 80 پیکسل؛ عرض: 80 پیکسل؛ موقعیت: مطلق؛ بالا: 50%؛ سمت چپ: 50%؛ حاشیه: -40px 0 0 -40px؛ ) # spinner:after ( محتوا: ""؛ موقعیت: مطلق؛ پس‌زمینه رنگ: #000؛ بالا: 2 پیکسل؛ سمت چپ: 48%؛ ارتفاع: 38 پیکسل؛ عرض: 2 پیکسل؛ مرز-شعاع: 5 پیکسل؛ -webkit-transform-origin: 50% 97%؛ مبدا تبدیل: 50% 97%؛ -webkit-animation: angular 1s linear infinite؛ انیمیشن: angular 1s linear infinite؛ ) @-webkit-keyframes زاویه ای ( 0%(-webkit-transform:rotate(0deg )) 100%(-webkit-transform:rotate(360deg);) ) @keyframes زاویه ای ( 0%(transform:rotate(0deg);) 100%(transform:rotate(360deg);) ) #spinner:before ( محتوا: ""؛ موقعیت: مطلق؛ رنگ پس‌زمینه: #000؛ بالا: 6 پیکسل؛ سمت چپ: 48 درصد؛ ارتفاع: 35 پیکسل؛ عرض: 2 پیکسل؛ شعاع حاشیه: 5 پیکسل؛ -webkit-transform-origin: 50% 94% ؛ مبدا تبدیل: 50% 94%؛ -webkit-animation: ptangular 6s linear infinite؛ انیمیشن: ptangular 6s linear infinite؛ ) @-webkit-keyframes چهارگوش (0%(-webkit-transform:rotate(0deg)) 10 %(-webkit-transform:rotate(360deg);) ) @keyframes چهار گوش ( 0%(transform:rotate(0deg);) 100%(transform:rotate(360deg)) )

مراحل به این صورت خواهد بود:
- درخواست داده از خارج
- مخفی کردن بوت لودر
- تجزیه و تحلیل داده ها
- ساخت HTML
- نمایش اسلاید شو
- نمایش اسلایدها را پردازش کنید

فرض کنید جدیدترین ویدیوهای یک کاربر را از YouTube انتخاب می کنیم. جی کوئری:

(function($) ($.fn.slideshow = function(گزینه‌ها) (گزینه‌ها = $.extend(( wrapper: ".slider-wrapper", //... loader: "#spinner"، //... محدودیت: 5، نام کاربری: "learncodeacademy")، گزینه ها)؛ //... var getVideos = function() (// دریافت ویدیوها از YouTube var ytURL = "https://gdata.youtube.com/feeds/api/ videos?alt=json&author=" + options.username + "&max-results=" + options.limit; $.getJSON(ytURL, function(videos) (// دریافت ویدیو به عنوان یک شی JSON $(options.loader). hide(); // پنهان کردن بارگذار var entries = videos.feed.entry; var html = ""; for(var i = 0; i< entries.length; ++i) { // Разбираем данные и строим строку HTML var entry = entries[i]; var idURL = entry.id.$t; var idVideo = idURL.replace("http://gdata.youtube.com/feeds/api/videos/", ""); var ytEmbedURL = "https://www.youtube.com/embed/" + idVideo + "?rel=0&showinfo=0&controls=0"; html += ""; html += ""; html += ""; } $(options.wrapper).html(html); // Выведем слайд-шоу }); }; return this.each(function() { //... getVideos(); // Обрабатываем слайд-шоу }); }; })(jQuery);

در جاوا اسکریپت خالص یک مرحله اضافی وجود دارد - ایجاد روشی برای دریافت JSON:

سپس مراحل مشابه هستند:

(function() ( تابع نمایش اسلاید(عنصر) ( this.el = document.querySelector(element); this.init(); ) Slideshow.prototype = ( init: function() ( this.wrapper = this.el.querySelector ".slider-wrapper"); this.loader = this.el.querySelector("#spinner"); //... this.limit = 5; this.username = "learncodeacademy"; this.actions(); ) , _getJSON: function(url, callback) ( callback = callback || function(); var request = new XMLHttpRequest(); request.open("GET", url, true); request.send(null); request .onreadystatechange = function() ( if (request.status == 200 && request.readyState == 4) ( var data = JSON.parse(request.responseText); // JSON object back callback(data); ) other ( console. log( request.status); ) )); //... getVideos: function() ( var self = this; // دریافت ویدیوی YouTube var ytURL = "https://gdata.youtube.com/feeds/api /videos ?alt=json&author=" + self.username + "&max-results=" + self.limit; self._getJSON(ytURL, function(videos) (// دریافت ویدیو به عنوان شیء JSON var entries = videos.feed.entry ; var html = ""; self.loader.style.display = "هیچ"; // پنهان کردن لودر برای (var i = 0; i< entries.length; ++i) { // Разбираем данные и строим строку HTML var entry = entries[i]; var idURL = entry.id.$t; var idVideo = idURL.replace("http://gdata.youtube.com/feeds/api/videos/", ""); var ytEmbedURL = "https://www.youtube.com/embed/" + idVideo + "?rel=0&showinfo=0&controls=0"; html += ""; html += ""; html += ""; } self.wrapper.innerHTML = html; // Выводим слайд-шоу }); }, actions: function() { var self = this; self.getVideos(); // Обрабатываем слайд-шоу } }; })(); Добавить метки

اگر اسلایدها فقط حاوی تصاویر هستند، می توانید ساختار را کمی تغییر دهید:

قبلی بعدی

فراموش نکنید که یک مقدار معنی دار به ویژگی alt اضافه کنید.

برای استفاده از پیوندهای صفحه، می توانید موارد زیر را انجام دهید:

... ... ... 1 2 3

قبلی بعدی 1 2 3

CSS بیایید با ساختار زیر شروع کنیم:

قبلی بعدی

سبک های لفاف داخلی عبارتند از:

اسلاید ( شناور: چپ؛ موقعیت: نسبی؛ عرض: 1024 پیکسل؛ ارتفاع: 683 پیکسل؛ )

هنگام استفاده از پیوندهای صفحه به جای دکمه ها، می توانید سبک های زیر را ایجاد کنید:

این کلاس ها به صورت پویا از روی اسکریپت اختصاص داده می شوند.

همراه با اشاره گر، از متد .eq() jQuery برای دریافت اسلاید فعلی استفاده می کنیم. در JS خالص به این صورت است:

هیچ متد animate() در JS معمولی وجود ندارد، بنابراین از انتقال CSS استفاده می کنیم:

نوار لغزنده (موقعیت: نسبی؛ // انتقال مورد نیاز: چپ 500 میلی ثانیه خطی؛ )

اکنون می توانید ویژگی سمت چپ را به صورت پویا از طریق شی style تغییر دهید:

و در JS خالص به این صورت است:

از IE10 می توانید کلاس ها را از طریق classList مدیریت کنید:

Link.classList.add("current");

و با IE11، ویژگی های داده را می توان از طریق ویژگی مجموعه داده به دست آورد:

Var index = parseInt(a.dataset.slide, 10) + 1;

در jQuery کد به این صورت خواهد بود:

متد index() شاخص عددی هر پیوند را می دهد.

چنین روشی در JS خالص وجود ندارد، بنابراین استفاده از ویژگی های داده آسان تر است:

اکنون می‌توانیم رویه‌های خود را با مراجع مرتبط کنیم و از ویژگی‌های داده‌ای که ایجاد کردیم استفاده کنیم:

درک ابعاد اجازه دهید به قانون CSS زیر برگردیم:

نوار لغزنده (عرض: 9999 پیکسل؛ ارتفاع: 683 پیکسل؛ موقعیت: نسبی؛ انتقال: سمت چپ 500 میلی‌ثانیه خطی؛ )

در jQuery ساده است:

در اینجا عرض اولیه به عرض هر اسلاید تنظیم می شود. فقط باید عرض کلی لفاف را تنظیم کنید.

ظرف داخلی اکنون به اندازه کافی پهن است. در JS خالص این کار تقریباً به همین صورت انجام می شود:

مجموعه سبک های زیر این روش را نشان می دهد:

در JS خالص باید انتقال CSS هر اسلاید را ثبت کنید:

اسلاید ( شناور: چپ؛ موقعیت: مطلق؛ عرض: 100٪؛ ارتفاع: 100٪؛ کدورت: 0؛ انتقال: کدورت 500 میلی ثانیه خطی؛ )

با جی کوئری، برای استفاده از متدهای ()fadeIn و ()fadeOut، باید opacity و نمایش را تغییر دهید:

در jQuery کد به صورت زیر است:

هنگام متحرک سازی opacity، باید مقادیر این ویژگی را برای اسلایدهای باقی مانده نیز تغییر دهید.

در جاوا اسکریپت این خواهد بود:

برای ایجاد یک نمایش اسلاید تمام صفحه، باید استایل ها را به صورت زیر تغییر دهید:

وقتی مکان نما به حداکثر تعداد اسلایدها رسید، باید بازنشانی شود.

هر دو پارامتر متد .stop() روی true تنظیم می شوند، زیرا ما نیازی به ایجاد یک صف انیمیشن از دنباله خود نداریم.

در JS خالص، کد ساده تر می شود. ما یک انتقال CSS برای هر اسلاید با مدت زمان مشخصی ثبت می کنیم:

اسلاید ( انتقال: کدورت 3 ثانیه خطی؛ /* 3 ثانیه = 3000 میلی ثانیه */ )

و کد به شکل زیر خواهد بود:

برای این کار به ویژگی keyCode شی رویداد دسترسی خواهیم داشت. کد کلید فشرده شده (لیست کدها) را برمی گرداند.

$("body").on("keydown", function(e) ( var code = e.keyCode; if(code == 39) ( // فلش چپ $next.trigger("click"); ) if( کد == 37) ( // پیکان راست $previous.trigger("click"); ) ));

در JS خالص، به جای روش ساده .trigger()، باید از dispatchEvent():

در jQuery می توانید یک callback مانند این ایجاد کنید:

در JS خالص:

تابع callback به عنوان دومین پارامتر سازنده تعریف می شود. می توانید از آن به این صورت استفاده کنید:

قبلی بعدی

این می تواند یک گیف یا یک انیمیشن CSS خالص باشد:

فرض کنید جدیدترین ویدیوهای یک کاربر را از YouTube انتخاب می کنیم. جی کوئری:

در جاوا اسکریپت خالص یک مرحله اضافی وجود دارد - ایجاد روشی برای دریافت JSON:

سپس مراحل مشابه هستند:

1. نمایش اسلاید جی کوئری عالی

یک نمایش اسلاید بزرگ و دیدنی با استفاده از فناوری های جی کوئری.

2. پلاگین جی کوئری “Scale Carousel”

نمایش اسلاید مقیاس پذیر با استفاده از jQuery. شما می توانید اندازه های نمایش اسلاید را تنظیم کنید که به بهترین وجه برای شما مناسب است.

3. پلاگین جی کوئری “slideJS”

نوار لغزنده تصویر با توضیحات متنی.

4. پلاگین "JSliderNews" 5. نوار لغزنده CSS3 jQuery

هنگامی که ماوس را روی فلش های پیمایش نگه می دارید، یک تصویر کوچک دایره ای از اسلاید بعدی ظاهر می شود.

6. نوار لغزنده زیبای jQuery "Presentation Cycle".

نوار لغزنده جی کوئری با نشانگر بارگذاری تصویر. تغییر خودکار اسلاید ارائه شده است.

7. پلاگین جی کوئری "Parallax Slider"

نوار لغزنده با جلوه پس زمینه حجمی. نکته برجسته این اسلایدر حرکت پس زمینه است که از چندین لایه تشکیل شده است که هر کدام با سرعت متفاوتی اسکرول می شوند. نتیجه تقلید از اثر حجمی است. خیلی زیبا به نظر می رسد، خودتان می توانید ببینید. این افکت در مرورگرهایی مانند اپرا، گوگل کروم، اینترنت اکسپلورر راحت تر نمایش داده می شود.

8. نوار لغزنده جدید و سبک جی کوئری "bxSlider 3.0"

در صفحه نمایشی در بخش «نمونه‌ها» می‌توانید پیوندهایی به تمام استفاده‌های ممکن از این افزونه پیدا کنید.

9. نوار لغزنده تصویر جی کوئری، پلاگین “slideJS”.

یک نوار لغزنده شیک jQuery مطمئناً می تواند پروژه شما را تزئین کند.

10. پلاگین نمایش اسلاید جی کوئری "Easy Slides" نسخه 1.1

یک پلاگین jQuery آسان برای ایجاد نمایش اسلاید.

11. پلاگین jQuery Slidy

پلاگین سبک جی کوئری در نسخه های مختلف. تغییر خودکار اسلاید ارائه شده است.

12. گالری jQuery CSS با تغییر خودکار اسلاید

اگر بازدیدکننده در مدت زمان معینی روی فلش های «به جلو» یا «بازگشت» کلیک نکند، گالری به طور خودکار شروع به پیمایش می کند.

13. نوار لغزنده jQuery "Nivo Slider"

پلاگین بسیار حرفه ای، با کیفیت، سبک و با کد معتبر. بسیاری از افکت های انتقال اسلاید مختلف در دسترس هستند.

14. نوار لغزنده جی کوئری "MobilySlider"

نوار لغزنده تازه. نوار لغزنده جی کوئری با افکت های مختلف تغییر تصویر.

15. پلاگین jQuery "Slider²"

نوار لغزنده سبک وزن با تعویض کشویی اتوماتیک.

16. نوار لغزنده جاوا اسکریپت تازه

نوار لغزنده با تغییر خودکار تصویر.

پلاگین برای اجرای نمایش اسلاید با تغییر خودکار اسلاید. امکان کنترل صفحه نمایش با استفاده از ریز عکسها وجود دارد.

نوار لغزنده تصویر jQuery CSS با استفاده از پلاگین NivoSlider.

19. نوار لغزنده جی کوئری "jShowOff"

پلاگین برای چرخش محتوا. سه گزینه برای استفاده: بدون ناوبری (با تغییر خودکار در قالب نمایش اسلاید)، با ناوبری در قالب دکمه، با ناوبری به شکل ریز عکسها.

20. افزونه “Shutter Effect Portfolio”.

افزونه تازه جی کوئری برای طراحی نمونه کار عکاس. گالری اثر جالبی در تغییر تصاویر دارد. عکس‌ها با جلوه‌ای مشابه عملکرد شاتر لنز، یکدیگر را دنبال می‌کنند.

21. نوار لغزنده سبک جاوا اسکریپت CSS "TinySlider 2"

پیاده سازی اسلایدر تصویر با استفاده از جاوا اسکریپت و CSS.

22. لغزنده عالی "Tinycircleslider"

نوار لغزنده گرد شیک. انتقال بین تصاویر با کشیدن نوار لغزنده به شکل یک دایره قرمز در اطراف محیط انجام می شود. اگر از عناصر گرد در طراحی خود استفاده کنید، کاملاً در وب سایت شما قرار می گیرد.

23. نوار لغزنده تصویر با جی کوئری

نوار لغزنده سبک وزن "Slider Kit". اسلایدر در طرح های مختلف عمودی و افقی موجود است. انواع مختلفی از پیمایش بین تصاویر نیز اجرا می شود: با استفاده از دکمه های "به جلو" و "بازگشت"، با استفاده از چرخ ماوس، با استفاده از کلیک ماوس بر روی اسلاید.

24. گالری با مینیاتور "Slider Kit"

گالری "Slider Kit". پیمایش ریز عکسها هم به صورت عمودی و هم به صورت افقی انجام می شود. انتقال بین تصاویر با استفاده از: چرخ ماوس، کلیک ماوس یا نگه داشتن مکان نما بر روی تصویر کوچک انجام می شود.

25. نوار لغزنده محتوای jQuery "Slider Kit"

نوار لغزنده محتوای عمودی و افقی با استفاده از jQuery.

26. نمایش اسلاید جی کوئری “Slider Kit”

نمایش اسلاید با تغییر خودکار اسلاید.

27. نوار لغزنده حرفه ای جاوا اسکریپت CSS3 سبک وزن

یک نوار لغزنده jQuery و CSS3 که در سال 2011 ایجاد شد.

نمایش اسلاید جی کوئری با ریز عکسها.

29. نمایش اسلاید ساده جی کوئری

نمایش اسلاید با دکمه های ناوبری.

30. نمایش اسلاید عالی جی کوئری "Skitter".

پلاگین jQuery Skitter برای ایجاد نمایش اسلاید خیره کننده. این افزونه از 22 (!) نوع جلوه های مختلف انیمیشن هنگام تغییر تصاویر پشتیبانی می کند. می تواند با دو گزینه پیمایش اسلاید کار کند: استفاده از اعداد اسلاید و استفاده از تصاویر کوچک. حتماً نسخه ی نمایشی را تماشا کنید، یک پیدا با کیفیت بسیار بالا. فن آوری های مورد استفاده: CSS، HTML، jQuery، PHP.

31. نمایش اسلاید "ناجور"

نمایش اسلاید عملکردی اسلایدها می توانند عبارتند از: تصاویر ساده، تصاویر با شرح، تصاویر با راهنمای ابزار، فیلم ها. می‌توانید از فلش‌ها، پیوندهای شماره اسلاید و کلیدهای چپ/راست روی صفحه‌کلید خود برای پیمایش استفاده کنید. نمایش اسلاید در چندین نسخه ارائه می شود: با و بدون ریز عکسها. برای مشاهده همه گزینه ها، پیوندهای نسخه ی نمایشی #1 - نسخه ی نمایشی #6 را که در بالای صفحه نمایشی قرار دارد، دنبال کنید.

طراحی بسیار اصلی برای نوار لغزنده تصویر، یادآور یک فن. انتقال اسلاید متحرک. پیمایش بین تصاویر با استفاده از فلش ها انجام می شود. همچنین یک تعویض خودکار وجود دارد که می تواند با استفاده از دکمه پخش/مکث واقع در بالا روشن و خاموش شود.

اسلایدر متحرک jQuery. هنگامی که اندازه پنجره مرورگر تغییر می کند، تصاویر پس زمینه به طور خودکار مقیاس می شوند. برای هر تصویر، یک بلوک با توضیحات ظاهر می شود.

34. نوار لغزنده "Flux Slider" با استفاده از jQuery و CSS3

نوار لغزنده جدید جی کوئری. چندین افکت متحرک جالب هنگام تغییر اسلایدها.

35. پلاگین جی کوئری “jSwitch”

گالری متحرک جی کوئری.

یک نمایش اسلاید آسان جی کوئری با تغییر خودکار اسلاید.

37. نسخه جدید افزونه “SlideDeck 1.2.2”

اسلایدر محتوای حرفه ای گزینه هایی با تغییر اسلاید خودکار و همچنین گزینه ای با استفاده از چرخ ماوس برای حرکت بین اسلایدها وجود دارد.

38. نوار لغزنده جی کوئری "Sudo Slider"

نوار لغزنده تصویر سبک با استفاده از jQuery. گزینه های پیاده سازی زیادی وجود دارد: تغییر افقی و عمودی تصاویر، با و بدون پیوند به شماره اسلاید، با و بدون شرح تصویر، افکت های مختلف تغییر تصویر. یک عملکرد تغییر خودکار اسلاید وجود دارد. پیوندهای تمام نمونه های پیاده سازی را می توان در صفحه نمایشی یافت.

39. نمایش اسلاید جی کوئری CSS3

نمایش اسلاید با ریز عکسها از حالت تغییر خودکار اسلاید پشتیبانی می کند.

40. نوار لغزنده jQuery "Flux Slider"

نوار لغزنده با بسیاری از جلوه های تغییر تصویر.

41. نوار لغزنده ساده جی کوئری

نوار لغزنده تصویر شیک با استفاده از jQuery.

سلام به همه. کورواکس با شماست. امروز به شما نشان خواهم داد که چقدر آسان است که یک نوار لغزنده گالری عکس جغد با استفاده از جاوا اسکریپت خالص ایجاد کنید. بیا شروع کنیم.

ابتدا باید یک ساختار پروژه ایجاد کنیم. در اینجا یک مثال است:

طرح بندی HTML

در فایل index.html باید ساختار زیر را ایجاد کنید.

سبک‌های CSS #gallery( عرض: 400 پیکسل؛ تراز نوشتاری: مرکز؛ حاشیه: 0 خودکار؛ ) .photo( موقعیت: نسبی؛ ارتفاع: 300 پیکسل؛ ) .photo img( عرض: 100%؛ موقعیت: مطلق؛ کدورت: 0؛ سمت چپ: 0؛ انتقال: کدورت 1 ثانیه؛ .عکس img.shown( کدورت: 1; ) .tabs(تراز متن: مرکز؛ بالشتک: 20 پیکسل؛ )

نکته اصلی که در اینجا ارزش توجه به آن را دارد این است که همه تصاویر را به صورت پیش فرض شفاف می کنیم (opacity: 0). و به کلاس نشان داده شده، ویژگی opacity را اضافه می کنیم: 1.

JS var btn_prev = document.querySelector(".tabs .prev")، btn_next = document.querySelector(".tabs .next"); var images = document.querySelectorAll(.photo img"); var i = 0; btn_prev.onclick = function())( images[i].className = ""; i = i - 1; if(i = images.length)( i = 0; ) images[i].className = "نشان داده شده"; ) ؛

اینجا جالب ترین قسمت است. ابتدا، دو دکمه را که رویدادهای کلیک و مجموعه‌ای از عکس‌ها (btn_prev، btn_next، تصاویر) را روی آن‌ها ضمیمه می‌کنیم، مقداردهی اولیه می‌کنیم. پس از مقداردهی اولیه، یک رویداد onclick روی دکمه ها می اندازیم که در نوار لغزنده ما حرکت می کند.

images[i].className = ""; در اینجا کلاس نشان داده شده را با کلیک کردن روی آن از تمام تصاویر حذف می کنیم.

i ++ (—) در اینجا با هر کلیک شناسه اسلاید را تغییر می دهیم

if(i > = images.length)(i = 0; ) (شرط کلیک بر روی دکمه "forward") ما به این شرط نیاز داریم تا بررسی کنیم که آخرین اسلاید چه زمانی انتخاب شده است. اگر یک اسلاید بزرگتر از اسلاید قبلی انتخاب کرده باشیم، آنگاه 0 را به نشانگر اختصاص می دهیم (که به طور خودکار ما را در ابتدای مجموعه قرار می دهد).

اگر من< 0){ i = images.length — 1; } (условие по клику на кнопку «назад») здесь если индификатор картники меньше 0 то индификатор будет равен последнему слайду -1 (т.к. массив у нас начинается с 0)

images[i].className = "نشان داده شده"; در اینجا کلاس نشان داده شده را به اسلاید فعال فعلی اضافه می کنیم.

نتیجه

امروز ما با استفاده از JS بومی اسلایدر خود را ساختیم. می توانید کد منبع را دریافت کنید. کورواکس با شما بود. در توسعه خود موفق باشید!