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 اضافه می کنه
الان من از کجا بفهمم که تعداد عکس ها تموم شده و باید دوباره از اول بیاد
من این اسلایدشو رو نوشتم البته فقط با دکمه ی قبل و بعد:
$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 اضافه می کنه
الان من از کجا بفهمم که تعداد عکس ها تموم شده و باید دوباره از اول بیاد