اسلایدر ساده [بایگانی]

jamejam123

سه شنبه 26 شهریور 1392, 07:56 صبح

سلام و خسته نباشید به دوستان عزیز
پنج تا تصویر دارم که آدرس اونا رو توی آرایه قرار دادم.
حالامیخوام یه اسلاید ساده درست کنم که هر یک از تصاویر از 5 ثانییه یه بار عوض شوند.
می شه کمی تو این مورد کمکم کنید
باتشکر فراوان

jalil_gh

سه شنبه 26 شهریور 1392, 08:56 صبح

ساده‌ترین حالتش میتونه به این صورت باشه:

<img id="slider" src="">

<script>

var pics = [
'1.png',
'2.png',
'3.png',
'4.png',
'5.png'
];
var index = 0;
var img = document.getElementById('slider');
setInterval(function() {

img.src = pics[index];
index++;

if (index === 5) {
index = 0;
}

}, 5000);

</script>

jamejam123

سه شنبه 26 شهریور 1392, 09:57 صبح

تشکر فراوان از شما دوست عزیز
ببخشین کاربرد تابع setinterval در این کد چیست؟

لطفا به این سایت ها بروید.
adak-co.ir
www.tv3.ir
در اسلاید های این سایت ها می بینید ، وقتی یک تصویر جای خود را با تصویر دیگر عوض می کند،افکت های زیبایی به کار رفته است.
چگونه می توانیم از این افکت ها استقاده کنیم.
با کدام یک از این ها(java script or jquery) می توان راحت تر این کار را انجام داد.
بازهم بابت راهنمایی هاتون تشکرمی کنم

jalil_gh

سه شنبه 26 شهریور 1392, 15:17 عصر

setInterval دو تا آرگومان میگیره. اولی یه تابعی که باید اجرا بشه و دومی مدت زمان به ثانیه است که تابع به طور متناوب بعد از گذشت این زمان اجرا میشه.
اما در مورد اسلایدر:
برای اسلایدر پلاگین‌های زیادی برای جی‌کوئری وجود داره که کار کردن با اونا هم راحته و هم اینکه امکانات زیادی دارن. با یه جستجوی ساده میتونید اونا رو پیدا کنید.
اما اگه میخایید خودتون بنویسید که میتونید از متد animate در جی‌کوئری و یا از افکت‌های css3 استفاده کنید.
مثلا برای اسلایدر بالا بهش با یکم تغییر افکت fade بدیم.

<img id="slider" src="">
<script src='lib/jquery.js'></script>
<script>

var pics = [
'1.png',
'2.png',
'3.png',
'4.png',
'5.png'
];
var index = 0;
var $img = $("#slider");
setInterval(function() {

$img.fadeOut(1000, function() {
$img.attr('src', pics[index]);
$img.fadeIn(1000);
});

index++;

if (index === 5) {
index = 0;
}

}, 5000);

</script>

jamejam123

یک شنبه 31 شهریور 1392, 18:04 عصر

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

<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>index</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name='description' content=''>
<meta name='author' content=''>
<script type="text/javascript" src="js/jquery-2.0.1.js"></script>
<script type="text/ecmascript" src="js/jquery-ui-1.9.2.custom.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#features li:first').show()
var aks=['images/photo1.jpg','images/photo2.jpg','images/photo3.jpg','images/photo4.jpg'];
var adad=0;
var img=$('#features li img')

setInterval(function(){
$(img).attr('src',aks[adad])
$(img).show("size",180).delay(3800)
$(img).fadeOut(10)
adad++;
if(adad===5){
adad=0;
}

},4000)

$('#kkk a').click(function(){
var linkk=$(this).attr('href')
$('#features li').hide()
$(linkk).show()

})
})
</script>
<style type="text/css">
body{
margin:0px;
padding:0px;
}
.main{
margin:auto;
width:1000px;
}
#features ul{
margin:auto;
list-style:none;
margin:0px;
padding:0px;
}
#features ul li{
display:none;
}
</style>
</head>
<body>

<div class="main">
<div id='features' class="large-photos">
<ul>
<li id="one"><img src="images/photo1.jpg" alt="Banner size image"></li>
<li id="two"><img src="images/photo2.jpg" alt="Banner size image"></li>
<li id="three"><img src="images/photo3.jpg" alt="Banner size image"></li>
<li id="fore"><img src="images/photo4.jpg" alt="Banner size image"></li>
</ul>
<div id="feature-control-1"></div>
<div id="feature-control-2"></div>
<div id="feature-control-3"></div>
<div id="feature-control-4"></div>
<div id="feature-control-5"></div>
</div>
<div class="quotes">
<blockquote>
<p>I love this city.</p>
<p class="author">by <b>Thomas</b></p>
</blockquote>
<blockquote>
<p>You should defintely stay here for a tea.</p>
<p class="author">by <b>Jenny</b></p>
</blockquote>
</div>
<div id="kkk">
<br>
<a href="#one">1</a>
<br>
<a href="#two">2</a>
<br>
<a href="#three">3</a>
<br>
<a href="#fore">1</a>
<br>
</div>

</body>
</html>

حالا موقعی که تابع setInterval در کامنت باشد کد بعد آن روی پروژه اثر می گذارد
در غیر اینصورت کد بعد آن کار نمی کند
چگونه می توانم این مشکل را حل کنم.
باتشکر فراوان