ایجاد یک اسلاید شوی زیبا

ایجاد یک اسلایدر از عکس های خود بدون کمک پلاگین 

چرا باید بخواهیم خود یک اسلایدر بسازیم در حالیکه هزاران اسلایدر آماده روی وب هست. راستش را بخواهید وقتی به مشکلی بر بخورید ویرایش کدهایی که دیگران نوشته اند بسیار سخت تر خواهد بود.
گام 1: اچ تی ام ال خود را ایجاد کنید.
ما برای اسلاید خود به یک سری عکس نیاز داریم و یک لیست از نوع Ul

<ul>
<li><img src="image1.jpg" /></li>
<li><img src="image2.jpg" /></li>
<li><img src="image3.jpg" /></li>
<li><img src="image4.jpg" /></li>
<li><img src="image6.jpg" /></li>
</ul>

این کد ها باعث می شود مرورگر عکس های ما را از بالا به پایین نمایش دهد.
کد های زیر را درست بالای تگ بسته Head قرار دهید.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
$(window).load (function() {
var theImage = $('ul li img');
var theWidth = theImage.width()
//wrap into mother div
$('ul').wrap('<div id="mother" />');
//assign height width and overflow hidden to mother
$('#mother').css({
width: function() {
return theWidth;
},
height: function() {
return theImage.height();
},
position: 'relative',
overflow: 'hidden'
});
//get total of image sizes and set as width for ul
var totalWidth = theImage.length * theWidth;
$('ul').css({
width: function(){
return totalWidth;
}
});

});//doc ready

</script>

 ما در اولین تگ به کتابخانه jquery به صورت آنلاین متصل خواهیم شد. و سپس سراغ رخداد window.load() و همانطور که فکر میکنید رخداد document.ready() زیرا یک مشکل با طول و یا عرض تصویر ممکن است رخ دهد .سپس ما چند متغییر را برای عکس های موجود در لیست قرار می دهیم و از فانکشن .wrap() استفاده می کنیم و آنها را درون یک Div که mother نامیده می شود قرار می دهیم در باره قواعد css بعدا صحبت خواهیم کرد.

گام سوم : درج دکمه Next و Previous
در درون کد HTML ما تگی با کلاس next برای جلو بردن اسلاید و کلاس previous برای عقب بردن اسلاید درون ایتم های لیست اضافه خواهیم کرد.

<ul>
<li><img src="image1.jpg" /><a class="next" href="#">next</a></li>
<li><img src="image2.jpg" /><a class="next" href="#">next</a><a class="previous" href="#">prev</a></li>
<li><img src="image3.jpg" /><a class="next" href="#">next</a><a class="previous" href="#">prev</a></li>
<li><img src="image4.jpg" /><a class="next" href="#">next</a><a class="previous" href="#">prev</a></li>
<li><img src="image6.jpg" /><a class="previous" href="#">prev</a><a class="startover" href="#">startover</a></li>
</ul>

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

گام 3: .Animate()Method جذاب
اینجا قسمتی است که یک مقدار حرکت خواهیم دید. کاری که قصد داریم انجام دهیم امکان کلیک کردن روی Next و در نتیجه کمی به جلو رفتن اسلاید و امکان کلیک کردن روی previous و کمی عقب رفتن اسلایدر است.

کد های جاوا اسکریپت زیر را در ادامه کد جاوای قبلی اضافه کنید :

<script>
$(theImage).each(
function(intIndex){
$(this).nextAll('a')
.bind("click", function(){
if($(this).is(".next")) {
$(this).parent('li').parent('ul').animate({
"margin-left": (-(intIndex + 1) * theWidth)
}, 1000)
} else if($(this).is(".previous")){
$(this).parent('li').parent('ul').animate({
"margin-left": (-(intIndex - 1) * theWidth)
}, 1000)
} else if($(this).is(".startover")){
$(this).parent('li').parent('ul').animate({
"margin-left": (0)
}, 1000)
}
});//close .bind()
});//close .each()
</script>

توضیح کد بالا با فانکشن each شروع می شود که باعث می شود حلقه از تک تک عکس های ما در لیست عبور کند سپس آنها را برای داشتن کلاس next توسط .nextall چک می کند.اگر کلاس Next باشد انیمیشن حرکت به چپ را به کمک Css ایجاد می کند. و در کلاس startover انیمیشن به عکس پایانی رسیده و از اول نمایش را آغاز خواهد کرد.
با اضافه کردن کد های CSS در داخل تگ head شما لینک ها را خواهید دید و می توانید آنها را تست کنید.

<style>
*{padding:0; margin:0;}
ul {}
ul li {
float:left;
list-style:none;
position:relative;
}
ul li a.next {
position:absolute;
left:100px;
}
ul li a.previous{
position:absolute;
left:0px;
}
ul li a.startover{
position:absolute;
left:200px;
}
</style>

گام4 : زیبا سازی اسلاید.
از لحاض تکنینکی اسلاید ما همینجا به پایان رسیده است.این بخش آن را زیبا و قابل ارائه می کند . عکس های زیر را جدا گانه به صورت png ذخیره کنید.

شما می توانید دکمه ها را به هر تگ جدا گانه نسبت دهید و همچنین با CSS به آنها موقعیت مکانی دهید و یا با ایدی به آنها امکان اتصال جدا به تگ ها و یا یک کلاس اضافه بدهید . در زیر کدهای من را می بینید که فقط بابت مثال است شما می توانید طور دیگری عمل کنید.

<style>
*{
padding:0;
margin:0;
}
ul li {
float:left;
list-style:none;
position:relative;
}
ul li a{
text-indent:-9999px;
outline:none;
}
ul li a.next {
position:absolute;
left:100px;
}
ul li a.previous{
position:absolute;
left:0px;
}
ul li a.startover{
position:absolute;
left:200px;
}
/*styled*/
div#container{
border:1px solid #666666;
-moz-border-radius:6px;
-webkit-border-radius:6px;
padding:13px;
clear:both;
overflow:hidden;
width:620px;
position:relative;
top:35px;
margin:0 auto;
background:#ebebeb;
-moz-box-shadow: 0px 45px 33px -32px #000;
-webkit-box-shadow: 0px 45px 33px -32px #000;
box-shadow: 0px 45px 33px -32px #000;
display:block;
}
ul li a.next.red{
background:url(images/next-red.png);
width:57px;
height:73px;
position:absolute;
left:560px;
top:237px;
}
ul li a.next.green{
background:url(images/next-green.png);
width:67px;
height:67px;
position:absolute;
top:286px;
left:486px;
}
ul li a.previous.green{
background:url(images/prev-green.png);
width:67px;
height:67px;
position:absolute;
top:286px;
left:105px;
}
ul li a.next.orange{
background:url(images/next-orange.png);
width:239px;
height:62px;
position:absolute;
left:360px;
top:300px;
}
ul li a.previous.orange{
background:url(images/prev-orange.png);
width:239px; height:62px;
position:absolute;
left:20px;
top:300px;
}
ul li a.next.blue{
background:url(images/next-blue.png);
width:57px;
height:129px;
position:absolute;
top:150px;
left:562px;
}
ul li a.previous.blue{
background:url(images/prev-blue.png);
width:58px;
height:129px;
position:absolute;
top:150px;
}
ul li a.previous.silver{
background:url(images/previous-silver.png);
width:49px;
height:50px;
position:absolute;
top:305px;
left:360px;
}
ul li a.startover {
background:url(images/startover.png);
width:176px;
height:73px;
position:absolute;
top:280px;
left:420px;
}
</style>