Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][CSS][HTML]Rotator jQuery
Forum PHP.pl > Forum > Przedszkole
Raven1122
14.11.2012, 20:16:34
Witam,

Przeczytalem ksiazke o jQuery, no i chcialem sprawdzic swoje umiejetnosci w jQuery tworzac prosty rotator obrazow, i napotkalem juz problem smile.gif

A wiec:

Mam takie kodziki:

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3.  <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
  4. 	<link rel="stylesheet" href="style.css" type="text/css" />
  5. </head>
  6. <body>
  7.  
  8. <div id="slider">
  9. 	<ul>
  10. 		<li><img src="01.jpg" /></li>
  11. 		<li><img src="02.jpg" /></li>
  12. 		<li><img src="03.jpg" /></li>
  13. 		<li><img src="04.jpg" /></li>
  14. 		<li><img src="05.jpg" /></li>
  15. 	</ul>
  16. </div>
  17. <div id="controls"></div>
  18. <script>
  19. 	$(document).ready(function(){
  20. 		var html = "<ol class=\"controls\">";
  21. 		$('#slider img').each(function(i){
  22. 			html += "<li>" + (i+1) + "</li>";
  23. 		});
  24. 		html += "</ol>";
  25. 		$('#controls').html(html);
  26. 		var slides = $('#slider img').length;
  27. 		var width = $('#slider').width();
  28. 		$('#slider ul').css("width", slides*width);
  29. 		$('#slider img').each(function(i) {
  30.  
  31. 			$('#slider ul').css("left", i*width).delay(800);
  32. 		});
  33. 	});
  34. </script>
  35. </body>
  36. </html>
[HTML] pobierz, plaintext


i css

[HTML] pobierz, plaintext 
  1. #slider{
  2. width:696px; height:241px; overflow:hidden; position:relative; 
  3. }
  4.  
  5. #slider ul{
  6. list-style:none; position:absolute; left:0;
  7. }
  8.  
  9. #slider li{
  10. float:left; left:10;
  11. }
  12.  
  13. #slider img{
  14. float:left;
  15. }
  16.  
  17. #controls ol{
  18. list-style:none;
  19. }
  20.  
  21. #controls li{
  22. float:left; width:25px; height:22px; background:#f2f2f2; border:1px #d9d9d9 solid; text-align:center; margin-left:5px; padding-top:3px;
  23. }
[HTML] pobierz, plaintext


Lista z kontrolkami wyswietla sie ladnie od 1 do 5, problem w tym ze po dodaniu position:absolute do #slider ul nie wyswietlaja sie obrazki, i mam problem z przesuwaniem ich. bez position:absolute; wyswietla sie tylko obrazek 1 i nic wiecej.

Czy ktos moze mi pomoc z animowaniem takiego slidera?



refresh
prawda1234567
14.11.2012, 20:31:33
Najprościej stworzyć plik index.php i wykonać go z takim kodem:

[PHP] pobierz, plaintext 
  1. unlink('style.css');
[PHP] pobierz, plaintext


To odlinkuje i powinno działać ok smile.gif
Raven1122
14.11.2012, 20:32:19
na pewno zrozumiales pytanie?
prawda1234567
14.11.2012, 20:35:29
Tak, wszystko powinno działać ale trzeba wykonać takie coś w PHP. Inaczej ci pomóc nie umię.

