تا اونجایی که من میدونم نمیشه عکس بکگراند رو به صورت افکت نمایش داد و محو کرد. شما میتونید اون 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>
من فرض کردم که تصاویر رو شما ۴ تا ۴ تا انتخاب میکنید.
نمایش تصادفی عکس ها در jQery
قوانین ایجاد تاپیک در تالار
پاسخ با نقل قول