در این مقاله ما یک اسلایدر زیبا را بطور کامل توضیح داده کد های آن را برای دانلود قرار داده و نتیجه نهایی را بصورت یک صفحه مستقل وب برای شما نمایش میدهیم.
در این آموزش ضمن کد نویسی یک اسلایدر ساده از عکس و متن در جی کوئری، کد باز آن را هم برای دانلود و استفاده قرار میدهیم . یادتان باشد که این آموزش فقط ایده اولیه را به شما میدهد و شما باید با خلاقیت خود ایده های جدیدی را به آن اضافه کنید. روز به روز اسلایدر ها حرفه ای تر و جذاب تر میشوند، بنابراین به یک اسلایدر ساده قانع نباشید.
در انتهای این آموزش سایتی شبیه عکس زیر بدست خواهیم آورد:
روی لینک کدهای آماده اسلایدر کلیک کنید تا فایل های کد و عکس را دانلود کنید.برای مشاهده فایل نهایی روی فایل Final دبل کلیک کنید. ما عکس ها و کد ها را بصورت متن باز برای شما قرار داده ایم.
ایجاد فانکشن های جی کوئری
با HTML5 ما اسلایدرهایی بر پایه Canvas را که حاوی انیمیشن های پرکار هستند را زیاد میبینیم. ولی حقیقت این است که اینکار چندان از نظر سئو کار درستی نیست . بهتر است که اسلایدر شما از عناصر ساده تر HTML مثل یک تگ Div برای نگهداری اطلاعات هر اسلایدر استفاده کند. تا درصورت عدم پشتیبانی مرورگر از جی کوئری عکس ها بدرستی نمایش داده شوند.
ما در اینجا یک اسلایدر ساده با تگ Div رو آموزش خواهیم داد. تگ Div را ایجاد به آن یک ID=”#slideshow” میدهیم این تگ بعنوان یک کانتینر برای اسلاید شو عمل می کند. داخل این تگ یک تگ Div دیگر ایجاد کنید و به آن ID=”#slideContainer” را بدهید این تگ اسلاید ها را برای ما نگه می دارد. داخل این تگ یک Div دیگر ایجاد کرده ایم که class=”slide” را به خود گرفته و محتوای اسلاید ها درون آن قرار دارد.
کد های اولیه برای HTML:
<!-- Slideshow HTML -->
<div id="slideshow">
<div id="slidesContainer">
<div class="slide">
<!-- Content for slide 1 goes here -->
</div>
<div class="slide">
<!-- Content for slide 2 goes here. -->
</div>
<div class="slide">
<!-- Content for slide 3 goes here. -->
</div>
<div class="slide">
<!-- Content for slide 4 goes here. -->
</div>
</div>
</div>
<!-- Slideshow HTML -->
استایل دهی به اسلاید شو
گام بعدی داشتن یک استایل زیبا برای اسلاید ها است.
ما در فایل استایل به #slidesContainer ویژگی overflow=auto میدهیم. به این ترتیب اسکرول تنها در صورتی که محتوای ما بزرگ تر از ارتفاع تصویر که 236px است را وجود خواهد داشت.
در زیر کد های #slidesContainer را مشاهده می کنید.
ما در فایل استایل خود به کلاس .slide عرضی برابر با 20 پیکسل کمتر میدهیم تا از نمایش اسکرول سمت راست در زمان غیر فعال بودن جاوا بهره بگیریم.
کد های .slide
#slideshow #slidesContainer .slide {
margin:0 auto;
width:540px; /* reduce by 20 pixels to avoid horizontal scroll */
height:263px;
}
تا اینجای کار حتی بدون جاوا اسکریپت کابران می توانند عکس ها را اسکرول کرده و همگی را ببینند اینکار برای حالت موبایل بسیار مناسب است.
اگر میخواهید بجای اسکرول عمودی اسکرول افقی داشته باشید کافیست که به .slide ویژگی float:left; بدهید.
پیکان های چپ و راست در CSS
ما کد های فلش را در جی کوئری خواهیم نوشت ولی در فایل CSS آنها را استایل دهی می کنیم.
ما در جی کوئری از تگ Span برای ایجاد فلش های چپ و راست استفاده خواهیم کرد. اگر میخواهید با کلیک کردن روی فلشها تغییری در فلش ها داده شود کافیست که از text-indent استفاده کنید.
کد های استایل شیت برای کنترلر های اسلاید:
/**
* Slideshow controls style rules.
*/
.control {
display:block;
width:39px;
height:263px;
text-indent:-10000px;
position:absolute;
cursor: pointer;
}
#leftControl {
top:0;
left:0;
background:transparent url(img/control_left.jpg"/>) no-repeat 0 0;
}
#rightControl {
top:0;
right:0;
background:transparent url(img/control_right.jpg"/>) no-repeat 0 0;
}
قسمت جاوا اسکریپت
کتابخانه جی کوئری را با کلیک روی لینک آن دانلود کنید. به این ترتیب اسلایدر خود را جذاب تو خواهیم کرد.
تئوری کد برنامه نویسی اسلایدر
اولین کار این است که ما اسکرول باری که در CSS ایجاد کرده ایم حذف کنیم. این اسکرول بار با #slidesContainer در CSS تعریف شده است. برای حذف اسکرول بار میتوانید .slide را تغییر سایز داده و عرض آن رابه 560px میرسانیم. حالا باید عکس ها در چپ و راست هم قرار داشته باشند .
با استفاده از DOM یک تگ Div با ID=”slideInner” که تمام تگ های Slides را در بر گرفته و عرضی برابر با کل تگ های .slide داشته باشد.
در آخر ، ما کنترلر های چپ و راست را اضافه می کنم ، این کنترلرها توسط جی کوئری اضافه خواهند شد.
در زیر کدهای جاوا اسکریپت را درج کرده ایم
$(document).ready(function(){
var currentPosition = 0;
var slideWidth = 560;
var slides = $('.slide');
var numberOfSlides = slides.length;
// Remove scrollbar in JS
$('#slidesContainer').css('overflow', 'hidden');
// Wrap all .slides with #slideInner div
slides
.wrapAll('<div id="slideInner"></div>')
// Float left to display horizontally, readjust .slides width
.css({
'float' : 'left',
'width' : slideWidth
});
// Set #slideInner width equal to total width of all slides
$('#slideInner').css('width', slideWidth * numberOfSlides);
// Insert left and right arrow controls in the DOM
$('#slideshow')
.prepend('<span class="control" id="leftControl">Move left</span>')
.append('<span class="control" id="rightControl">Move right</span>');
// Hide left arrow control on first load
manageControls(currentPosition);
// Create event listeners for .controls clicks
$('.control')
.bind('click', function(){
// Determine new position
currentPosition = ($(this).attr('id')=='rightControl')
? currentPosition+1 : currentPosition-1;
// Hide / show controls
manageControls(currentPosition);
// Move slideInner using margin-left
$('#slideInner').animate({
'marginLeft' : slideWidth*(-currentPosition)
});
});
// manageControls: Hides and shows controls depending on currentPosition
function manageControls(position){
// Hide left arrow if position is first slide
if(position==0){ $('#leftControl').hide() }
else{ $('#leftControl').show() }
// Hide right arrow if position is last slide
if(position==numberOfSlides-1){ $('#rightControl').hide() }
else{ $('#rightControl').show() }
}
});
توضیح کد های بالا:
ایجاد چند شیئ
در خطوط اول ما چند متغییر را تعریف کرده ایم. متغییر currentPosition موقعیت فعلی اسلاید شو را مشخص می کند. Slidewidth عرض هر اسلاید را مشخص می کند. که برابر با عدد 560px است. ما شیئی برای انتخاب تگ های .Slide هم تعریف کرده ایم. این تگ کد های ما را زیباتر خواهد کرد.
در آخر ، ما با متغییر length تعداد اسلاید ها را مشخص می کنیم.
به این ترتیب متغییر های مابصورت زیر خواهند بود:
var currentPosition = 0;
var slideWidth = 560;
var slides = $('.slide');
var numberOfSlides = slides.length;
حذف اسکرول بار
اگر اسکریپت اجرا شود با استفاده از ویژگی overflow در تگ slidesContainer میتوانیم اسکرول بار را مخفی کنیم.
کد زیر اینکار را برای ما انجام میدهد:
$('#slidesContainer').css('overflow', 'hidden');
درج DIV با کمک DOM
ما از ویژگی Margin برای انتقال به چپ و راست اسلاید ها استفاده خواهیم کرد. برای اینکار باید تمام تگ های .slide درون یک Div قرار بگیرند. برای اینکار از دستور زیر استفاده کرده ایم.
slides
.wrapAll('<div id="slideInner"></div>')
ما همچنین باید عرض #slideInner را که در بالا ایجاد کرده ایم با عرض مجموع .slide ها برابر کنیم. برای اینکار از دستور زیر استفاده می کنیم.
$('#slideInner').css('width', slideWidth * numberOfSlides);
استایل دهی به اسلاید شو در جاوا اسکریپت
با فعال شدن جاوااسکریپت ، ما میخواهیم که اسلاید ها در چپ و راست هم قرار بگیریند. ما همچنین میخواهیم که عرض آنها 560px باشد.
به کد زیر نگاه کنید این اتفاق در این کد ها رخ داده است.
slides
.css('overflow', 'hidden')
.wrapAll('<div id="slideInner"></div>')
درج کنترلر در DOM
برای درج کنترلرها از قواعد DOM استفاده می کنیم. برای ایجاد این کنترلر ها از دستورات .prepend() و .append() استفاده می کنیم. این متد متن های HTML را به شئی انتخاب شده یا همان #Slideshow اضافه می کند. متن درون Span اهمیتی ندارد. زیرا به نمایش در نخواهد آمد:
$('#slideshow')
.prepend('<span class="control" id="leftControl">Moves left</span>')
.append('<span class="control" id="rightControl">Moves right</span>');
مدیریت کنترلر های چپ و راست با یک عملگر
برای مدیریت کنترلر ها ، ما یک عملگر به نام manageControls ایجاد کرده ایم. این عملگر کنترلرها را مخفی و ظاهر می کند. اینکار براساس موقعیت فعلی اسلایدشو رخ میدهد.
اگر اسلاید شو روی اولین اسلاید باشد ، ما کنترل سمت چپ را مخفی می کنیم. در اسلاید آخر هم ما کنترلر سمت راست را مخفی می کنیم. زیرا کاربر به اسلاید آخر رسیده است. اینکار با متد های .hide() و .show() رخ میدهد .
عملگر manageControls() را در کد های زیر مشاهده می کنید:
function manageControls(position){
// position==0 is first slide
if(position==0) { $('#leftControl').hide(); }
else { $('#leftControl').show(); }
// numberOfSlides-1 is last slides
if(position==numberOfSlides-1) { $('#rightControl').hide(); }
else { $('#rightControl').show(); }
}
عملگر manageControls() :
وقتیکه اولین اسکریپت شما بارگذاری شد، ما باید عملگر manageControls() را فراخوانی کنیم. فراخوانی آن باید بر اساس آروگمان currentPosition باشد.
فراخوانی متد manageControls() بر اساس رخداد های اسکریپت :
manageControls(currentPosition);
اتصال رخداد کلیک به کنترلرها
در اینگام ما با جی کوئری به کنترلرهای چپ و راست امکان کلیک شدن را اضافه می کنیم.
کد کلیک به کلاس .control بصورت زیر خواهد بود:
$('.control').bind('click', function(){
// do something when user clicks
});
بروز کردن مقدار currentPosition :
وقتیکه کاربر روی یک کنترل کلیک می کند. ما مقدار متغییر currentPosition را بروز رسانی می کنیم. اگر کاربر روی فلش سمت راست کلیک کرد که ID=”rightcontrol” است. حالا به مقدار currentPosition یک رقم اضافه می کنیم تا به موقعیت فعلی اسلایدر برسیم. به همین ترتیب برای کلیک روی فلش سمت چپ یکی از مقدار currentPosition کم خواهیم کرد.
در کد زیر ما مقدار currentPosition را تنظیم کرده ایم.
currentPosition = ($(this).attr('id')=='rightControl')
? currentPosition+1 : currentPosition-1;
فراخوانی manageControls() بعد از بروز رسانی currentPosition
بعد از اینکه ما مقدار currentPosition را تنظیم کردیم. متد manageControls() را مجدد برای مخفی کردن یا نمایش کنترلر ها فراخوانی می کنیم.
فراخوانی manageControls() داخل متد .bind :
manageControls(currentPosition);
متحرک کردن اسلایدرها
در آخر ، ما #slideInner را به چپ و راست حرکت میدهیم ، اینکار با margin-left انجام میشود. برای مثال اگر ما به اسلاید سه برویم left margin=-1120px میشود.
از متد .animate برای انتقال margin-left استفاده می کنیم:
$('#slideInner').animate({
'marginLeft' : slideWidth*(-currentPosition)
});
ما در این آموزش سعی کردیم که اسلایدری بسازیم که بدون CSS و جاوا اسکریپت هم ظاهر درستی داشته باشد.
براي بهره مندي از مشاوره تخصصي در زمینه طراحی سایت در کرج با شرکت سارگون تماس بگيريد