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 (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
 
 Start new topic
Odpowiedzi
r4xz
post
Post #2





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

Posty w temacie
- Raven1122   [JavaScript][CSS][HTML]Rotator jQuery   14.11.2012, 20:16:34
- - prawda1234567   Najprościej stworzyć plik index.php i wykonać go z...   14.11.2012, 20:31:33
- - Raven1122   na pewno zrozumiales pytanie?   14.11.2012, 20:32:19
- - prawda1234567   Tak, wszystko powinno działać ale trzeba wykonać t...   14.11.2012, 20:35:29
|- - b4rt3kk   Cytat(prawda1234567 @ 14.11.2012, 20:35...   14.11.2012, 22:39:49
- - r4xz   opiszę, ponieważ trochę zmian jest do zrobienia: d...   14.11.2012, 20:43:32
- - Raven1122   prosilbym o zbanowanie uzytkownika prawda gdyz tyl...   14.11.2012, 21:33:49
- - Raven1122   Moj prblem wciaz nie zostal rozwiazany, po usuniec...   15.11.2012, 13:20:13

« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

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

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

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