Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [jquery] jak dodać animacje do slidera
lamcpp
post 20.08.2011, 09:06:11
Post #1





Grupa: Zarejestrowani
Postów: 372
Pomógł: 2
Dołączył: 10.05.2009

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

Ściągnełem z internetu gotowy plik slidera, który składa się z 4 zdjęć, wyświetlanych każde kolejno po sobie. 
[XML] pobierz, plaintext 
  1.     <div id="slides">
  2.  
  3.     <div class="slide"><img src="img/sample_slides/macbook.jpg" width="920" height="400" alt="side" /></div>
  4.     <div class="slide"><img src="img/sample_slides/iphone.jpg" width="920" height="400" alt="side" /></div>
  5.     <div class="slide"><img src="img/sample_slides/imac.jpg" width="920" height="400" alt="side" /></div>
  6.     <div class="slide"><a href="http://tutorialzine.com/2009/10/beautiful-apple-gallery-slideshow/" target="_blank"><img src="img/sample_slides/info.jpg" width="920" height="400" alt="side" /></a></div>
  7.  
  8.     </div>
[XML] pobierz, plaintext

Chciałbym aby po wyświetleniu pierwszego slajdu pojawiały się na nim dodatkowo napisy "To jest pierwszy slajd", a nastepnie "Witaj na naszej stronie"(drugi napis by pojawił się sekundę albo dwie po pierwszym) Jak to zrobić? Słowem potrzebuje do slajdów (które są zdjęciami) pododawać napisy.
Oto cały kod slidera:
Plik demo.html:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Apple-like Slideshow Gallery | Tutorialzine demo</title>
  6.  
  7. <link rel="stylesheet" type="text/css" href="demo.css" />
  8.  
  9. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  10. <script type="text/javascript" src="script.js"></script>
  11.  
  12. <!--[if lte IE 7]>
  13. <style type="text/css">
  14. ul li{
  15. 	display:inline;
  16. 	/*float:left;*/
  17. }
  18. </style>
  19. <![endif]-->
  20.  
  21. </head>
  22.  
  23. <body>
  24.  
  25. <div id="main">
  26.  
  27.   <div id="gallery">
  28.  
  29.     <div id="slides">
  30.  
  31.     <div class="slide"><img src="img/sample_slides/macbook.jpg" width="920" height="400" alt="side" /><img src="img/sample_slides/macbook.jpg" width="120" height="100" alt="side" /><img src="img/sample_slides/macbook.jpg" width="100" height="100" alt="side" /></div>
  32.     <div class="slide"><img src="img/sample_slides/iphone.jpg" width="920" height="400" alt="side" /></div>
  33.     <div class="slide"><img src="img/sample_slides/imac.jpg" width="920" height="400" alt="side" /></div>
  34.     <div class="slide"><a href="http://tutorialzine.com/2009/10/beautiful-apple-gallery-slideshow/" target="_blank"><img src="img/sample_slides/info.jpg" width="920" height="400" alt="side" /></a></div>
  35.  
  36.     </div>
  37.  
  38.     <div id="menu">
  39.  
  40.     <ul>
  41.         <li class="fbar">&nbsp;</li><li class="menuItem"><a href=""><img src="img/sample_slides/thumb_about.png" alt="thumbnail" /></a></li>
  42.         <li class="menuItem"><a href=""><img src="img/sample_slides/thumb_about.png" alt="thumbnail" /></a></li>
  43.         <li class="menuItem"><a href=""><img src="img/sample_slides/thumb_about.png" alt="thumbnail" /></a></li>
  44.         <li class="menuItem"><a href=""><img src="img/sample_slides/thumb_about.png" alt="thumbnail" /></a></li>
  45.        <!-- <li class="menuItem"><a href=""><img src="img/sample_slides/thumb_about.png" alt="thumbnail" /></a></li> 
  46.         <li class="fbar">&nbsp;</li><li class="menuItem"><a href=""><img src="img/sample_slides/thumb_macbook.png" alt="thumbnail" /></a></li>
  47.         <li class="menuItem"><a href=""><img src="img/sample_slides/thumb_iphone.png" alt="thumbnail" /></a></li>
  48.         <li class="menuItem"><a href=""><img src="img/sample_slides/thumb_imac.png" alt="thumbnail" /></a></li>
  49.  
  50.        -->
  51.     </ul>
  52.  
  53.  
  54.     </div>
  55.  
  56.   </div>
  57.  
  58. </div>
  59. </body>
  60. </html>
[HTML] pobierz, plaintext


