اموزش ساده و روان ساختن یک اسلاید شو برای وبسایت
در این آموزش به جزئیات اشاره نکردم و افراد مبتدی درصورتی که با کدها آشنایی ندارند میتوانند فقط از فایل آماده استفاده کنند . این آموزش مختصر می باشد و برای افرادی که با کدهای HTML و CSS آشنایی دارند نوشته شده است .
برای نوشتن کدهای مربوط به اسلایدشو ابتدا فایل آماده رو دانلود کنید . یک فایل جاوا با نام contentslider.js داخل فایل ریپ قرار دارد .
دانلود فایل با حجم 148 کیلوبایت
http://www.dl.iranhex.com/zip/Iranhex_jQuery_Slideshow%20[IRANHEX.com].zip
در پوشه ای که قصد ایجاد کدهای مربوط به اسلایدشو را دارید فایل contentslider.js را کپی کنید و یک پوشه جدید با نام img برای قرار دادن تصاویر بسازید . سپس با یک ادیتور مناسب کدهای زیر را در آن بنویسید . . . . .
در ادامه مطلب با ما همراه باشید . . . .
منبع : www.Iranhex.com
<html>
<head><title>IRANHEX-Slider</title></head>
<style type="text/css">
.sliderwrapper{
background:#f6f6f6;
position:relative;
overflow:hidden;
width:950px;
height:307px;
border-bottom:0;}
.sliderwrapper .contentdiv{
visibility:hidden;
left:0;
top:0;
padding:0px;
background:#f6f6f6;
width:950px;
height:307px;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity:1;
opacity:1;
margin:0;}
.pagination{
width:935px;
text-align:left;
padding:0px 10px;
font-size:9pt;
background:#f6f6f6;
border-bottom:1px solid #f6f6f6;
border-top:1px solid #f6f6f6;
direction:ltr;
height:18px;}
.pagination a{
padding:0px 5px;
text-decoration:none;
color:#000;
background-color:#f6f6f6;
font-family:Arial;
font-weight:bold;}
.pagination a.selected{color:#666;background-color:#f6f6f6;}
.pagination a:hover{color:#f6f6f6;background-color:#555;}
</style>
تا اینجا کدهای CSS مربوط به اسلایدر را نوشتیم . حالا باید فایل جاوا را فراخوانی کنیم . به صورت زیر :
<script type="text/javascript" src="contentslider.js"></script>
خوب . کدهای مربوط به بدنه اسلایدشو رو هم اضافه می کنیم :
<center>
<div style="background-image: url(slide-bg.jpg); width: 950px; height: 287px; padding-top:0px;">
<div id="slider1">
<div>
<a id="ctl04_rpt1_ctl01_hyp1" href="http://www.iranhex.com/" target="_blank">
<img width="980" height="317" id="ctl04_rpt1_ctl01_img1" src="img/1.jpg" style="border-width:0px;" />
</a>
</div>
<div>
<a id="ctl04_rpt2_ctl02_hyp2" href="http://www.iranhex.com/">
<img width="980" height="317" id="ctl04_rpt1_ctl01_img1" src="img/2.jpg" style="border-width:0px;" />
</a>
</div>
<div>
<a id="ctl04_rpt3_ctl03_hyp3" href="http://www.iranhex.com/" target="_blank">
<img width="980" height="317" id="ctl04_rpt1_ctl01_img1" src="img/3.jpg" style="border-width:0px;" />
</a>
</div>
</div>
این اسلایدشو دارای یک بخش شماره تصاویر می باشد که باید کد آن را هم اضافه کنیم .
<div id="paginate-slider1">
</div>
کدهای مربوط به بدنه اسلایدر به پایان رسید . تنها قسمت باقی ماننده نوشتن کدهای جاوا برای تعریف عملکرد اسلایدر است که به صورت زیر نوشته می شوند :
<script type="text/javascript">
featuredcontentslider.init({
id: "slider1",
contentsource: ["inline", ""],
toc: "#increment",
nextprev: ["", ""],
revealtype: "click",
enablefade: [true, 0.050],
autorotate: [true, 3500],
onChange: function(previndex, curindex){
}
})
</script>
با تغییر مقدار enablefade میتوانید سرعت Fade شدن تصاویر و با تغییر مقدار autorotate سرعت تغییر تصاویر را تعیین کنید . در پایان هم تگ های آخر را می بندیم .
</div>
</center>
</html>
دانلود فایل با حجم 148 کیلوبایت
http://www.dl.iranhex.com/zip/Iranhex_jQuery_Slideshow%20[IRANHEX.com].zip
پسورد و منبع : www.Iranhex.com
|
