مبتدی: مشکل با زمان بندی اسلایدر [بایگانی]

leilaaa

یک شنبه 05 بهمن 1393, 18:11 عصر

من می خوام اسلایدری بنویسم که علاوه بر اینکه خودش به طور خودکار هر 10 ثانیه تصویرش عوض می شه کاربرم بتونه با دکمه قبل و بعد تصویر عوض کنه.
ولی مشکل با این کدی که نوشتم اینه که اگر از تعویض خود کار عکس 6 ثانیه گذشته باشه و کاربر ناگهان دکمه بعدی رو بزنه تصویر بعدی فقط 4 ثانیه نمایش داده می شه ! (4+6=10)
در واقع با زدن دکمه بعدی تایمر 0 نمی شه !
لطفا بگین چه تغییری باید توی این کد بدم

<html><head>
<style type="text/css">
body{
margin:0px;
padding:0px;
}

#slideshow {
position: relative;
width: 100%;
height: 80%;
top:20%;
margin: 0px auto;
}

.slide{
position:relative;
margin:0px auto;
width:100%;
height:100%;
overflow:hidden;
}
.slide img{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
}

.next, .prev {
position: absolute;
cursor: pointer;
top: 70px;
border-style: outset;
border-radius: 70%;
background-color: #45abbbb;
color: #000;
}

.next {
right: 40px;
}

.prev {
left: 40px;
}

</style>

<script src="jquery.js" type="text/javascript"></script>
<script>

$(document).ready(function() {

$('.next').click(function() {
$('.slide img:first-child').fadeOut().next().fadeIn().end().appendTo(' .slide');
});

$('.prev').click(function() {
$('.slide img:first-child').fadeOut();
$('.slide img:last-child').prependTo('.slide').fadeOut();
$('.slide img:first-child').fadeIn();
});

$('.slide img:gt(0)').hide();
setInterval(function(){
$('.slide :first-child').fadeOut().next('img').fadeIn().end().appen dTo('.slide');
},10000);

});

</script>
</head>
<body>
<div id="slideshow">
<div class="slide">
<img src="big1.jpg" />
<img src="big2.jpg" />
<img src="big3.jpg" />
<img src="big4.jpg" />
</div>
<INPUT type="button" value="<" class="prev">
<INPUT type="button" value=">" class="next">
</div>
</body>
</

id1385

یک شنبه 05 بهمن 1393, 23:08 عصر

تست نکردم ولی باید جواب بده

var init= setInterval(function(){
$('.slide :first-child').fadeOut().next('img').fadeIn().end().appen dTo('.slide');
},10000);

//on || after click
clearInterval(init);

یه نمونه:

function slideItems() {
if(!$.isNumeric(scrolToTop) || scrolToTop < 350){
return;
}
var total_height = ($("div.main_slider .item").length) * scrolToTop;
top = top - scrolToTop;
if (top + total_height === 0) {
top = 0;
}
$items.animate({'top': top + 'px'}, 200);
setTimeout(function() {
slideItems();
}, slideDelay);
}

leilaaa

دوشنبه 06 بهمن 1393, 12:45 عصر

ممنون ولی راستش همون طور که گفتم من خیلی مبتدیم، الان این کداییو که گذاشتین باید به کدهام اضافه کنم ؟ از کدای قبلی چیو حذف کنم؟ نفهمیدم :(