PDA

View Full Version : اسلاید شوی ساده بنویسیم



shadii
یک شنبه 19 آبان 1392, 23:41 عصر
سلام
من این اسلایدشو رو نوشتم البته فقط با دکمه ی قبل و بعد:

$d = jQuery.noConflict();
$d(function () {
$d('#next').click(function () { $d('#slidshow').animate({ 'margin-left': '-=150px' }, 500); });
$d('#prev').click(function () { $d('#slidshow').animate({ 'margin-left': '+=150px' }, 500); });
});
*{margin:0;padding:0}
#content{width:150px;height:120px;margin:0;overflo w:hidden;}
#slidshow{width:621px;margin:0;height:120px;}
#slidshow img{margin:0}
#next{width:100px}
<div id="content" >
<div id="slidshow">
<img src="pic/1.jpg" />
<img src="pic/2.jpg" />
<img src="pic/3.jpg" />
<img src="pic/4.jpg" />
</div>
</div>
<div id="next">next</div>
<div id="prev">prev</div>
کارش به این صورته که با زدن دکمه ی بعدی عرض عکس رو به margin left اضافه می کنه
الان من از کجا بفهمم که تعداد عکس ها تموم شده و باید دوباره از اول بیاد

jalil_gh
دوشنبه 20 آبان 1392, 17:32 عصر
شما میتونید یه شمارنده بزارید و اونو کم و زیاد کنید.
$d = jQuery.noConflict();
$d(function () {
var index = 0,
len = $d('#slidshow img').length;

$d('#next').click(function () {
if (++index < len) {
$d('#slidshow').animate({ 'margin-left': '-=150px' }, 500);
} else {
index = 0;
$d('#slidshow').animate({ 'margin-left': 0 }, 500);
}
});

$d('#prev').click(function () {

if (--index >= 0) {
$d('#slidshow').animate({ 'margin-left': '+=150px' }, 500);
} else {
index = len - 1;
$d('#slidshow').animate({ 'margin-left': "-=" + index * 150 }, 500);
}
});
});

shadii
چهارشنبه 22 آبان 1392, 14:22 عصر
تابع خودش تعداد عکس ها رو حساب می کنه؟

jalil_gh
چهارشنبه 22 آبان 1392, 18:10 عصر
تابع خودش تعداد عکس ها رو حساب می کنه؟
بله. شما میتونید کدها رو بررسی کنید زیاد نیست.
اون len تعداد عکس‌هاست.