PDA

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



olampiad
یک شنبه 15 آذر 1394, 17:38 عصر
سلام و خسته نباشبد
به این اسلابدر ی نگا بندازید.
http://nspy.ir/slide/
چند تا سوال داشتم در مورد این اسلایدر:
این اسلابدر خیلی هنگ میکنه.
یعنی وقتی دکمه ی بعدی رو میزنم و یا دکمه ی قبلی رو میزنم یا از باتون های زیر اسلایدر برای جابه جایی استفاده میکنم هنگ میکنه.
کد هاشو میزارم اینجا.
اگه امکانش باشه یه نگا بندازید و ببینید کد چ مشکلی داره؟
ممنون




<div id="slider"><div class="next"></div><div class="prev"></div>
<div id="slide_one"><img src="images/slide3.png" class="slide1"><img src="images/slide8.png" class="slide5"></div>
<div id="slide_two"><img src="images/slide4.jpg" class="slide2"><img src="images/slide5.png" class="slide3"><img src="images/slide7.png" class="slide4"></div>
<div id="slide_three"><img src="images/slide9.jpg" class="slide6"><img src="images/slide10.jpg" class="slide7"></div>
<div id="slide_fore"><img src="images/slide11.png" class="slide8"><img src="images/slide12.png" class="slide9"><img src="images/slide13.png" class="slide10"></div>
<div id="slide_five"><img src="images/stone_slide2.png" class="slide11"><img src="images/stone_slide11.png" class="slide12"><img src="images/stone_slide4.png" class="slide13"><img src="images/stone_slide5.png" class="slide14"><img src="images/stone_slide6.png" class="slide15"><img src="images/stone_slide7.png" class="slide16"><img src="images/stone_slide8.png" class="slide17"><img src="images/stone_slide1.png" class="slide18"><img src="images/stone_slide9.png" class="slide19"><img src="images/stone_slide10.png" class="slide20"></div>
<div class="slide_text">
<div id="st_one"><h2>ماشین آلات سنگبری</h2><ul><li>بیش از 300 شرکت ثبت شده</li><li>مجموعه ی از ماشین آلات سنگبری</li><li>بحث و تبادل نظر در مورد ماشین آلات</li></ul></div>
<div id="st_two"><h2>ماشین آلات سنگبری</h2><ul><li>بیش از 3سیبسیبه</li><li>مجموعه ی از ماشین آلات سنگبری</li><li>بحث و تبادل نظر در مورد ماشین آلات</li></ul></div>

<div id="st_three"><h2>ماشین آلات سنگبری</h2><ul><li>بیش از 300 شرکت ثبت شده</li><li>مجموعه ی از ماشین آلات سنگبری</li><li>بحث و تبادل نظر در مورد ماشین آلات</li></ul></div>
<div id="st_fore"><h2>ماشین آلات سنگبری</h2><ul><li>بیش از 300 شرکت ثبت شده</li><li>مجموعه ی از ماشین آلات سنگبری</li><li>بحث و تبادل نظر در مورد ماشین آلات</li></ul></div>

<div id="st_five"><h2>ماشین آلات سنگبری</h2><ul><li>بیش از 300 شرکت ثبت شده</li><li>مجموعه ی از ماشین آلات سنگبری</li><li>بحث و تبادل نظر در مورد ماشین آلات</li></ul></div>
</div>
<div class="slide_but"><div id="one_slide"></div><div id="two_slide"></div><div id="three_slide"></div><div id="fore_slide"></div><div id="five_slide"></div></div></div>




@charset "utf-8";
/* CSS Document */


#slider{
width:100%;
height:495px;
background:url(../images/slide_back.jpg);
position:relative;
}
.next{
width:23px;
height:23px;
background:url(../images/next.png) no-repeat;
position:absolute;
top:233px;
right:30px;
}
.prev{
width:23px;
height:23px;
background:url(../images/prev.png) no-repeat;
position:absolute;
top:233px;
left:30px;
}
.slide1{
position:absolute;
left:150px;
top:69px;
width:550px;
display:none;
}


.slide2{
position:absolute;
left:150px;
top:39px;
border-radius:7px;
box-shadow:0px 0px 3px 0px #666;
}


.slide3{
position:absolute;
left:450px;
top:79px;
width:370px;
}


.slide4{
position:absolute;
left:270px;
top:343px;
width:175px;
border-radius:7px;
}


.slide5{
position:absolute;
left:190px;
top:119px;
display:block;
width:470px;
display:none;
}


.slide6{
position:absolute;
left:90px;
top:83px;
display:block;
width:390px;
border-radius:5px;
}


.slide7{
position:absolute;
left:500px;
top:139px;
width:300px;
border-radius:5px;
}


.slide8{
position:absolute;
left:110px;
top:70px;
width:230px;
}


.slide9{
position:absolute;
left:305px;
top:255px;
width:210px;
}


.slide10{
position:absolute;
left:485px;
top:95px;
width:210px;
}


.slide11{
position:absolute;
left:165px;
top:55px;
}
.slide12{
position:absolute;
left:80px;
top:154px;
}
.slide13{
position:absolute;
left:329px;
top:55px;
}
.slide14{
position:absolute;
left:247px;
top:155px;
}
.slide15{
position:absolute;
left:412px;
top:155px;
}
.slide16{
position:absolute;
left:496px;
top:56px;
}
.slide17{
position:absolute;
left:164px;
top:255px;
}
.slide18{
position:absolute;
left:331px;
top:255px;
}
.slide19{
position:absolute;
left:582px;
top:155px;
}
.slide20{
position:absolute;
left:499px;
top:253px;
}


.slide_text{
direction:rtl;
position:absolute;
right:150px;
top:71px;
width:300px;
height:310px;
overflow:hidden;
}
.slide_text h2{
font-family:yekan;
margin:6px;
padding:6px;
position:absolute;
top:-90px;
right:0px;
}
.slide_text ul{
margin:0px;
padding:0px;
list-style:none;
position:absolute;
top:149px;
}
.slide_text ul li{
font-family:yekan;
padding-right:38px;
background:url(../images/tick.png) no-repeat;
background-position:97% 0%;
height:30px;
margin:2px;
margin-right:308px;
width:300px;
}
.slide_but{
width:90px;
height:19px;
position:absolute;
top:94%;
right:45%;
}
.slide_but div{
float:right;
width:11px;
height:11px;
background:#acacac;
border-radius:100%;
margin:3px;
}
#one_slide{
background:#d38f03;
}


#slide_one img{
display:none;
}
#slide_two img{
display:none;
}
#slide_three img{
display:none;
}
#slide_fore img{
display:none;


}
#slide_five img{
display:none;
}


.slide_text div{
display:none;
}


.slide_text div{
display:none;
}


#st_one{
display:block;
}


#slide_one,#slide_two,#slide_three,#slide_fore,#sl ide_five{
position:relative;
background:#60C;
width:700px;
left:px;
}





$(document).ready(function(e) {


var s3_one=85;
var s3_two=139;


var s4_one=490;


var s5_one=55;
var s5_two=155;
var s5_three=255;


setInterval(function(){




if (document.documentElement.clientWidth > 1101) {
s3_one=85;
s3_two=139;


s4_one=490;


s5_one=55;
s5_two=155;
s5_three=255;
}




if (document.documentElement.clientWidth < 1100) {


s3_one=129;
s3_two=169;


s4_one=440;


s5_one=75;
s5_two=165;
s5_three=255;


}






if (document.documentElement.clientWidth < 1000) {


s3_one=145;
s3_two=179;


s4_one=425;


s5_one=95;
s5_two=175;
s5_three=255;


}




if (document.documentElement.clientWidth < 900) {


s3_one=125;
s3_two=149;


s4_one=425;


s5_one=95;
s5_two=175;
s5_three=255;


}




},5);







function reset_slide(){
var slide_array=Array('one','two','three','fore','five ');
for(var i=0;i<slide_array.length;i++){
$('.slide_text #st_'+slide_array[i]+' h2').css({'top':'-90px'});
$('.slide_text #st_'+slide_array[i]+' ul li:nth-child(1)').css({'margin-right':'308px'});
$('.slide_text #st_'+slide_array[i]+' ul li:nth-child(2)').css({'margin-right':'308px'});
$('.slide_text #st_'+slide_array[i]+' ul li:nth-child(3)').css({'margin-right':'308px'});
}



$('#slide_one img').css('display','none');
$('#slide_two img').css('display','none');
$('#slide_three img').css('display','none');
$('#slide_fore img').css('display','none');
$('#slide_five img').css('display','none');
$('.slide_text img').css('display','none');
//$('#st_one').css('display','none');
$('#st_two').css('display','none');
$('#st_three').css('display','none');
$('#st_fore').css('display','none');
$('#st_five').css('display','none');
}


function slide_but_color(tag_select){
$('.slide_but div').css('background','#acacac');
$('#'+tag_select).css('background','#da9208');
}


function one_slide(){
reset_slide();
slide_but_color('one_slide');
$('.slide1').fadeIn(1000,function(){
$('.slide_text #st_one h2').animate({top: '89px'},'slow',function(){
$('.slide_text #st_one ul li:nth-child(1)').animate({marginRight:'1px'},'slow',func tion(){
$('.slide_text #st_one ul li:nth-child(2)').animate({marginRight:'1px'},'slow',func tion(){
$('.slide_text #st_one ul li:nth-child(3)').animate({marginRight:'1px'},'slow',func tion(){
});
});
});
});
});
}




function two_slide(){
reset_slide();
slide_but_color('two_slide');
$('.slide2').fadeIn(1000,function(){
$('.slide3').fadeIn(1000,function(){
$('.slide4').fadeIn(1000,function(){
$('.slide_text #st_two').css('display','block');
$('.slide_text #st_two h2').animate({top: '89px'},'slow',function(){
$('.slide_text #st_two ul li:nth-child(1)').animate({marginRight:'1px'},'slow',func tion(){
$('.slide_text #st_two ul li:nth-child(2)').animate({marginRight:'1px'},'slow',func tion(){
$('.slide_text #st_two ul li:nth-child(3)').animate({marginRight:'1px'},'slow',func tion(){
});
});
})
});
});
});
});
}



function three_slide(){
reset_slide();

slide_but_color('three_slide');
$('.slide6').css({'top':'-410px'});
$('.slide7').css({'top':'310px'});
$('.slide6').css({'display':'block'});
$('.slide6').animate({top:s3_one+'px'},'slow',func tion(){
$('.slide7').css({'display':'block'});
$('.slide7').animate({top:s3_two+'px'},'slow',func tion(){
$('.slide_text #st_three').css('display','block');
$('.slide_text #st_three h2').animate({top: '89px'},'slow',function(){
$('.slide_text #st_three ul li:nth-child(1)').animate({marginRight:'1px'},'slow',func tion(){
$('.slide_text #st_three ul li:nth-child(2)').animate({marginRight:'1px'},'slow',func tion(){
$('.slide_text #st_three ul li:nth-child(3)').animate({marginRight:'1px'},'slow',func tion(){
});
})
});
});
});
});
}




function fore_slide(){
reset_slide();

slide_but_color('fore_slide');
$('.slide8').css({'top':'-410px'});
$('.slide10').css({'left':'-410px'});
$('.slide9').css({'top':'310px'});
$('.slide8').css({'display':'block'});
$('.slide8').animate({top:'55px'},'slow',function( ){
$('.slide9').css({'display':'block'});
$('.slide9').animate({top:'239px'},'slow',function (){
$('.slide10').css({'display':'block'});
$('.slide10').animate({left:s4_one+'px',top:'79px' },'slow',function(){

$('.slide_text #st_fore').css('display','block');
$('.slide_text #st_fore h2').animate({top: '89px'},'slow',function(){
$('.slide_text #st_fore ul li:nth-child(1)').animate({marginRight:'1px'},'slow',func tion(){
$('.slide_text #st_fore ul li:nth-child(2)').animate({marginRight:'1px'},'slow',func tion(){
$('.slide_text #st_fore ul li:nth-child(3)').animate({marginRight:'1px'},'slow',func tion(){
});
})
});
});
});
});
});
}




function five_slide(){
reset_slide();

slide_but_color('five_slide');
$('.slide11').css({'top':'350px'});
$('.slide12').css({'top':'350px'});
$('.slide13').css({'top':'350px'});
$('.slide14').css({'top':'-350px'});
$('.slide15').css({'top':'350px'});
$('.slide16').css({'top':'-350px'});
$('.slide17').css({'top':'350px'});
$('.slide18').css({'top':'-350px'});
$('.slide19').css({'top':'350px'});
$('.slide20').css({'top':'-350px'});
var speadd=270;
$('.slide11').css({'display':'block'});
$('.slide11').animate({top:s5_one+'px'},speadd,fun ction(){
$('.slide12').css({'display':'block'});
$('.slide12').animate({top:s5_two+'px'},speadd,fun ction(){
$('.slide13').css({'display':'block'});
$('.slide13').animate({top:s5_one+'px'},speadd,fun ction(){
$('.slide14').css({'display':'block'});
$('.slide14').animate({top:s5_two+'px'},speadd,fun ction(){
$('.slide15').css({'display':'block'});
$('.slide15').animate({top:s5_two+'px'},speadd,fun ction(){
$('.slide16').css({'display':'block'});
$('.slide16').animate({top:s5_one+'px'},speadd,fun ction(){
$('.slide17').css({'display':'block'});
$('.slide17').animate({top:s5_three+'px'},speadd,f unction(){
$('.slide18').css({'display':'block'});
$('.slide18').animate({top:s5_three+'px'},speadd,f unction(){
$('.slide19').css({'display':'block'});
$('.slide19').animate({top:s5_two+'px'},speadd,fun ction(){
$('.slide20').css({'display':'block'});
$('.slide20').animate({top:s5_three+'px'},speadd,f unction(){



$('.slide_text #st_five').css('display','block');
$('.slide_text #st_five h2').animate({top: '89px'},'slow',function(){
$('.slide_text #st_five ul li:nth-child(1)').animate({marginRight:'1px'},'slow',func tion(){
$('.slide_text #st_five ul li:nth-child(2)').animate({marginRight:'1px'},'slow',func tion(){
$('.slide_text #st_five ul li:nth-child(3)').animate({marginRight:'1px'},'slow',func tion(){
});
});
});
});



});
});
});
});
});
});
});
});
});
});
}




var interval;
five_slide();

var add=1;

interval=setInterval(function(){

add++;
switch(add){

case 1:
one_slide();
break;

case 2:
two_slide();
break;

case 3:
three_slide();
break;

case 4:
fore_slide();
break;

case 5:
five_slide();
break;
}
if(add==5){add=0;}
},7000);


$('#one_slide').click(function(){
add=1;
clearInterval(interval);
one_slide();


interval=setInterval(function(){
add++;
switch(add){

case 1:
one_slide();
break;

case 2:
two_slide();
break;

case 3:
three_slide();
break;

case 4:
fore_slide();
break;

case 5:
five_slide();
break;
}
if(add==5){add=0;}
},7000);


})


$('#two_slide').click(function(){
add=3;
clearInterval(interval);
two_slide();


interval=setInterval(function(){
add++;
switch(add){

case 1:
one_slide();
break;

case 2:
two_slide();
break;

case 3:
three_slide();
break;

case 4:
fore_slide();
break;

case 5:
five_slide();
break;
}
if(add==5){add=0;}
},7000);


})


$('#three_slide').click(function(){
add=3;
clearInterval(interval);
three_slide();


interval=setInterval(function(){
add++;
switch(add){

case 1:
one_slide();
break;

case 2:
two_slide();
break;

case 3:
three_slide();
break;

case 4:
fore_slide();
break;

case 5:
five_slide();
break;
}
if(add==5){add=0;}
},7000);


})




$('#fore_slide').click(function(){
add=4;
clearInterval(interval);
fore_slide();


interval=setInterval(function(){
add++;
switch(add){

case 1:
one_slide();
break;

case 2:
two_slide();
break;

case 3:
three_slide();
break;

case 4:
fore_slide();
break;

case 5:
five_slide();
break;
}
if(add==5){add=0;}
},7000);


})


$('#five_slide').click(function(){
add=5;
clearInterval(interval);
five_slide();


interval=setInterval(function(){
add++;
switch(add){

case 1:
one_slide();
break;

case 2:
two_slide();
break;

case 3:
three_slide();
break;

case 4:
fore_slide();
break;

case 5:
five_slide();
break;
}
if(add==5){add=0;}
},7000);


})




$('.next').click(function(){
clearInterval(interval);
reset_slide();
add++;
if(add>5){
add=1;
}


switch(add){
case 1:
one_slide();
break;

case 2:
two_slide();
break;

case 3:
three_slide();
break;

case 4:
fore_slide();
break;

case 5:
five_slide();
break;
}


interval=setInterval(function(){
add++;
switch(add){

case 1:
one_slide();
break;

case 2:
two_slide();
break;

case 3:
three_slide();
break;

case 4:
fore_slide();
break;

case 5:
five_slide();
break;
}
if(add==5){add=0;}
},7000);


});










$('.prev').click(function(){
clearInterval(interval);
reset_slide();
if(add<=1){
add=6;
}
add--;
switch(add){
case 1:
one_slide();
break;

case 2:
two_slide();
break;

case 3:
three_slide();
break;

case 4:
fore_slide();
break;

case 5:
five_slide();
break;
}


interval=setInterval(function(){
add++;
switch(add){

case 1:
one_slide();
break;

case 2:
two_slide();
break;

case 3:
three_slide();
break;

case 4:
fore_slide();
break;

case 5:
five_slide();
break;
}
if(add==5){add=0;}
},7000);

});








});


/*
var adad=0;
index=0;
var interval;




function loadshod(){
slider();
}






function slider(){
start();
document.getElementById('next').onclick=next;
document.getElementById('prev').onclick=prev;
}





function start(){
interval = setInterval(function(){
document.getElementById('slider').style.background Image="url("+aksha[adad]+")";
adad++;
if(adad===5){
adad=0;
}
},5000);
}






function next(){


clearInterval(interval);
index++;
if(index===aksha.length){
index=0;
}
document.getElementById('slider').style.background Image="url("+aksha[index]+")";
}










function prev(){
clearInterval(interval);
if(index===0){
index=aksha.length;
}
index--;
document.getElementById('slider').style.background Image="url("+aksha[index]+")";


}




loadshod();
*/

olampiad
دوشنبه 16 آذر 1394, 22:19 عصر
منظورم از هنگ این هست ک اگر دکمه ی نکست رو سریع بزنید تمام عکس هاروی هم قرار میگیرن و اسلاید کلا بهم میخوره ممنون

olampiad
دوشنبه 16 آذر 1394, 22:21 عصر
اینم قالب
http://s3.picofile.com/file/8226899034/them_html.zip.html
ممنون