Add A Banner To Your Application

 السلام عليكم  ورحمة الله تعالى وبركاته

أولا إذهب إلى هذا الرابط و حمل البانر

http://slidesjs.com/

ثم تابع الفيديو

HTML Source:




<div id="container">
    <div id="example">

   <div id="slides">
    <div class="slides_container">
     <div class="slide">
      <a href="http://www.google.com" title="" target="_blank"><img src="https://lh5.googleusercontent.com/-9rrld1jf0GM/TygBxMIYZqI/AAAAAAAAAFM/1jrt46zOH5k/s640/IMG_1502.JPG" width="570" height="270" alt="Slide 1"></a>
      <div class="caption">
       <p></p>
      </div>
     </div>
   
     <div class="slide">
      <a href="" title="" target="_blank"><img src="https://lh4.googleusercontent.com/-vPABKgqr_eI/TygBxKvfGeI/AAAAAAAAAFI/6FoG0lB4hc4/s640/IMG_1504.JPG" width="570" height="270" alt="Slide 1"></a>
      <div class="caption">
       <p></p>
      </div>
     </div>
     <div class="slide">
      <a href="" title="" target="_blank"><img src="https://lh6.googleusercontent.com/-_xuU-00z5n4/TygBwuOr_gI/AAAAAAAAAFE/DD4y_GQ9XgI/s640/IMG_1514.JPG" width="570" height="270" alt="Slide 1"></a>
      <div class="caption">
       <p></p>
      </div>
     </div>
     <div class="slide">
      <a href="" title="" target="_blank"><img src="https://lh4.googleusercontent.com/-sspuQUgGykI/TygBzTMmAzI/AAAAAAAAAFc/dG1gaMJiIG8/s640/IMG_1515.JPG
" width="570" height="270" alt="Slide 1"></a>
      <div class="caption">
       <p></p>
      </div>
     </div>
   
     <div class="slide">
      <a href="" title="" target="_blank"><img src="https://lh5.googleusercontent.com/-YFL12-gL1t8/TygB0KSAszI/AAAAAAAAAFg/1CnCXteMTK4/s640/IMG_1519.JPG" width="570" height="270" alt="Slide 2"></a>
      <div class="caption">
       <p></p>
      </div>
     </div>
    </div>
    <a href="#" class="prev"><img src="#IMAGE_PREFIX#slider/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
    <a href="#" class="next"><img src="#IMAGE_PREFIX#slider/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
   </div>
   <img src="#IMAGE_PREFIX#slider/example-frame.png" width="740" height="341" alt="Example Frame" id="frame">

  </DIV>
 </div>




Java Script:



$(function(){
$('#slides').slides({
preload: true,
preloadImage: ' #IMAGE_PREFIX#slider/loading.gif',
play: 5000,
pause: 2500,
hoverPause: true,
animationStart: function(current){
$('.caption').animate({
bottom:-35
},100);
if (window.console && console.log) {
// example return of current slide number
console.log('animationStart on slide: ', current);
};
},
animationComplete: function(current){
$('.caption').animate({
bottom:0
},200);
if (window.console && console.log) {
// example return of current slide number
console.log('animationComplete on slide: ', current);
};
},
slidesLoaded: function() {
$('.caption').animate({
bottom:0
},200);
}
});
});