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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcPGeAJsd5mHeGiM0CJKY35QXiFoJcg572w7j93dUZboynhjvqYkQKsaKLBiXP7F_ZjvPyV8xcGEJA2UnkCe3ZLoMY-PVtVSXP5LFKt1MLEr91fsD79DwWWmObHm9KdLJMgYfcyKsJF3UE/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0wuEITzECNasAkaCt0pyFaPUf98aTonQz3ywiFNfUEHbmnI88-LXlK8OJsL1b_MPrbrH91_tsx9KoiEn6NQ3tM_mqreDQ_oc2s-lPr56RSjV1AWHnpn7Z70a3JNXS6MzclwTLTxQmywMz/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaPWtFYYgjBv0jhypCHxdmDQonAtv-c1aUuiizsRYjBwXvh445e2et9XRM0XRTr_dzcoFsmD6_54g9HKR3kAkIUBh-MHPqvzE3F9yy9O9Rvc45f8OqzInaUNuv6mICyUp9aaQyr8zxx407/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrVqEAlfj-7XkfBaKRJifppZoqxfWR6oLt95YNcyObf1eOewflT1lwsei1-PDT3C6WAZOspnncBvziK_vrt1mV6DxAgjJie6KSMSou6GxVuAX8VL6Ajr-TaqPEWLBtHatCGangkCpEvSyH/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfeEVHprKaqDSwkwAJZV7Xp9qTaicxJl-ZieYlotEl6COP-HUUQhiNRJAHhm8Xc5DoyK4wtx8l7sGVhZ7VmW2IG1AvUiNLdDThB9Psa99-TmzwpTVxnhN4fpZhciQQLXKg92_F1ay_KxXO/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);
}
});
});