Plik demo.css:
[HTML] pobierz, plaintext 
  1. body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
  2. 	/* Page reset */
  3. 	margin:0px;
  4. 	padding:0px;
  5. }
  6.  
  7. body{
  8. 	/* Setting default text color, background and a font stack */
  9. 	color:#444444;
  10. 	font-size:13px;
  11. 	background: #f2f2f2;
  12. 	font-family:Arial, Helvetica, sans-serif;
  13. }
  14.  
  15. /* Gallery styles */
  16.  
  17. #gallery{
  18. 	/* CSS3 Box Shadow */
  19. 	-moz-box-shadow:0 0 3px #AAAAAA;
  20. 	-webkit-box-shadow:0 0 3px #AAAAAA;
  21. 	box-shadow:0 0 3px #AAAAAA;
  22.  
  23. 	/* CSS3 Rounded Corners */
  24.  
  25. 	-moz-border-radius-bottomleft:4px;
  26. 	-webkit-border-bottom-left-radius:4px;
  27. 	border-bottom-left-radius:4px;
  28.  
  29. 	-moz-border-radius-bottomright:4px;
  30. 	-webkit-border-bottom-right-radius:4px;
  31. 	border-bottom-right-radius:4px;
  32.  
  33. 	border:1px solid white;
  34.  
  35. 	background:url(img/panel.jpg) repeat-x bottom center #ffffff;
  36.  
  37. 	/* The width of the gallery */
  38. 	width:920px;
  39. 	overflow:hidden;
  40. }
  41.  
  42. #slides{
  43. 	/* This is the slide area */
  44. 	height:400px;
  45.  
  46. 	/* jQuery changes the width later on to the sum of the widths of all the slides. */
  47. 	width:920px;
  48. 	overflow:hidden;
  49. }
  50.  
  51. .slide{
  52. 	float:left;
  53. }
  54.  
  55. #menu{
  56. 	/* This is the container for the thumbnails */
  57. 	height:45px;
  58. }
  59.  
  60. ul{
  61. 	margin:0px;
  62. 	padding:0px;
  63. }
  64.  
  65. li{
  66. 	/* Every thumbnail is a li element */
  67. 	width:60px;
  68. 	display:inline-block;
  69. 	list-style:none;
  70. 	height:45px;
  71. 	overflow:hidden;
  72. }
  73.  
  74. li.inact:hover{
  75. 	/* The inactive state, highlighted on mouse over */
  76. 	background:url(img/pic_bg.png) repeat;
  77. }
  78.  
  79. li.act,li.act:hover{
  80. 	/* The active state of the thumb 
  81. 	background:url(img/active_bg.png) no-repeat;*/
  82.         background:url(img/sample_slides/thumb_iphone.png) no-repeat 0 0;
  83. }
  84.  
  85. li.act a{
  86. 	cursor:default;
  87. }
  88.  
  89. .fbar{
  90. 	/* The left-most vertical bar, next to the first thumbnail */
  91. 	width:2px;
  92. 	background:url(img/divider.png) no-repeat right;
  93. }
  94.  
  95. li a{
  96. 	display:block;
  97. 	background:url(img/divider.png) no-repeat right;
  98. 	height:35px;
  99. 	padding-top:10px;
  100. }
  101.  
  102. a img{
  103. 	border:none;
  104. }
  105.  
  106.  
  107. /* The styles below are only necessary for the demo page */
  108.  
  109. h1{
  110. 	font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
  111. 	font-size:36px;
  112. 	font-weight:normal;
  113. 	margin-bottom:15px;
  114. }
  115.  
  116. h2{
  117. 	font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
  118. 	font-size:12px;
  119. 	font-weight:normal;
  120. 	position:absolute;
  121. 	right:0;
  122. 	text-transform:uppercase;
  123. 	top:15px;
  124. }
  125.  
  126. #main{
  127. 	/* The main container */
  128. 	margin:15px auto;
  129. 	text-align:center;
  130. 	width:920px;
  131. 	position:relative;
  132. }
  133.  
  134. a, a:visited {
  135. 	color:#0196e3;
  136. 	text-decoration:none;
  137. 	outline:none;
  138. }
  139.  
  140. a:hover{
  141. 	text-decoration:underline;
  142. }
  143.  
  144. p{
  145. 	padding:10px;
  146. 	text-align:center;
  147. }
[HTML] pobierz, plaintext


Plik script.js:
[XML] pobierz, plaintext 
  1. $(document).ready(function(){
  2. 	/* This code is executed after the DOM has been completely loaded */
  3.  
  4. 	var totWidth=0;
  5. 	var positions = new Array();
  6.  
  7. 	$('#slides .slide').each(function(i){
  8.  
  9. 		/* Traverse through all the slides and store their accumulative widths in totWidth */
  10.  
  11. 		positions[i]= totWidth;
  12. 		totWidth += $(this).width();
  13.  
  14. 		/* The positions array contains each slide's commulutative offset from the left part of the container */
  15.  
  16. 		if(!$(this).width())
  17. 		{
  18. 			alert("Please, fill in width & height for all your images!");
  19. 			return false;
  20. 		}
  21.  
  22. 	});
  23.  
  24. 	$('#slides').width(totWidth);
  25.  
  26. 	/* Change the cotnainer div's width to the exact width of all the slides combined */
  27.  
  28. 	$('#menu ul li a').click(function(e,keepScroll){
  29.  
  30. 			/* On a thumbnail click */
  31.  
  32. 			$('li.menuItem').removeClass('act').addClass('inact');
  33. 			$(this).parent().addClass('act');
  34.  
  35. 			var pos = $(this).parent().prevAll('.menuItem').length;
  36.  
  37. 			$('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450);
  38. 			/* Start the sliding animation */
  39.  
  40. 			e.preventDefault();
  41. 			/* Prevent the default action of the link */
  42.  
  43.  
  44. 			// Stopping the auto-advance if an icon has been clicked:
  45. 			if(!keepScroll) clearInterval(itvl);
  46. 	});
  47.  
  48. 	$('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
  49. 	/* On page load, mark the first thumbnail as active */
  50.  
  51.  
  52.  
  53. 	/*****
  54. 	 *
  55. 	 *	Enabling auto-advance.
  56. 	 *
  57. 	 ****/
  58.  
  59. 	var current=1;
  60. 	function autoAdvance()
  61. 	{
  62. 		if(current==-1) return false;
  63.  
  64. 		$('#menu ul li a').eq(current%$('#menu ul li a').length).trigger('click',[true]);	// [true] will be passed as the keepScroll parameter of the click function on line 28
  65. 		current++;
  66. 	}
  67.  
  68. 	// The number of seconds that the slider will auto-advance in:
  69. 	var itvl = setInterval(function(){autoAdvance()},3000);
  70. });
[XML] pobierz, plaintext
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: 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 Wersja Lo-Fi Aktualny czas: 25.06.2025 - 02:14
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn