آموزش ساخت اسلایدر عکس

[css-man]

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

[mohamad_torabi]

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

[H:Shojaei]

واقعا با اين تاپيكايي كه تو اين چند هفته جاري زده شده واقعا لازمه.
مطمئن باشيد مفيد هم هست.
ميدونم اسپم دادم ولي گفتم دلگرمي بهتون بدم.

[css-man]

یکم وقتم اجازه نمیده ولی چون الان حرف زدم استارت این کار رو هم میزنم که تاپیک الکی ایجاد نکرده باشم

معمولا من تمام کارهامو فولدر بندی میکنم به این شکل

107749

مهم ترین بخش نظم داشتم تو کاره

برای یه این کار من 3 تا عکس آماده کردم
برای خوداسلایدر
به 2 تا دکمه next و previos هم نیاز داریم که الان دانلود کردم

[css-man]

ساختاری که ما برای بخش html نیاز داریم به شکل زیر هست

که با یه دانش ابتدایی در مورد html متوجه میشید
اگر سوالی بود بپرسید تا توضیح بدم





<div id="container">
<div id="slideshow">

<a href="#left" id="left"></a>
<a href="#right" id="right"></a>
<div id="images">
<ul>
<li><img src="" alt="" /></li>
<li><img src="" alt="" /></li>
<li><img src="" alt="" /></li>
<li><img src="" alt="" /></li>
</ul>
</div>
</div>

</div>

[css-man]

خوب بعد از این که فایل html رو ساختیم نیاز داریم که یک فایل جی کوئری رو دانلود و به صفحه لینک کنیم
و یک فایل هم برای نوشتن کدهای جی کوئری خودمون باید ایجاد کنیم که هر دو تو فولدر js قرار میگیرن



<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>



اینجوری هم لینک میشن به صفحه

در ادامه استایل صفحه رو درست میکنیم و اگر وقت بشه همین امشب این مبحث رو می بندیم

[css-man]

این هم کدهای css چیز خاصی نداره ولی اگر نیاز به توضیح بود بگید تا توضیح بدم



**
{
margin:0;
padding:0;
border:none;
}
#container
{
position:relative;
margin:100px auto 0 auto;
background-color:#69F;
width:960px;
height:400px;
}
#slideshow
{
position:relative;
margin:auto;
width:960px;
height:300px;
}
#slideshow #images
{
position:relative;
overflow-x:scroll;
overflow-y:hidden;

}
#images ul
{
width:2880px;
list-style-type:none;
}
#images ul li
{
float:left;
}
#slideshow a
{
position:absolute;
width:48px;
height:48px;
z-index:10;
top:45%;
display:none;
float:left;
}
#slideshow .left
{
background-image:url(../images/arrow-left-icon.png);
margin-left:10px;
}
#slideshow .right
{
background-image:url(../images/arrow-right-icon.png);
right:10px;
}

[css-man]

این عکس نمای کلی پروژه تا اینجا اگر طرحتون به اینت شکل در نیومده و مشکل داره بگید تا رفع اشکال کنیم


107753


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

[tamafi6]

انشاا.كه روش آموزشي شماباعث استارت خوردن عده اي ازدوستان بشه كه فقط داخل تالارتايپك هاي كم محتواواسپم ميگزارن وباعث ضعف اين تالارشدن.
موفق باشيد

[css-man]

شما لطف داری دوست عزیز

[css-man]

var i=0;

$("#images").css("overflow-x","hidden");
$("#images").scrollLeft(0);
$("#slideshow a").css("display","block");
$("#slideshow a").css("opacity","0.0");



خط اول متغیری تعریف میکنی که بعدها برای اینکه بدونیم کدوم عکس بایدنمایش داده بشه یا اسکرول چقدر بره جلو کاربرد داره
خط دوم overflow مقدارش مخفی میشه یعنی اگر چیزی اندازش بیشتر از اون بخش بود و بیرون زد دیگه دیده نشه

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

[css-man]

خوب بخش بعدی اینه که کاری کنیم تا در زمانی مشخص عکسها بصورت اسلایدی حرکت کنن
برای اینکار از تابعی به نام setinterval()
در جی کوئری استفاده میکنیم که در واقع عملی خواص رو در زمانی مشخص تکرار میکنه



window.setInterval(function(){
if(i >= 2)

i = -1;
i++

$("#images").animate({scrollLeft: i*960},800);
}, 3000);


$("#slideshow").mouseenter(function(){
$("#slideshow a").animate({opacity: 1.0},200);



});

[css-man]

در تابع بالا متغیر I مقدارش چک میشه اگر بزرگتر از تعداد عکسها بود که در این مثال 3 تا هست مقدارش -1 میشه و بعد یکی بهش اضافه میشه مقدار بدست اومده در سایز عکس (width) ضرب میشه و به همون مقدار اسکرول به جلو حرکت میکنه

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

بعد از این تابع نوشتیم که زمانی که موس روی تسلکتور slideshow رفت تگ a داخلش ظاهر بشه

[css-man]

و اما انتهای این داستان



$("#slideshow").mouseleave(function(){
$("#slideshow a").animate({opacity: 0.0},300);

});

