بروزرسانی در ۱۳۹۷/۰۱/۲۵ : افزودن قابلیت pause به اسلایدر
در این آموزش, فصد داریم به شما نحوه ساخت اسلایدر عکس با jQuery را نشان بدیم. در آموزش jQuery قبلی , یک نمونه از ساخت اسلایدشو با جی کوئری را دیدیم.
در این مثال , ما از کتابخانه jQuery UI برای ساخت اسلایدر تصویر بهره می بریم. که افکت های جالبی برای slide کردن تصاویر در اختیار ما قرار می دهد.
کد HTML نمایش عکس های اسلایدر
این کد به شما تصاویر اضافه شده به پنجره slider را نشان می دهد.
|
1 2 3 4 5 6 |
<div id="slider-div"> <img class="img-slide" src="1.jpg"> <img class="img-slide" src="2.jpg"> <img class="img-slide" src="3.jpg"> <img class="img-slide" src="4.jpg"> </div> |
افکت ساخت اسلایدر عکس با jQuery
کد jQuery زیر از کتابخانه jQuery UI برا افزودن افکت slide به تصاویر استفاده می کند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
$.fn.startSlider = function(){ var simgderDIV=this; var img=simgderDIV.find(".img-slide"); simgderDIV.css({overflow:"auto"}); img.css({position:'absolute'}); img.hide().first().show().addClass("active"); var iterateTickerElement = function() { setInterval(function(){ var next = $(".img-slide.active").next(); $(".img-slide.active").hide("slide",{direction:'left'},2000); $(".img-slide.active").removeClass("active"); if(next.length == 0) next = $(".img-slide").first(); next.addClass("active"); next.show("slide",{direction:'right'},1000); },2000); } iterateTickerElement(); } |
و کد زیر بعد از آماده سازی DOM فراخوانی می شود .
|
1 |
$("#slider-div").startSlider(); |
ساخت اسلایدر عکس با jQuery با قابلیت ایست (pause)
برای استفاده از قابلیت ایست در اسلایدری که ساختیم می توانید به جای اسکریپت بالا از کد زیر استفاده کنید. کد دقیقا مشابه کد بالا است بجز اینکه یک قسمت برای pause کردن اسلایدر تصویر را اضافه کردیم برای همین نیازی به تغییر کد HTML نیست.
به اینصورت که بعد از نگه داشتن ماوس روی یکی از اسلایدها (hover) متغییر pause مقدار true را به خود میگیرد که در یک شرط تعریف کردیم تا کد اجرای اسلایدر در صورتی که مقدار pause = true باشد اجرا نشود.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
$.fn.startSlider = function(){ var sliderDIV=this; var img=sliderDIV.find(".img-slide"); sliderDIV.css({overflow:"auto"}); img.css({position:'absolute'}); img.hide().first().show().addClass("active"); var pause = false; var iterateTickerElement = function() { setInterval(function(){ if(!pause) { var next = $(".img-slide.active").next(); $(".img-slide.active").hide("slide",{direction:'left'},2000); $(".img-slide.active").removeClass("active"); if(next.length == 0) next = $(".img-slide").first(); next.addClass("active"); next.show("slide",{direction:'right'},1000); } },2000); } sliderDIV.hover( function(){ pause=true; }, function(){ pause=false; }); iterateTickerElement(); } |
امیدوارم از آموزش ساخت اسلایدر عکس با jQuery نهایت استفاده را برده باشید .
برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق و پیروز باشید.
سلام این اسلاید شو دمو نداره؟
سلام. خیر به سادگی راه اندازی و نتیجه رو ببینید
سلام دمو نداره؟