PS: oczywiśćie do php musisz mieć serwer, nie tak jak html!
r4xz
14.11.2012, 20:43:32
opiszę, ponieważ trochę zmian jest do zrobienia:
div - niepotrzebny
ul - tu dajesz position relative, width, height, overflow hidden
ul li - tutaj ustalasz position absolute (element aktualnie wyswietlany ma left 0, cala reszta powiedzmy 9999px

ze skryptem widzę że poradzisz sobie bez problemu smile.gif

PS to tylko jedna możliwość, można też zrobić z np. hide()/show() na li (może nawet i lepsze - z marszy mamy załatwione efekty przejścia między obrazami)
Raven1122
14.11.2012, 21:33:49
prosilbym o zbanowanie uzytkownika prawda gdyz tylko wprowadza w blad ludzi i mysli nie nie znam php i nie wiem ze se usune style.css

zastosowalem sie do tych porad no i dalej obrazkow nie widac

nie moge se dalej poradzic

styl css wyglada tak:

[HTML] pobierz, plaintext 
  1. #slider{
  2. width:696px; height:241px; 
  3. }
  4.  
  5. #slider{
  6. list-style:none; position:relative; overflow:hidden; width:696px; height:241px; 
  7. }
  8.  
  9. #slider li{
  10. float:left; position:absolute;
  11. }
  12.  
  13.  
  14. #controls ol{
  15. list-style:none;
  16. }
  17.  
  18. #controls li{
  19. float:left; width:25px; height:22px; background:#f2f2f2; border:1px #d9d9d9 solid; text-align:center; margin-left:5px; padding-top:3px;
  20. }
[HTML] pobierz, plaintext


a js i html tak:

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3.  <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
  4. 	<link rel="stylesheet" href="style.css" type="text/css" />
  5. </head>
  6. <body>
  7.  
  8. 	<ul id="slider">
  9. 		<li><img src="01.jpg" /></li>
  10. 		<li><img src="02.jpg" /></li>
  11. 		<li><img src="03.jpg" /></li>
  12. 		<li><img src="04.jpg" /></li>
  13. 		<li><img src="05.jpg" /></li>
  14. 	</ul>
  15.  
  16. <div id="controls"></div>
  17. <script>
  18. 	$(document).ready(function(){
  19. 		var html = "<ol class=\"controls\">";
  20. 		$('#slider img').each(function(i){
  21. 			html += "<li>" + (i+1) + "</li>";
  22. 		});
  23. 		html += "</ol>";
  24. 		$('#controls').html(html);
  25. 		var slides = $('#slider img').length;
  26. 		var width = $('#slider').width();
  27. 		$('#slider li').css("left", "9999px");
  28. 		$('#slider li').each(function(i) {
  29.  
  30. 			$('#slider li').css("left", "" + (i*width) + "px").delay(800);
  31. 		});
  32. 	});
  33. </script>
  34. </body>
  35. </html>
[HTML] pobierz, plaintext


Zrobilem jeszcze takie cos, ale w rezultacie nie widac obrazkow

[HTML] pobierz, plaintext 
  1. <script>
  2. 	$(document).ready(function(){
  3. 		var html = "<ol class=\"controls\">";
  4. 		$('#slider img').each(function(i){
  5. 			html += "<li>" + (i+1) + "</li>";
  6. 		});
  7. 		html += "</ol>";
  8. 		$('#controls').html(html);
  9. 		var slides = $('#slider img').length;
  10. 		var width = $('#slider').width();
  11. 		$('#slider img').css("left", "9999px");
  12. 		$('#slider img').each(function(i) {
  13. 			var current=i+1;
  14. 			$('#slider:nth-child(' + i + ')').css("left","9999px");
  15. 			$('#slider:nth-child(' + current + ')').css("left","0px").delay(800);
  16. 		});
  17. 	});
  18. </script>
[HTML] pobierz, plaintext
b4rt3kk
14.11.2012, 22:39:49
Cytat(prawda1234567 @ 14.11.2012, 20:35:29 ) *
Tak, wszystko powinno działać ale trzeba wykonać takie coś w PHP. Inaczej ci pomóc nie umię.

PS: oczywiśćie do php musisz mieć serwer, nie tak jak html!


Chyba jesteś nie do końca trzeźwy?
Raven1122
15.11.2012, 13:20:13
Moj prblem wciaz nie zostal rozwiazany, po usunieciu overflow:hidden zauwazylem ze obrazki nie ukladaja sie poziomo tylko w pionie. moze to jest problemem?
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.