jQuery & jQuery cycle plugin & CSS & HTML5
في هذا الدرس سنتعلم طريقة عمل اسلايد شو او عارض للصور الذي اصبح جزء و عنصر مهم في اي موقع و لة طرق كثيرة سوف القي الضوء علي طريقة سهلة و مبسطة و سنرى كيفية وضع الصور و التحكم في ابعادها و التحكم بها و تحريكها واحدة تلو الاخرى على حسب رغبتك بسم الله الرحمن الرحيم
jQuery cycle plugin
Arabic HTML![]()
![]()
![]()
*{ margin:0; padding:0; } #wrapper{ width:800px; margin:0 auto; position:relative; } header{ text-align: center; margin:25px 0; padding:15px; background:#000; color:#af1c15; border:2px solid #af1c15; } header p{ font-size: 18px; color:#c0c0c0; padding-top:15px; margin-left:12px; letter-spacing: 14px; text-transform: uppercase; } #slider{ width:800px; height:400px; overflow: hidden; } #next{ position: absolute; top:300px; right:0; opacity: 0; z-index: 5; } #prev{ position: absolute; top:300px; left:0; opacity: 0; z-index: 5; } #next:hover , #prev:hover{ opacity:.8; } footer{ text-align: center; margin:15px 0; padding:10px; background:#000; color:#af1c15; border:2px solid #af1c15; }
$('#slider').cycle({ fx: 'scrollDown', speed:2000, pause:1, easing:'easeOutBounce', delay:-2000, next:'#next', prev:'#prev' });