$("#slideshow .right").click(function(){
window.clearInterval();
if(i>=2)

i = -1;


i++;
$("#images").animate({scrollLeft: i*960},500);

});
$("#slideshow .left").click(function(){
window.clearInterval();

if(i<=0)

i = 4;

i--;
$("#images").animate({scrollLeft: i*960},500);


});





تابع mouseleave برای زمانی هست که موس از روی عنصر مورد نظر ما کنار میره و در این مثال فلشهای ما محو میشن

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

window.clearInterval(); این بخش از کد باعث میشه تداخلی بین اسلاید اتومایک و عمل کلیک ما پیش نیاد ,


برای دکمه سمت راست هم که دقیقا همین اتفاق افتاده فقط با کمی تغییر که مقدار ها کم میشن و.. که در کد مشخصه


امیدوارم این آموزش بدرد دوستان بخوره من هم این آموزش رو از دوستی یاد گرفتم که اسمش تو خاطرم نیست
اگر خوب بود و یاد گرفتید امیدوارم شما م به اشتراک بگذارید تا همه بتونن پیشرفت بهتری در کارشون داشته باشن

[r4hgozar]

سلام.
اموزش کامل و تصویری این در cgtv.ir هست.
موفق باشید

[css-man]

بله عرض کردم که من هم قبلا از جائی یاد گرفتم

موفق باشید

[هزاره سوم]

اندازه عکس ها تاثیر داره ؟یعنی همه باید هم اندازه باشن؟
آخه من کد های شما رو دقیقا کپی پیست کردم و عکس هام رو توش گذاشتم
ولی اصلا شبیه اسلایدر نشد :ناراحت:
سه تا عکس پشت سر هم شد
عکس اول
پایینش عکس دوم
پایین اون عکس بعدی
انگار 3تا عکس رو به صورت معمولی پشت سر هم بزاری :ناراحت:

[refugee]

هزاره سوم فکر کنم overflow:hidden بذارید . که تصاویر نشان داده نشود .

اقای css-man کاش یه دمو هم اخرش میذاشتین .

و در نهایت تشکر :قلب:

[css-man]

اندازه عکس ها تاثیر داره ؟یعنی همه باید هم اندازه باشن؟
آخه من کد های شما رو دقیقا کپی پیست کردم و عکس هام رو توش گذاشتم
ولی اصلا شبیه اسلایدر نشد :ناراحت:
سه تا عکس پشت سر هم شد
عکس اول
پایینش عکس دوم
پایین اون عکس بعدی
انگار 3تا عکس رو به صورت معمولی پشت سر هم بزاری :ناراحت:

برای اینکه عکسها کنار هم قرار بگیرن باید از float استفاده کنی
سایزها رو باید مساوی در نظر بگیری

سایز ul رو باید به اندازه مجموعه عرض همه عکسهات قرار بدی

[css-man]

چشم حتما این کار رو هم انجام میدم

[mehrab125]

چشم حتما این کار رو هم انجام میدم
سلام ببخشید ولی من هیچی از طرز کد نویسیتون نفهمیدم
می شه یه توضیحی بدید که بدنیم چی به چی شد کدوم id برای کدوم شد

[soltoonmosi]

سلام. داداش تقریبا 80 پیکسل از عکس قبلی وقتی اسکرول میشه گوشه اسلایدر (کتار عکس جدید) باقی میمونه. چکارش باید بکنم؟

[keeper92]

فایل های جی کوئری کجان؟

[elena]

var i=0;

$("#images").css("overflow-x","hidden");
$("#images").scrollLeft(0);
$("#slideshow a").css("display","block");
$("#slideshow a").css("opacity","0.0");



خط اول متغیری تعریف میکنی که بعدها برای اینکه بدونیم کدوم عکس بایدنمایش داده بشه یا اسکرول چقدر بره جلو کاربرد داره
خط دوم overflow مقدارش مخفی میشه یعنی اگر چیزی اندازش بیشتر از اون بخش بود و بیرون زد دیگه دیده نشه

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

[refugee]

ببخشید این کدهارو دقیقا کجا باید وارد کنم،مبتدی هستم دیگه اگه توضیح بدین خیلی خوب میشه ،مرسی

تو پوشه js داخل این پوشه یک فایل است به نام script.js اونجا وارد میکنید البته بقیشم باید وارد کنید . اینا رو :



var i=0;

$("#images").css("overflow-x","hidden");
$("#images").scrollLeft(0);
$("#slideshow a").css("display","block");
$("#slideshow a").css("opacity","0.0");

window.setInterval(function(){
if(i >= 2)

i = -1;
i++

$("#images").animate({scrollLeft: i*960},800);
}, 3000);


$("#slideshow").mouseenter(function(){
$("#slideshow a").animate({opacity: 1.0},200);



});

$("#slideshow").mouseleave(function(){
$("#slideshow a").animate({opacity: 0.0},300);

});

$("#slideshow .right").click(function(){
window.clearInterval();
if(i>=2)

i = -1;


i++;
$("#images").animate({scrollLeft: i*960},500);

});
$("#slideshow .left").click(function(){
window.clearInterval();

if(i<=0)

i = 4;

i--;
$("#images").animate({scrollLeft: i*960},500);


});