تالار گفتمان nCIS.ir

تالار گفتمان nCIS.ir > طراحی سایت > Javascript > فریمورکهای JS > jQuery > مشکلات این اسلایدر
نسخه‌ی کامل: مشکلات این اسلایدر
شما در حال مشاهده نسخه آرشیو هستید. برای مشاهده نسخه کامل کلیک کنید.

olampiad

15-09-1394، 07:12 ب.ظ
سلام و خسته نباشبد
به این اسلابدر ی نگا بندازید.
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,#slide_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',function(){
		$('.slide_text #st_one ul li:nth-child(2)').animate({marginRight:'1px'},'slow',function(){
		$('.slide_text #st_one ul li:nth-child(3)').animate({marginRight:'1px'},'slow',function(){
		});
		});
	});
	});	
	});
	}
	
	
	
	
	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',function(){
		$('.slide_text #st_two ul li:nth-child(2)').animate({marginRight:'1px'},'slow',function(){
		$('.slide_text #st_two ul li:nth-child(3)').animate({marginRight:'1px'},'slow',function(){
		});
		});
	})	
	});	
	});
	});	
	});	
	}
	
	
	
	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',function(){
	$('.slide7').css({'display':'block'});
	$('.slide7').animate({top:s3_two+'px'},'slow',function(){
	$('.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',function(){
		$('.slide_text #st_three ul li:nth-child(2)').animate({marginRight:'1px'},'slow',function(){
		$('.slide_text #st_three ul li:nth-child(3)').animate({marginRight:'1px'},'slow',function(){
		});
	})	
	});	
	});
	});	
	});	
	}
	
	
	
	
	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',function(){
		$('.slide_text #st_fore ul li:nth-child(2)').animate({marginRight:'1px'},'slow',function(){
		$('.slide_text #st_fore ul li:nth-child(3)').animate({marginRight:'1px'},'slow',function(){
		});
	})	
	});
	});	
	});
	});	
	});	
	}
	
	
	
	
	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,function(){
	$('.slide12').css({'display':'block'});
	$('.slide12').animate({top:s5_two+'px'},speadd,function(){
	$('.slide13').css({'display':'block'});
	$('.slide13').animate({top:s5_one+'px'},speadd,function(){
	$('.slide14').css({'display':'block'});
	$('.slide14').animate({top:s5_two+'px'},speadd,function(){
	$('.slide15').css({'display':'block'});
	$('.slide15').animate({top:s5_two+'px'},speadd,function(){
	$('.slide16').css({'display':'block'});
	$('.slide16').animate({top:s5_one+'px'},speadd,function(){	
	$('.slide17').css({'display':'block'});
	$('.slide17').animate({top:s5_three+'px'},speadd,function(){
	$('.slide18').css({'display':'block'});
	$('.slide18').animate({top:s5_three+'px'},speadd,function(){
	$('.slide19').css({'display':'block'});
	$('.slide19').animate({top:s5_two+'px'},speadd,function(){
	$('.slide20').css({'display':'block'});
	$('.slide20').animate({top:s5_three+'px'},speadd,function(){
		

	$('.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',function(){
	$('.slide_text #st_five ul li:nth-child(2)').animate({marginRight:'1px'},'slow',function(){
	$('.slide_text #st_five ul li:nth-child(3)').animate({marginRight:'1px'},'slow',function(){
	});
	});	
	});
	});

		
	});	
	});
	});
	});
	});
	});	
	});
	});	
	});
	});
	}
	
	
	
	
	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.backgroundImage="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.backgroundImage="url("+aksha[index]+")";
}





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

}


loadshod();
*/

olampiad

16-09-1394، 11:50 ب.ظ
منظورم از هنگ این هست ک اگر دکمه ی نکست رو سریع بزنید تمام عکس هاروی هم قرار میگیرن و اسلاید کلا بهم میخوره ممنون
تالار گفتمان nCIS.ir > طراحی سایت > Javascript > فریمورکهای JS > jQuery > مشکلات این اسلایدر