Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

banner

By: a guest on May 1st, 2012  |  syntax: JavaScript  |  size: 3.13 KB  |  hits: 22  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1.  
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  5. <title>Banner</title>
  6. <style type="text/css">
  7.  
  8. /*-------------- Faded -------------*/
  9. .faded {
  10.         height: 527px;
  11.         background:url(../images/faded-bg.gif) left bottom repeat-x;
  12. }
  13. .all .faded {display: none; height: 0;}
  14.  
  15. #faded {
  16.         position: absolute;
  17.         top: 80px;
  18.         left: 0;
  19.         width: 954px; height:503px;
  20. }      
  21.         #faded ul {margin: 0;}
  22.                 #faded li {list-style: none;}
  23.                         #faded li img {display: none;}
  24.                        
  25.         #faded ul.pagination {
  26.         list-style: none;
  27.         padding: 4px 0px 0px 8px;
  28.         margin: 0;
  29.         z-index: 10;
  30.         position: absolute;
  31.         top: -1px;
  32.         right: 2px;
  33.         width: 28px;
  34.         height: 83px;
  35.        
  36.         *width: 36px;
  37.         *height: 87px;
  38.         background:url(../images/ul.pagination-bg.png) 0 0 no-repeat;
  39. }
  40.         #faded  ul.pagination li {
  41.                 position:relative;
  42.                 padding: 0 0 4px 0px;
  43.                 font-size: 0;
  44.                 line-height: 0;
  45.                 list-style: none;
  46.                 float: left;
  47.         }
  48.                 #faded  ul.pagination li a {
  49.                         display:block;                                 
  50.                         text-decoration: none;
  51.                         width: 22px;
  52.                         height: 22px;
  53.                         background:url(../images/ul.pagination-a-bg.png) 0px 0px no-repeat;
  54.                         font-size: 0;
  55.                         line-height: 0;
  56.                         text-indent: -9999px;
  57.                 }
  58.                 #faded  ul.pagination li.current a, #faded  ul.pagination li a:hover {
  59.                         left:0px;
  60.                         color:#fff;
  61.                         display:block;
  62.                         background:url(../images/ul.pagination-a-bg-active.png) 0px 0px no-repeat;
  63.                         color: #600909;
  64.                 }
  65.                 #faded  ul.pagination li.last a{
  66.                         display: none;
  67.                 }
  68.                 /*ul.pagination li:last-child a {
  69.                         display:block;
  70.                 }*/
  71.         .click-pagination {
  72.                 position: absolute;
  73.                 width: 157px;
  74.                 height: 31px;
  75.                 left: 392px;
  76.                 bottom: 10px;
  77.         }
  78.  
  79. /*---------- End Faded -------------*/
  80.  
  81. </style>
  82.  
  83. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
  84. <script type="text/javascript" src="jquery.faded.js"></script> 
  85. <script type="text/javascript">
  86.                                 var $j = jQuery.noConflict();
  87.                                
  88.                                 $j(window).load(function(){
  89.                                         $j(function(){
  90.                                                 $j("#faded").faded({
  91.                                                         speed: 500,
  92.                                                         crossfade: false,                      
  93.                                                         sequentialloading: true,
  94.                                                         autopagination: true,
  95.                                                         autoplay: 5000
  96.                                                 });
  97.                                                 $j("#faded li img").show();
  98.                                                 $j("a[rel^='prettyPhoto']").prettyPhoto({theme:'facebook'});
  99.                                         });                                            
  100.                                 });            
  101.                         </script>
  102.  
  103. </head>
  104.  
  105. <body>
  106.  
  107. <div id="faded">
  108.         <ul style="position: relative;">
  109.                 <li style="position: absolute; top: 0px; left: 0px; z-index: 0; display: none;">
  110.                         <img alt="alt" src="images/faded/slider1.jpg" style="display: inline;">
  111.                 </li>
  112.                 <li style="position: absolute; top: 0px; left: 0px; z-index: 0; display: list-item;">
  113.                         <img alt="alt" src="images/faded/slider2.jpg" style="display: inline;">
  114.                 </li>
  115.                 <li style="position: absolute; top: 0px; left: 0px; z-index: 0; display: none;">
  116.                         <img alt="alt" src="images/faded/slider3.jpg" style="display: inline;">
  117.                 </li>
  118.         </ul>
  119.         <ul class="pagination">
  120.                 <li class="">
  121.                         <a href="#" rel="0">1</a>
  122.                 </li>
  123.                 <li class="current">
  124.                         <a href="#" rel="1">2</a>
  125.                 </li>
  126.                 <li class="">
  127.                         <a href="#" rel="2">3</a>
  128.                 </li>
  129.         </ul>
  130. </div>
  131. </body>
  132. </html>
create a new version of this paste RAW Paste Data