Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> nietypowy slider w js z menu
zazdrosny17
post 2.07.2012, 09:55:20
Post #1





Grupa: Zarejestrowani
Postów: 55
Pomógł: 0
Dołączył: 24.07.2010

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

Witam, od kilku dni męcze się z napisaniem slidera. Generalnie "jakoś" działa, ale nie tak jak powinien. To czego nie umiem zrobić to efek fade, a więc przenikanie zdjęć. U mnie zmieniają się one jak to kolega powiedział "po chamsku". To jeden problem. Drugi jest wiekszy. Kiedy odpalam slider na lokalu wszystko się ładuje i pięknie działa - z wyjątkiem efektu fade, ale tego nie zrobuilem bo nie umiem.
Natomiast kiedy wysyłam na serwer i wszystko się wolniej laduje, slider zaczyna chodzić jak chce.


W tym zadaniu chodziło o to, żeby było menu z lewej strony, z prawej foty. Zmiana zdjęć co 5 sek. i możliwość zmainy zdjęcia przez użytkwonika. Do tego na każdym zdjęciu jest link -> "pokaz wiecej",
i każde zdjęcia powinno mieć inny link. To co udało mi się do tej pory zrobić wrzuciłem na serwer. www.mahlojek.pl/pomocy

A tak wygląda kod:

HTML:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html lang="pl">
  3. <head>
  4.  
  5.   <meta content="charset=utf-8" />
  6.  
  7. 	<script type="text/javascript" src="slider.js"></script>
  8.  
  9.   <link rel="stylesheet" href="style.css" type="text/css" />
  10.  
  11. </head>
  12. <body>
  13.  
  14. <div id="rama">
  15.  
  16. <div id="slid_gal">
  17.  
  18. <div id="gal_lewo">
  19.  
  20. <div id="menu_gal_1" onclick="nextimage(1)">
  21. <div id="nap1" class="nap_na_menu_gal ">Obraz 1</div>
  22. </div>
  23. <div class="krecha_menu"></div>
  24.  
  25. <div id="menu_gal_2" onclick="nextimage(2)">
  26. <div id="nap2" class="nap_na_menu_gal">Obraz 2</div>
  27. </div>
  28. <div class="krecha_menu"></div>
  29.  
  30. <div id="menu_gal_3" onclick="nextimage(3)">
  31. <div id="nap3" class="nap_na_menu_gal">Obraz 3</div>
  32. </div>
  33. <div class="krecha_menu"></div>
  34.  
  35. <div id="menu_gal_4" onclick="nextimage(4)">
  36. <div id="nap4" class="nap_na_menu_gal">Obraz 4</div>
  37. </div>
  38.  
  39. </div><!-- koniec gal_lewo -->
  40.  
  41. <div id="gal_prawo">
  42.  
  43. <div id="szczala"></div>
  44.  
  45. <div id="fota"> 
  46. <a href="http://www.redtube.com" id="wiecej"></a>
  47. <img id="slideimage" name="image_0" src="gal/image_0.png" /> 
  48.  
  49. <form name="slideform">
  50. 	<input type="button" style="display: none;" value="Next" onclick="nextimage()"/>
  51. </form>
  52.  
  53. </div>
  54. </div><!-- koniec gal_prawo -->
  55.  
  56. </div><!-- koniec slid_gal -->
  57.  
  58. </div><!-- koniec rama -->
  59.  
  60. </body>
  61. </html>
[HTML] pobierz, plaintext


CSS:

