PDA

View Full Version : سوال: ساخت اسلايد شو


ravand
یک شنبه 02 بهمن 1390, 18:18 عصر
سلام
من اسلايد شو توي نت زياد ديدم ولي دلم ميخواد يه نوع ساده اش رو خودم بسازم كه يه چيزي بفهمم.
من اين كد رو با تابع setTimeout و هم برادرش setInterval امتحان كردم . ولي دو تا عكس رو بيشتر نميشه تغيير داد.
ميخوام بعد از مثلا دو ثانيه يه عكس عوض بشه.
متشكرم.

<html>
<head>
<style>
#c1{
position: absolute;
z-index: 1;
width:380px;
height:392px;
background: #E6F0FD;
}
#c2{
position: absolute;
z-index: 2;
width:380px;
height:392px;
background: #78D20D;
}
#c3{
position: absolute;
z-index: 3;
width:380px;
height:392px;
background: #78D20D;
}
#main{
width:400px;
height:415px;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
setTimeout(function() {
$("#c3").css("z-index","1");
}, 2000);

setTimeout(function() {
$("#c1").css("z-index","3");
}, 2000);
});
</script>
<head>
<body>
<div id="main">
<div id="c1"><img src="D:\aks-d\nature.jpg" width="300"></div>
<div id="c2"><img src="D:\aks-d\rang.jpg" width="300"></div>
<div id="c3"><img src="D:\aks-d\mah.jpg" width="300"></div>
</div>
</body>
</html>
lilashad
یک شنبه 02 بهمن 1390, 21:30 عصر
با سلام برای ساخت اسلاید شو فرض کن که سه تا دکمه داریم یکی دکمه nextیکیpreویکی play
برای دکمه next
$("#nextGall").click(function(){
$("#prevGall").attr("disabled", false);

var nextImg = $(".active").parent().prev().find("img");
//
$(".active").removeClass("active");
nextImg.addClass("active");


if ($(".active").parent().prev().children().size() == 0) {
$(this).attr("disabled", true);
}
$("#img img").attr("src", nextImg.attr("src"));



});
lilashad
یک شنبه 02 بهمن 1390, 21:36 عصر
من یه اسلاید شو درست کردم خواستی مرحله ای بهت بگم چه کنی
ravand
یک شنبه 02 بهمن 1390, 21:37 عصر
اگه اين كار رو بكني كه يه دنيا ممنونت ميشم. منم ميخوام ياد بگيرم دوست ندارم فقط كپي كنم.
متشكرم
lilashad
یک شنبه 02 بهمن 1390, 22:20 عصر
باسلام اول کدهای htmlیکسری عکس که در یک لیست هستند ویک عکس که در قسمت نمایش است اگه با اینا مشکلی نیست وکد دکمه nextخیلی راحت می تونی دکمه preرا هم بنویسی اینها را انجام بده تا بقیه اش را بگم
ravand
دوشنبه 03 بهمن 1390, 08:16 صبح
من فعلا دنبال اين چيزا نيستم دنبال اينم كه مثلاً سه يا چهار عكس رو بشه بعد از چند ثانيه تغيير داد و هر چهار تا رو پشت سر هم نشون داد.
lilashad
دوشنبه 03 بهمن 1390, 22:53 عصر
برای اینکار بعد در قسمت اسکریپت می تونی کد زیر را بنویسی
<script type="text/javascript">
$(function(){

setInterval(function(){
var currentImage = $('.slidImage.current');
var nextImage = currentImage.parent().next('li').find('img');
currentImage.removeClass('current');
nextImage.addClass('current');
var newSrc = nextImage.attr('src');
$('#showImage').attr('src', newSrc);
console.log(newSrc);
}, 2000)

});
</script>
ravand
سه شنبه 04 بهمن 1390, 09:43 صبح
راستش من هيچي از اين كدا نمي فهمم ميشه كدهاي html رو هم بذاريد؟ يعني ساده تر از اين نميشه نوشت؟
ravand
سه شنبه 04 بهمن 1390, 11:37 صبح
من توي نت گشتم يه اسكريپت پيدا كردم كه خيلي ساده است:

<html>
<head>
<style>
.fadein { position:relative; width:500px; height:332px; }
.fadein img { position:absolute; left:0; top:0; }
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){
$('.fadein :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('.fadein');},
3000);
});
</script>
<head>
<body>
<div class="fadein">
<img src="D:\aks-d\nature.jpg" width="400">
<img src="D:\aks-d\rang.jpg" width="400">
<img src="D:\aks-d\mah.jpg" width="400">
<img src="D:\aks-d\s24.jpg" width="400">
</div>
</body>
</html>
lilashad
سه شنبه 04 بهمن 1390, 11:43 صبح
سلام
چیزی که نوشتی خاصیت شو وهیدنی داره اما با اون کد که من نوشتم می تونی یه اسلاید شو درست کنی وبعدا امکانات اضافه کنی کل برنامه به شکل زیر است

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>saye</title>
<link rel="stylesheet" type="text/css" href="slidCss.css">
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){

setInterval(function(){
var currentImage = $('.slidImage.current');
var nextImage = currentImage.parent().next('li').find('img');
currentImage.removeClass('current');
nextImage.addClass('current');
var newSrc = nextImage.attr('src');
$('#showImage').attr('src', newSrc);
console.log(newSrc);
}, 2000)

});
</script>
</head>
<body>
<div id="contents">
<div id="header">
<h1>MY IMAGE</h1>
</div>
<div id="menu_bar">
<a href="#">صفحه اصلی</a>
</div>
<div id="contents">
<div id="side_right">
<span>
<p id="paraRitgh">
آخرین روزهای پاییز
</p>
</span>
</div>
<div id="content">
<div id="img">
<center>
<img src="image/1.jpg" width="200" height="200" id="showImage">
</center>
</div>
<div id="pic">
<ul>
<li>
<img src="image/1.jpg" width="70" height="70" class="slidImage current">
</li>
<li>
<img src="image/1 (1).jpg " width="70" height="70" class="slidImage">
</li>
<li>
<img src="image/1 (11).jpg" width="70" height="70" class="slidImage">
</li>
<li>
<img src="image/1 (12).jpg" width="70" height="70" class="slidImage">
</li>
<li>
<img src="image/1 (13).jpg" width="70" height="70" class="slidImage">
</li>
</ul>
</div>
<div id="button">
<center>
<button >
next
</button>
<button >
prev
</button>
</center>
</div>
</div>
</div>
<div class="clear">
</div>
<div id="footer">
<h2>slidSSShow</h2>
</div>
</body>
</html>