Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [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 (IMG:style_emoticons/default/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
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 (IMG:style_emoticons/default/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 (IMG:style_emoticons/default/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)
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?
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: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

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

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