Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Slider w czystym js
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
darksiders94
7.08.2014, 12:26:00
Cześć,
Robię (z czystej ciekawości) slider. Zdjęcia w nim mają się przewijać płynnie.

HTML
[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML>
  2. <head>
  3.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
  4.   <title>StronaWWW</title>
  5.   <script type="text/javascript" src="skrypty.js"></script>
  6.   <link rel="stylesheet" type="text/css" href="css/reset.css" media="screen">
  7.   <link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
  8.  
  9. </head>
  10. <body>
  11.  
  12.  
  13. <div id="container">
  14.  
  15. 	<div id="galeria">
  16. 		<div id="calosc">
  17. 			<div id="zdjecie1"></div>
  18. 			<div id="zdjecie2"></div>
  19. 			<div id="zdjecie3"></div>
  20. 			<div id="zdjecie4"></div>
  21. 		</div>
  22. 	</div>
  23.  
  24.  
  25. </div>
  26. <script>
  27. 		window.onload = function(){
  28. 		ladowanie();
  29. 		}
  30. </script>
  31.  </body>
  32. </html>
[HTML] pobierz, plaintext


CSS
[HTML] pobierz, plaintext 
  1. body {
  2.  background:#FFF;
  3.  color:#000;
  4.  font-family: Arial, Helvetica, sans-serif;
  5.  font-size: 13px;
  6. }
  7. #container {
  8. 	background:#f1f1f1 center no-repeat;
  9. 	margin:0 auto;
  10. 	padding:0;
  11. 	width:960px;
  12. }
  13. #galeria{
  14. 	width:500px;
  15. 	height:300px;
  16. 	background:#363636 center no-repeat;
  17. 	margin:0 auto;
  18. 	overflow:hidden;
  19. }
  20. #zdjecie1{
  21. 	width:500px;
  22. 	height:300px;
  23. 	background:url(../images/zdjecie1.jpg) no-repeat;
  24. 	float:left;
  25. }
  26. #zdjecie2{
  27. 	width:500px;
  28. 	height:300px;
  29. 	background:url(../images/zdjecie2.jpg) no-repeat;
  30. 	float:left;
  31. }
  32. #zdjecie3{
  33. 	width:500px;
  34. 	height:300px;
  35. 	background:url(../images/zdjecie3.jpg) no-repeat;
  36. 	float:left;
  37. }
  38. #zdjecie4{
  39. 	width:500px;
  40. 	height:300px;
  41. 	background:url(../images/zdjecie4.jpg) no-repeat;
  42. 	float:left;
  43. }
  44. #calosc{
  45. 	width:2000px;
  46. 	height:300px;
  47. 	transition-property: all;
  48. 	-webkit-transition-property: all;
  49. 	-ms-transition-property: all;
  50. 	-o-transition-property: all;
  51. 	-moz-transition-property: all;
  52. 	transition-duration: 1s;
  53. 	-webkit-transition-duration: 1s;
  54. 	-ms-transition-duration: 1s;
  55. 	-o-transition-duration: 1s;
  56. 	-moz-transition-duration: 1s;
  57. 	position:relative;
  58. 	right:0px;
  59. 	transform: translate(0,0);
  60. }
[HTML] pobierz, plaintext


JS
[PHP] pobierz, plaintext 
  1. function przesun(){
  2. var calosc = document.getElementById("calosc");
  3. if(calosc.style.transform = 'translate(0px,0px)'){
  4. calosc.style.transform = 'translate(-500px,0px)';
  5. }
  6. }
  7.  
  8.  
  9.  
  10. function ladowanie(){
  11. 	var calosc = document.getElementById("calosc");
  12. 	calosc.onclick = function(){
  13. 		przesun();
  14. 	}
  15. }
[PHP] pobierz, plaintext


Zastanawiałem się czy funkcja onclick może przesunąć element kilka razy. Wszystkie zdjęcia zamknięte są w jednym divie. Naciskam div i on się przesuwa o podaną wartość. Raz. Pewnie dlatego, że przesuwa się do podanej pozycji. Da się zrobic tak, żeby za każdym kliknięciem przesuwał się o 500px?
proszek
8.08.2014, 23:41:00
Masz tu błąd logiczny. Twój skrypt nie działa tak jak chcesz ponieważ zawartość instrukcji if wykonuje się tylko w momencie kiedy współrzędnie są 0px,0px. Po pierwszym kliku zmieniają się na -500px,0px więc if nie wykonuje się drugi raz. Moim zdaniem if w ogóle jest nie potrzebny.

Zrób z tego fiddla albo codepena, ludzie będą chętniej odpowiadać bo łatwiej sprawdzić co nie działa.
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.