Printable View
سلام
15 خانه داریم هم اندازه ساخته شده با تگ div
اگر بخوایم به طور تصادفی و با فواصل زمانی مختلف در بعصی از خونه ها عکس نمایش داده بشه ( با افکت fade) و سپس تصاویر محو بشن و تصاویر خونه های دیگه نمایش داده بشن باید از چه کدی از jQery استفاده کرد؟
خواهش می کنم کمکم کنید :افسرده:
ممنون
خیلی ممنون از بابت کد
منظور من این بود که مثلا اگه 15 تا خانه داریم، در هر خانه یک عکس وجود داره که بکگراند خانه هست و نمایش داده نمی شه. کد مورد نیاز من کدی هست که مثلا عکس خانه های 7، 10، 3، 5 به طور تصادفی و با فاصله زمانی از هم همراه با افکت fade نمایش داده بشن، و بعد آروم و دانه به دانه عکس ها محو بشن و به صورت رندم عکس خانه های دیگه پدیدار بشه. بازم ممنون از این که کمکم می کنید
خوب توی یک each یه عدد تصادفی بین 1 تا 15 بساز و با توجه به اون کاری که میخوای بکن
تا اونجایی که من میدونم نمیشه عکس بکگراند رو به صورت افکت نمایش داد و محو کرد. شما میتونید اون divها رو داخل div دیگه بزارید و کل div رو مخفی کنید.
ببینید این چیزی که نوشتم به دردتون میخوره:
من فرض کردم که تصاویر رو شما ۴ تا ۴ تا انتخاب میکنید.کد HTML:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
float:left;
margin:10px;
width:100px; height:100px;
border:1px solid red;
}
div div {
width:100px;
height:100px;
background-color:blue;
display:none;
border:none;
margin:0;
}
</style>
</head>
<body>
<div id="1">
<div></div>
</div>
<div id="2">
<div></div>
</div>
<div id="3">
<div></div>
</div>
<div id="4">
<div></div>
</div>
<div id="5">
<div></div>
</div>
<div id="6">
<div></div>
</div>
<div id="7">
<div></div>
</div>
<div id="8">
<div></div>
</div>
<div id="9">
<div></div>
</div>
<div id="10">
<div></div>
</div>
<div id="11">
<div></div>
</div>
<div id="12">
<div></div>
</div>
<div id="13">
<div></div>
</div>
<div id="14">
<div></div>
</div>
<div id="15">
<div></div>
</div>
<script src="jquery-2.0.0.js"></script>
<script>
function getRand() {
var arrAll = [];
var arrRet = [];
var limit = 4;
for (var i = 1; i <= 15; i++) {
arrAll.push(i);
}
for (var i = 0; i < limit; i++) {
var num = parseInt(Math.random() * arrAll.length);
arrRet.push(arrAll[num]);
arrAll.splice(num, 1);
}
return arrRet;
}
var ids = getRand();
var isShowing = true;
function show(index) {
if (isShowing) {
$("#" + ids[index] + " div").fadeIn(1000, function() {
if (index < 3) {
index++;
//show(index);
} else {
index = 0;
isShowing = false;
}
show(index);
});
} else {
$("#" + ids[index] + " div").fadeOut(1000, function() {
if (index < 3) {
index++;
//show(index);
} else {
index = 0;
ids = getRand();
isShowing = true;
}
show(index);
});
}
}
show(0);
</script>
</body>
</html>