سلام؛ من یه اسلاید شو ساده را از اموزشهای یه سایت انگلیسی زبان ساختم که مدتهاست دنبالش بودم
اما هنوز یه ایراد کوچولو داره و اونهم اینه که بعد از رسیدن به اخرین عکس برمیگرده به اول یعنی بصورت بک اسلاید میشه و اگر عکسها از سمت راست به چپ اسلاید میشوند وقتی به اخرین عکس میرسه تمام عکسها در کسری از ثانیه از چپ به راست برمیگردند. نمونه کد کوئری رو میزارم و ممنون میشم منو در این زمینه راهنمایی کنید که چطور کاری کنم با رسیدن به اخرین عکس به همون روش از سمت راست به چپ دوباره برگرده به عکس اول نه تمام عکسها رو از چپ به راست برگردونه ؟
اسکریپت فراخوانده شده :
< script src = "http://code.jquery.com/jquery-latest.js" ></ script >
کوئری نوشته شده :
<script type = "text/javascript" >
$(document).ready(function () {
slideShow();
});
var n = 0;
function slideShow() {
id = n % 5 + 1;
leftpost = (1 - parseInt(id)) * 500 + "px";
$("div.slider-item").animate({ left: leftpost }, 1500);
n = n + 1;
s = setTimeout("slideShow()", 3000);
}
</ script >
فایل css :
<style type = "text/css" >
div#slider {
width: 500px;
height: 300px;
margin: auto;
overflow: hidden;
border: 10px solid gray;
}
div#slider-mask {
width: 500%;
height: 100%;
}
div.slider-item {
width: 20%;
height: 100%;
position: relative;
float: left;
}
</ style >
فایل html :
< div id = "slider" > < div id = "slider-mask" >
< div class = "slider-item" >< img src = "img1.jpg" alt = "1" /></ div >
< div class = "slider-item" >< img src = "img2.jpg" alt = "2" /></ div >
< div class = "slider-item" >< img src = "img3.jpg" alt = "3" /></ div >
< div class = "slider-item" >< img src = "img4.jpg" alt = "4" /></ div >
< div class = "slider-item" >< img src = "img5.jpg" alt = "5" /></ div >
</ div > </ div >