[HTML] pobierz, plaintext 
  1. body
  2. {
  3. 	margin: 0px;
  4. 	font-family: Arial;
  5. }
  6.  
  7. #rama
  8. {
  9. 	border: 0px solid red;
  10. 	width: 1000px;
  11. 	height: 500px;
  12. 	margin: 0 auto;
  13. }
  14.  
  15. #slid_gal
  16. {
  17. 	border: 1px solid #365b8a;
  18. 	width: 998px;
  19. 	height: 254px;
  20. 	float: left;
  21. }
  22.  
  23. #gal_lewo
  24. {
  25. 	float: left;
  26. 	width: 316px;
  27. 	height: 257px;
  28. }
  29.  
  30. #menu_gal_1
  31. {
  32. 	background-image: url('img/menu_gal.png');
  33. 	width: 316px;
  34. 	height: 62px;
  35. 	float: left;
  36. }
  37.  
  38. #menu_gal_2
  39. {
  40. 	background-image: url('img/menu_gal.png');
  41. 	width: 316px;
  42. 	height: 62px;
  43. 	float: left;
  44. }
  45.  
  46. #menu_gal_3
  47. {
  48. 	background-image: url('img/menu_gal.png');
  49. 	width: 316px;
  50. 	height: 62px;
  51. 	float: left;
  52. }
  53.  
  54. #menu_gal_4
  55. {
  56. 	background-image: url('img/menu_gal.png');
  57. 	width: 316px;
  58. 	height: 62px;
  59. 	float: left;
  60. }
  61.  
  62. .nap_na_menu_gal
  63. {
  64. 	font-size: 20px;
  65. 	margin-left: 30px;
  66. 	margin-top: 20px;
  67. }
  68.  
  69. .krecha_menu
  70. {
  71. 	background-image: url('img/krecha_menu.png');
  72. 	width: 316px;
  73. 	height: 2px;
  74. 	float: left;
  75. }
  76.  
  77. #gal_prawo
  78. {
  79. 	width: 682px;
  80. 	height: 257px;
  81. 	float: left;
  82. }
  83.  
  84. #szczala
  85. {
  86. 	background-image: url('img/szczala.png');
  87. 	background-repeat: no-repeat; 
  88. 	position: absolute;
  89. 	width: 31px;
  90. 	height: 64px;
  91. }
  92.  
  93. #nap1
  94. {
  95. 	color: white;
  96. }
  97.  
  98. #wiecej
  99. {
  100. 	background-image: url('img/wiecej.png');
  101. 	background-repeat: no-repeat; 
  102. 	position: absolute;
  103. 	width: 149px;
  104. 	height: 43px;
  105. 	margin-left: 530px;
  106. 	margin-top: 211px;
  107. }
  108.  
  109. #slideimage
  110. {
  111. 	background-size: 100%;
  112. 	width: 682px;
  113. 	height: 254px;
  114. }
[HTML] pobierz, plaintext


java script:

[HTML] pobierz, plaintext 
  1. 	var nawalaj = setInterval("nextimage()", 5000);
  2.  
  3.  
  4.  
  5. 	var images = ['image_0.png', 'image_1.png', 'image_2.png', 'image_3.png'];
  6. 	var index = 0;
  7.  
  8. 	var martop = 0;
  9.  
  10. 	var ustawnapis = 1;
  11.  
  12.  
  13. 	function nextimage(ff)
  14. 	{
  15.  
  16. 	if(ff != null)
  17. 	{
  18. 		switch(ff)
  19. 		{
  20. 			case 1:
  21. 					var strzala = document.getElementById('szczala');
  22. 					martop = 0;
  23. 					strzala.style.marginTop = martop+"px";
  24. 					strzala.style.position = "absolute";	
  25.  
  26. 					var nap1 = document.getElementById('nap1');
  27. 					var nap2 = document.getElementById('nap2');
  28. 					var nap3 = document.getElementById('nap3');
  29. 					var nap4 = document.getElementById('nap4');
  30.  
  31. 					nap1.style.color = "white";
  32. 					nap2.style.color = "black";
  33. 					nap3.style.color = "black";
  34. 					nap4.style.color = "black";
  35.  
  36. 					var img = document.getElementById('slideimage');
  37. 					index = 0;
  38. 					img.src = "gal/"+images[index];		
  39.  
  40. 					ustawnapis = 1;
  41.  
  42. 						var x = document.getElementById('wiecej');
  43. 						x.href = "http://www.redtube.com";
  44.  
  45. 						clearInterval(nawalaj);
  46. 						nawalaj = setInterval("nextimage()", 5000);	
  47.  
  48.  
  49.  
  50.  
  51.  
  52. 		//efektfade();
  53.  
  54.  
  55.  
  56.  
  57.  
  58. 			break;
  59.  
  60. 			case 2:
  61. 					var strzala = document.getElementById('szczala');
  62. 					martop = 64;
  63. 					strzala.style.marginTop = martop+"px";
  64. 					strzala.style.position = "absolute";	
  65.  
  66. 					var nap1 = document.getElementById('nap1');
  67. 					var nap2 = document.getElementById('nap2');
  68. 					var nap3 = document.getElementById('nap3');
  69. 					var nap4 = document.getElementById('nap4');
  70.  
  71. 					nap1.style.color = "black";
  72. 					nap2.style.color = "white";
  73. 					nap3.style.color = "black";
  74. 					nap4.style.color = "black";		
  75.  
  76. 					var img = document.getElementById('slideimage');
  77. 					index = 1;
  78. 					img.src = "gal/"+images[index];
  79.  
  80. 					ustawnapis = 2;
  81.  
  82. 						var x = document.getElementById('wiecej');
  83. 						x.href = "http://www.xtube.com";	
  84.  
  85. 						clearInterval(nawalaj);
  86. 						nawalaj = setInterval("nextimage()", 5000);							
  87. 			break;
  88.  
  89. 			case 3:
  90. 					var strzala = document.getElementById('szczala');
  91. 					martop = 128;
  92. 					strzala.style.marginTop = martop+"px";
  93. 					strzala.style.position = "absolute";	
  94.  
  95. 					var nap1 = document.getElementById('nap1');
  96. 					var nap2 = document.getElementById('nap2');
  97. 					var nap3 = document.getElementById('nap3');
  98. 					var nap4 = document.getElementById('nap4');
  99.  
  100. 					nap1.style.color = "black";
  101. 					nap2.style.color = "black";
  102. 					nap3.style.color = "white";
  103. 					nap4.style.color = "black";	
  104.  
  105. 					var img = document.getElementById('slideimage');
  106. 					index = 2;
  107. 					img.src = "gal/"+images[index];	
  108.  
  109. 					ustawnapis = 3;
  110.  
  111. 						var x = document.getElementById('wiecej');
  112. 						x.href = "http://www.cipki.pl";	
  113.  
  114. 						clearInterval(nawalaj);
  115. 						nawalaj = setInterval("nextimage()", 5000);							
  116. 			break;
  117.  
  118. 			case 4:
  119. 					var strzala = document.getElementById('szczala');
  120. 					martop = 192;
  121. 					strzala.style.marginTop = martop+"px";
  122. 					strzala.style.position = "absolute";	
  123.  
  124. 					var nap1 = document.getElementById('nap1');
  125. 					var nap2 = document.getElementById('nap2');
  126. 					var nap3 = document.getElementById('nap3');
  127. 					var nap4 = document.getElementById('nap4');
  128.  
  129. 					nap1.style.color = "black";
  130. 					nap2.style.color = "black";
  131. 					nap3.style.color = "black";
  132. 					nap4.style.color = "white";		
  133.  
  134. 					var img = document.getElementById('slideimage');
  135. 					index = 3;
  136. 					img.src = "gal/"+images[index];	
  137.  
  138. 					ustawnapis = 4;
  139.  
  140. 						var x = document.getElementById('wiecej');
  141. 						x.href = "http://www.darmowe-cipeczki.yoyo.pl";	
  142.  
  143. 						clearInterval(nawalaj);
  144. 						nawalaj = setInterval("nextimage()", 5000);							
  145. 			break;
  146. 		}
  147. 	}
  148. 	else
  149. 	{
  150.  
  151.  
  152.  
  153. 		var img = document.getElementById('slideimage');
  154. 		var strzala = document.getElementById('szczala');
  155.  
  156. 		var nap1 = document.getElementById('nap1');
  157. 		var nap2 = document.getElementById('nap2');
  158. 		var nap3 = document.getElementById('nap3');
  159. 		var nap4 = document.getElementById('nap4');
  160.  
  161.  
  162. 		if(index == images.length - 1)
  163. 		{
  164. 			index = 0;
  165. 			martop = 0;
  166. 			ustawnapis = 1;	
  167.  
  168. 			strzala.style.marginTop = martop+"px";
  169. 			strzala.style.position = "absolute";	
  170.  
  171. 			nap1.style.color = "white";
  172. 			nap2.style.color = "black";
  173. 			nap3.style.color = "black";
  174. 			nap4.style.color = "black";			
  175. 		}
  176. 		else
  177. 		{
  178. 			index++;
  179. 			martop = martop + 64;
  180. 			ustawnapis++;
  181.  
  182. 			strzala.style.marginTop = martop+"px";
  183. 			strzala.style.position = "absolute";
  184.  
  185. 			switch(ustawnapis)
  186. 			{
  187. 				case 1:
  188. 					nap1.style.color = "white";
  189. 					nap2.style.color = "black";
  190. 					nap3.style.color = "black";
  191. 					nap4.style.color = "black";
  192. 				break;
  193.  
  194. 				case 2:
  195. 					nap1.style.color = "black";
  196. 					nap2.style.color = "white";					
  197. 					nap3.style.color = "black";
  198. 					nap4.style.color = "black";					
  199. 				break;
  200.  
  201. 				case 3:
  202. 					nap1.style.color = "black";
  203. 					nap2.style.color = "black";				
  204. 					nap3.style.color = "white";
  205. 					nap4.style.color = "black";						
  206. 				break;
  207.  
  208. 				case 4:
  209. 					nap1.style.color = "black";
  210. 					nap2.style.color = "black";	
  211. 					nap3.style.color = "black";					
  212. 					nap4.style.color = "white";					
  213. 				break;				
  214. 			}
  215.  
  216. 		}
  217.  
  218. 		img.src = "gal/"+images[index];
  219. 		}
  220.  
  221. 	}
[HTML] pobierz, plaintext




Bardzo proszę o pomoc! smile.gif


ps. Wiem, że mógłym też skorzystać z jQuery, ale dopiero uczę się tej biblioteki, więc zrobiłem tak.

Ten post edytował zazdrosny17 2.07.2012, 10:00:10
Go to the top of the page
+Quote Post
« Następny starszy · Po stronie przeglądarki · 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 Wersja Lo-Fi Aktualny czas: 18.08.2025 - 19:54
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn