Блог
Главная » Другие » Красивый светлый слайдер для uCoz
01:05




Очень красивый , светлый слайдер для вашего сайта


Смотрим ДЕМО


Установка:


Для начала подключим стили , этот код вставляем в head и /head :
Code
  <link rel="stylesheet" href="/styleslider.css" type="text/css" media="screen" />  


Теперь подключаем jQuery, вставляем перед закрывающимся тегом /body:
Code
    <script type="text/javascript" src="/js/jquery.cycle.all.min.js"></script>         <script type="text/javascript" src="/js/superfish.js"></script>      <script type="text/javascript">     //<![CDATA[     jQuery.noConflict();          jQuery('ul.superfish').superfish({      delay: 200, // one second delay on mouseout      animation: {opacity:'show',height:'show'}, // fade-in and slide-down animation      speed: 'fast', // faster animation speed      autoArrows: true, // disable generation of arrow mark-up      dropShadows: false // disable drop shadows      }).find("> li > ul > li:last-child, > li > ul > li > ul > li:last-child, > li > ul > li > ul > li > ul > li:last-child").addClass("last-nav-element");          jQuery(".js #featured, .js div#tabbed").css("display","block");              var $featured_content = jQuery('#featured_content'),     $tabbed_area = jQuery('div#tabbed'),     $controllers = jQuery('div#controllers'),     $comments = jQuery('ol.commentlist');          et_search_bar();          if ($featured_content.length) {     $featured_content.cycle({     timeout: 5000 ,     speed: 300,     cleartypeNoBg: true,     prev: 'a#left_arrow',      next: 'a#right_arrow',     pager: 'div#controllers',     fx: 'fade'     });          var controllersWidth = $controllers.width(),     controllersLeft = Math.round((960 - controllersWidth) / 2);     if (controllersWidth < 960) $controllers.css('padding-left',controllersLeft);     };          if ($tabbed_area.length) {     $tabbed_area.tabs({ fx: { opacity: 'toggle' } });     };          if ($comments.length) {     $comments.find(">li").after('<span class="bottom_bg"></span>');     };               <!---- Search Bar Improvements ---->     function et_search_bar(){     var $searchform = jQuery('#header div#search-form'),     $searchinput = $searchform.find("input#searchinput"),     searchvalue = $searchinput.val();          $searchinput.focus(function(){     if (jQuery(this).val() === searchvalue) jQuery(this).val("");     }).blur(function(){     if (jQuery(this).val() === "") jQuery(this).val(searchvalue);     });     };          //]]>      </script>  


Этот код вставляем туда где хотим видеть наш слайдер:
Code
  <!-- Start Featured -->      <div id="featured" class="clearfix">     <a href="#" id="left_arrow">Previous</a>     <a href="#" id="right_arrow">Next</a>          <!-- Featured Content -->     <div id="featured_content">      <!-- Featured Articles -->           <div class="slide">     <a href="http://www.elegantthemes.com/preview/Minimal/the-best-design-around">     <img src="http://www.elegantthemes.com/preview/Minimal/wp-content/uploads/2010/04/thumb-1-406x226.jpg" class='thumb' alt='The Best Design Around' width='406' height='226' /> </a>     <div class="description">     <h2><a href="http://www.elegantthemes.com/preview/Minimal/the-best-design-around">The Best Design Around</a></h2>          <p class="tagline">"We provide the bet design services on the net”</p>          <p>Donec semper feugiat malesuada. Proin tempus interdum justo eu ultrices. Nunc tincidunt fermentum sodales. Suspendisse arcu tortor, porta in lobortis et, suscipit eget nisl. In in lacinia orci. Nunc euismod neque et purus gravida aliquet convallis id risus. Cras vulputate erat elementum nibh commodo pharetra. Vivamus lacinia turpis non felis iaculis ornare. Duis ac ligula...</p>     <a href="http://www.elegantthemes.com/preview/Minimal/the-best-design-around" class="readmore"><span>Read More</span></a>     </div> <!-- end .description -->     </div> <!-- end .slide -->               <div class="slide">     <a href="http://www.elegantthemes.com/preview/Minimal/comprehensive-theme-options">     <img src="http://www.elegantthemes.com/preview/Minimal/wp-content/uploads/2010/04/thumb-2-406x226.jpg" class='thumb' alt='Comprehensive Theme Options' width='406' height='226' /> </a>     <div class="description">     <h2><a href="http://www.elegantthemes.com/preview/Minimal/comprehensive-theme-options">Comprehensive Theme Options</a></h2>          <p class="tagline">"Take control of your blog with ePanel”</p>          <p>Aliquam nibh felis, fermentum sit amet ultricies tempus, gravida eget odio. Maecenas vehicula tincidunt eros sed vulputate. Sed leo nunc, luctus eget sollicitudin nec, mollis in odio. Proin vel magna sapien, eget dapibus libero. Aliquam vehicula venenatis nunc, vitae euismod dolor semper at. Aliquam ligula urna, rutrum a consectetur a, faucibus sed magna. Praesent mattis...</p>     <a href="http://www.elegantthemes.com/preview/Minimal/comprehensive-theme-options" class="readmore"><span>Read More</span></a>     </div> <!-- end .description -->     </div> <!-- end .slide -->               <div class="slide">     <a href="http://www.elegantthemes.com/preview/Minimal/the-best-support-in-town">     <img src="http://www.elegantthemes.com/preview/Minimal/wp-content/uploads/2010/04/thumb-3-406x226.jpg" class='thumb' alt='The Best Support in Town' width='406' height='226' /> </a>     <div class="description">     <h2><a href="http://www.elegantthemes.com/preview/Minimal/the-best-support-in-town">The Best Support in Town</a></h2>          <p class="tagline">"Join us in the support forums if you need assistance”</p>          <p>Quisque nec turpis tortor, a sodales justo. Aenean ornare venenatis ipsum et blandit. Nam iaculis ante vel turpis rhoncus ullamcorper. Etiam turpis nisl, aliquam et rhoncus at, pellentesque a nisi. Phasellus eget tortor nibh, non suscipit felis. Fusce nibh diam, sagittis eget volutpat at, pellentesque in odio. Fusce et felis at purus congue hendrerit ac vel metus. Etiam...</p>     <a href="http://www.elegantthemes.com/preview/Minimal/the-best-support-in-town" class="readmore"><span>Read More</span></a>     </div> <!-- end .description -->     </div> <!-- end .slide -->               </div> <!-- end #featured_content -->     <!-- End Featured Articles -->     <!-- Featured Menu -->     <div id="controllers" class="clearfix"></div>          <!-- End Featured Menu -->      </div> <!-- end #featured -->     <!-- End Featured Content -->         <!-- End Featured -->  



Источник:kloun-na.ucoz.com



Копирование этого материалы без ссылки kloun-na.ucoz.com запрещена!

Категория: Другие

Вы не авторизованы, по-этому вы не можете скачивать файлы к материалу, просматривать демо, читать и оставлять комментарии!

Knu.com
  • Опросик
  • Зайдете ли вы к нам еще?