Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [JavaScript][CSS][HTML]Rotator jQuery
Raven1122
post
Post #1





Grupa: Zarejestrowani
Postów: 369
Pomógł: 2
Dołączył: 1.11.2010

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

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
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 7)
prawda1234567
post
Post #2





Grupa: Zarejestrowani
Postów: 2
Pomógł: 0
Dołączył: 14.11.2012

Ostrzeżenie: (20%)
X----

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
Go to the top of the page
+Quote Post
Raven1122
post
Post #3





Grupa: Zarejestrowani
Postów: 369
Pomógł: 2
Dołączył: 1.11.2010

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

na pewno zrozumiales pytanie?
Go to the top of the page
+Quote Post
prawda1234567
post
Post #4





Grupa: Zarejestrowani
Postów: 2
Pomógł: 0
Dołączył: 14.11.2012

Ostrzeżenie: (20%)
X----

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!
Go to the top of the page
+Quote Post
r4xz
post
Post #5





Grupa: Zarejestrowani
Postów: 673
Pomógł: 106
Dołączył: 31.12.2008

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

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)


--------------------
GitHub
Go to the top of the page
+Quote Post
Raven1122
post
Post #6





Grupa: Zarejestrowani
Postów: 369
Pomógł: 2
Dołączył: 1.11.2010

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

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


Ten post edytował Raven1122 14.11.2012, 21:34:10
Go to the top of the page
+Quote Post
b4rt3kk
post
Post #7





Grupa: Zarejestrowani
Postów: 1 933
Pomógł: 460
Dołączył: 2.04.2010
Skąd: Lublin

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

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?


--------------------
Jeśli pomogłem, kliknij proszę 'pomógł'. Dzięki.
Go to the top of the page
+Quote Post
Raven1122
post
Post #8





Grupa: Zarejestrowani
Postów: 369
Pomógł: 2
Dołączył: 1.11.2010

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

Moj prblem wciaz nie zostal rozwiazany, po usunieciu overflow:hidden zauwazylem ze obrazki nie ukladaja sie poziomo tylko w pionie. moze to jest problemem?
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · 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 Aktualny czas: 21.08.2025 - 14:00
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn