Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Problem z własnym sliderem w jQuery
rachel
post 28.09.2013, 16:36:59
Post #1





Grupa: Zarejestrowani
Postów: 3
Pomógł: 0
Dołączył: 24.11.2011

Ostrzeżenie: (0%)
-----

Witam !

Napisałem slider w jQuery , wrzuciłem go na serwer : www.fpga4u.elektroda.eu , zobaczcie sobie na stronie, przy ładowaniu strony obrazki w tym sliderze brzydko się
ładują , ponieważ jeden leży na drugim i to daje taki efekt. Poza tym przy szybkim przełączaniu dziwnie się zachowuje . Co może być tego powodem ?

Oto mój slider w jQuery :

[JAVASCRIPT] pobierz, plaintext 
  1.  
  2. function slideSwitch(mode) { // mode 0 - auto , 1 - right , 2 - left
  3.     	var $active = $('#slideshow IMG.active');
  4.  
  5. 		if((mode==0)||(mode==1))
  6. 		{
  7. 			if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
  8.  
  9.     		var $next =  $active.next().length ? $active.next()
  10.         	: $('#slideshow IMG:first');
  11. 			$active.addClass('last-active');
  12. 		}else
  13. 		{
  14. 			if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
  15.  
  16.     		var $next =  $active.prev().length ? $active.prev()
  17.         	: $('#slideshow IMG:first');
  18. 			$active.addClass('last-active');
  19. 		}
  20.  
  21.     	if(mode==0){
  22. 			$next.css({opacity: 0.0})
  23.         	.addClass('active')
  24. 			.animate({opacity: 1.0}, 1000, function() {
  25.             $active.removeClass('active last-active');
  26.         });
  27. 		}else if((mode==1)||(mode==2))
  28. 		{
  29. 			$next.css({opacity: 0.0})
  30.         	.addClass('active')
  31.         	.animate({opacity: 1.0}, 400, function() {
  32.             $active.removeClass('active last-active');
  33.         });
  34. 		}
  35.  
  36. }
  37.  
  38.  
  39. $(document).ready(function(){
  40.  
  41.  
  42.  
  43. var left_right = $('#slideshow .left , #slideshow .right');
  44.  
  45. left_right.hide(); // ukrycie paskow lewo - prawo
  46.  
  47. $('#slideshow').hover(function(){
  48. 							left_right.show();
  49. 							left_right.css({opacity: 0.0}).animate({opacity: 0.9}, 400);
  50. 						},function(){
  51. 							left_right.hide(); // ukryj paski po sciemnienu
  52. 						});			
  53.  
  54.  
  55. var intervalID =0;
  56.  
  57. $(function() {
  58.     intervalID = setInterval( "slideSwitch(0)", 4000 );
  59. });
  60.  
  61. $('#slideshow').hover(function(){
  62. 	clearInterval(intervalID);	
  63. 	$('#slideshow .left').on('click',function(){
  64.  
  65. 	});
  66. },function(){
  67. 	intervalID = setInterval( "slideSwitch(0)", 2000 );
  68. }); 
  69.  
  70.  
  71. $('#slideshow .right').on('click',function(){slideSwitch(1);});
  72. $('#slideshow .left').on('click',function(){slideSwitch(2);});
  73. $('#slideshow').on('click',function(){slideSwitch(1);});
  74.  
  75. });
[JAVASCRIPT] pobierz, plaintext


Wygląd pliku index.html :
[HTML] pobierz, plaintext 
  1. 	<div id="slideshow">
  2. 		<div class="left"><</div>
  3. 		<div class="right">></div>
  4. 		<img src="img/1.jpg" class="active" width="100%" height="100%"/>
  5. 		<img src="img/2.jpg" width="100%" height="100%"/>
  6. 		<img src="img/3.jpg" width="100%" height="100%"/>
  7. 		<img src="img/4.jpg" width="100%" height="100%"/>
  8. 		<img src="img/5.jpg" width="100%" height="100%"/>
  9. 		<img src="img/6.jpg" width="100%" height="100%"/>
  10. 		<img src="img/7.jpg" width="100%" height="100%"/>
  11. 		<img src="img/8.jpg" width="100%" height="100%"/>
  12. 		<img src="img/9.jpg" width="100%" height="100%"/>
  13. 		<img src="img/10.jpg" width="100%" height="100%"/>
  14. 	</div>
[HTML] pobierz, plaintext


Oraz wygląd pliku CSS :
[CSS] pobierz, plaintext 
  1. #slideshow
  2. {
  3. 	position: relative;
  4. 	height: 408px;
  5. 	width: 544px;
  6. 	float: right;
  7. }
  8.  
  9. #slideshow img
  10. {
  11. 	position: absolute;
  12. 	top: 0;
  13. 	left: 0;
  14. 	z-index: 8;
  15. }
  16.  
  17. #slideshow img.active
  18. {
  19. 	z-index: 10;
  20. }
  21.  
  22. #slideshow img.last-active
  23. {
  24. 	z-index: 9;
  25. }
  26.  
  27. #slideshow .left,#slideshow .right
  28. {
  29. 	cursor: default;
  30. 	background-color: #333938;
  31. 	color: #e0e2e4;
  32. 	opacity: 0.6;
  33. 	padding-top: 10px;
  34. 	width: 60px;
  35. 	height: 40px;
  36. 	z-index: 11;
  37. 	top: 174px;
  38. 	font-size: 28px;
  39. 	font-weight: bold;
  40. 	text-align: center;
  41. 	transition-property: opacity;
  42. 	transition-duration: 0.4s;
  43. 	transition-timing-function : ease-in;
  44. }
  45.  
  46. #slideshow .left
  47. {
  48.  
  49. 	position: absolute;
  50.  
  51. 	border-top-right-radius:5px;
  52. 	border-bottom-right-radius:5px; 
  53. 	-moz-border-top-right-radius:5px;
  54. 	-moz-border-bottom-right-radius:5px;
  55. 	-webkit-border-top-right-radius:5px; 
  56. 	-webkit-border-bottom-right-radius:5px;
  57. 	-khtml-border-top-right-radius:5px; 
  58. 	-khtml-border-bottom-right-radius:5px; 
  59. }
  60.  
  61. #slideshow .right
  62. {
  63. 	position: relative;
  64. 	left: 484px;
  65. 	border-top-left-radius:5px;
  66. 	border-bottom-left-radius:5px; 
  67. 	-moz-border-top-left-radius:5px;
  68. 	-moz-border-bottom-left-radius:5px;
  69. 	-webkit-border-top-left-radius:5px; 
  70. 	-webkit-border-bottom-left-radius:5px;
  71. 	-khtml-border-top-left-radius:5px; 
  72. 	-khtml-border-bottom-left-radius:5px; 
  73. }
  74.  
  75. #slideshow .left:hover,#slideshow .right:hover
  76. {
  77. 	background-color: #677472;
  78. }
[CSS] pobierz, plaintext


Pierwszy problem , z brzydkim ładowaniem , próbowałem ominąć w następujący sposób :
w pliku html ładowany jest tylko 1 obrazek :
[HTML] pobierz, plaintext 
  1. 	<div id="slideshow">
  2. 		<div class="left"><</div>
  3. 		<div class="right">></div>
  4. 		<img src="img/1.jpg" class="active" width="100%" height="100%"/>
  5. 		<img width="100%" height="100%"/>
  6. 		<img width="100%" height="100%"/>
  7. 		<img width="100%" height="100%"/>
  8. 		<img width="100%" height="100%"/>
  9. 		<img width="100%" height="100%"/>
  10. 		<img width="100%" height="100%"/>
  11. 		<img width="100%" height="100%"/>
  12. 		<img width="100%" height="100%"/>
  13. 		<img width="100%" height="100%"/>
  14.          </div>
[HTML] pobierz, plaintext


Pozostałe obrazki są ładowane w tle, jeszcze przed funkcjami o obsługi slidera :

obrazki zapisane są w tablicy , i ładowane są w pętli for , przed funkcjami:

[JAVASCRIPT] pobierz, plaintext 
  1. var imgTable = [
  2. 	'img/1.jpg',
  3. 	'img/2.jpg',
  4. 	'img/3.jpg',
  5. 	'img/4.jpg',
  6. 	'img/5.jpg',
  7. 	'img/6.jpg',
  8. 	'img/7.jpg',
  9. 	'img/8.jpg',
  10. 	'img/9.jpg',
  11. 	'img/10.jpg'
  12. ];
  13.  
  14. function slideSwitch(mode) { // mode 0 - auto , 1 - right , 2 - left
  15.     	var $active = $('#slideshow IMG.active');
  16.  
  17. 		if((mode==0)||(mode==1))
  18. 		{
  19. 			if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
  20.  
  21.     		var $next =  $active.next().length ? $active.next()
  22.         	: $('#slideshow IMG:first');
  23. 			$active.addClass('last-active');
  24. 		}else
  25. 		{
  26. 			if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
  27.  
  28.     		var $next =  $active.prev().length ? $active.prev()
  29.         	: $('#slideshow IMG:first');
  30. 			$active.addClass('last-active');
  31. 		}
  32.  
  33.     	if(mode==0){
  34. 			$next.css({opacity: 0.0})
  35.         	.addClass('active')
  36. 			.animate({opacity: 1.0}, 1000, function() {
  37.             $active.removeClass('active last-active');
  38.         });
  39. 		}else if((mode==1)||(mode==2))
  40. 		{
  41. 			$next.css({opacity: 0.0})
  42.         	.addClass('active')
  43.         	.animate({opacity: 1.0}, 400, function() {
  44.             $active.removeClass('active last-active');
  45.         });
  46. 		}
  47.  
  48. }
  49.  
  50.  
  51. $(document).ready(function(){
  52.  
  53.  
  54.  
  55. var left_right = $('#slideshow .left , #slideshow .right');
  56.  
  57. left_right.hide(); // ukrycie paskow lewo - prawo
  58.  
  59. $('#slideshow').hover(function(){
  60. 							left_right.show();
  61. 							left_right.css({opacity: 0.0}).animate({opacity: 0.9}, 400);
  62. 						},function(){
  63. 							left_right.hide(); // ukryj paski po sciemnienu
  64. 						});			
  65.  
  66. for(var i=1;i<imgTable.length;i++)
  67. {
  68. 	$('#slideshow img').eq(i).attr('src',imgTable[i]);
  69. }
  70.  
  71.  
  72. var intervalID =0;
  73.  
  74. $(function() {
  75.     intervalID = setInterval( "slideSwitch(0)", 4000 );
  76. });
  77.  
  78. $('#slideshow').hover(function(){
  79. 	clearInterval(intervalID);	
  80. 	$('#slideshow .left').on('click',function(){
  81.  
  82. 	});
  83. },function(){
  84. 	intervalID = setInterval( "slideSwitch(0)", 2000 );
  85. }); 
  86.  
  87.  
  88. $('#slideshow .right').on('click',function(){slideSwitch(1);});
  89. $('#slideshow .left').on('click',function(){slideSwitch(2);});
  90. $('#slideshow').on('click',function(){slideSwitch(1);});
  91.  
  92. });
[JAVASCRIPT] pobierz, plaintext


Niestety to nie rozwiązało mojego problemu , proszę o fachową pomoc smile.gif
Go to the top of the page
+Quote Post
« Następny starszy · XML, AJAX · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 14.08.2025 - 13:24
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn