PDA

View Full Version : حل مشکل اسلاید شو



salah5659
شنبه 24 آبان 1393, 13:42 عصر
با سلام خدومت دوستان گرامی
test.mecp.ir

توی آدرس سایت بالا، یک اسلاید شو گذاشتم با این کد:


<div>


<style type="text/css">




.slideshow {
height:300px;
width:666px;
overflow:hidden;
box-shadow: 1px 2px 10px 1px #808080;
position:relative;
top:10px;
left:10px;




}
.titlediv{

background:#fff;
opacity:0.7;
height:70px;
width:666px;
position:absolute;
z-index:1;
margin-top:230px;


}


.slideshow ul {
list-style:none;
margin:0;
padding:0;
position:relative;
}
.slideshow ul li {
margin:0;
padding:0;
position:absolute;
}


#aks{
border:none;
height:300px;
width:668px;
}


#p_title{
margin-top:0px;
height:50px;
font-size:25px;
color:black
}


#p_details{
float:right;
margin-top:2px;
margin-right:10px;
font-size:15px
}


#a_style{
color:black;
margin-top:5px;
margin-right:10px;
float:right;
text-decoration:none
}
</style>




<script type="text/javascript">
var x = 2;
function slideSwitch() {
var m = 5;
x += 1;
if (x > m) {
x = 1;
}


$(".slideshow ul li:nth-child(n)").animate({opacity:0},600,function(){$(".titlediv").hide();});


$(".slideshow ul li:nth-child(" + (x) +")").animate({opacity:1},400,function(){$(".titlediv").show();});


}








$(document).ready(function() {
setInterval("slideSwitch()",5000);


});
</script>




<div class="slideshow">
<div class="titlediv">
<p id="p_title"><a id="a_style" align="right" href="#">عنوان 1</a><br/><span id="p_details"> توضیحات 1</span></p>


</div>
<ul>
<li><img id="aks" name="عنوان1" title="توضیحات 1"src="http://test.mecp.ir/uploads/19_410_83_tulips.jpg" /></li>
<li><img id="aks" name="عنوان2" title="توضیحات 2" src="http://test.mecp.ir/uploads/19_410_39_hydrangeas.jpg" /</li>
<li><img id="aks" name="عنوان3" title="توضیحات 3" src="http://test.mecp.ir/uploads/19_410_40_chrysanthemum.jpg" /></li>
<li><img id="aks" name="عنوان4" title="توضیحات 4" src="http://test.mecp.ir/uploads/19_410_79_desert.jpg" /></li>
<li><img id="aks" name="عنوان5" title="توضیحات 5" src="http://test.mecp.ir/uploads/19_410_1_jellyfish.jpg" /></li>
</ul>
</div>
</div>

می خوام توضیحات هر عکس به صورت لینک نشان داده بشه که با کلیک بر روی اون توضیحات عکس مربوطه در صفحه جدید بیاد.
این اسلاید شو من هنوز ناقصه.
می خوام دایوی که گذاشتم به اسلاید شو ريال بهتر ظاهر بشه و مربروط به عکس مربوطه باشه.
بعلاوه دکمه های بعدی و قبلی رو هم بزارم
ممنون میشم کمک کنید.