[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Слайдер новостей
Дата: Суббота, 26.03.2011, 13:01 | Сообщение # 1
Администратор
    Сообщений:
    841
    Награды:
    2

Вставляем код туда куда Вам надо:
Code
<style type="text/css" media="screen">   
    #slider {   
    width: 500px; /* important to be same as image width */   
    height: 260px; /* important to be same as image height */   
    position: relative; /* important */   
    overflow: hidden; /* important */   
    }   
    #sliderContent {   
    width: 450px; /* important to be same as image width or wider */   
    position: absolute;   
    top: 0;   
    margin-left: 0;   
    list-style-type: none;   
    }   
    .sliderImage {   
    float: left;   
    position: relative;   
    display: none;   
    }   
    .sliderImage .top {   
    position: absolute;   
    font: 10px/15px Arial, Helvetica, sans-serif;   
    padding: 10px 13px;   
    width: 500px;   
    background-color: #000;   
    filter: alpha(opacity=90);   
    -moz-opacity: 0.7;   
    -khtml-opacity: 0.7;   
    opacity: 0.7;   
    color: #fff;   
    display: none;   
    }   
    .clear {   
    clear: both;   
    }   
    .sliderImage span strong {   
    font-size: 2.1em;   
    }   
    .top {   
    top: 0;   
    left: 0;   
    }   
    .bottom {   
    bottom: 0;   
    left: 0;   
    }   

    </style>   
   <script src="/js/s3Slider.js" type="text/javascript"></script>   
   <script type="text/javascript">   
    $(function() {   
    $('#slider').s3Slider({   
    timeOut: 4000   
    });   
    });   
    </script>   

   <div id="slider">   
   <ul id="sliderContent">   

   <!-- <Новость 1> -->   
   <li class="sliderImage" style="display: none">   
   <a href="Ссылка на новость">   
   <img src="Картинка" alt=""/>   
   </a>   
   <span class="top" style="display: inline">   
   <strong>Название новости</strong>   
   <br/>   
   Краткое описание (макс. 75 символов)   
   </span>   
   </li>   
   <!-- </Новость 1> -->   

   <!-- <Новость 2> -->   
   <li class="sliderImage" style="display: none">   
   <a href="Ссылка на новость">   
   <img src="Картинка" alt=""/>   
   </a>   
   <span class="top" style="display: none">   
   <strong>Название новости</strong>   
   <br/>   
   Краткое описание (макс. 75 символов)   
   </span>   
   </li>   
   <!-- </Новость 2> -->   

   <div class="clear sliderImage"/>   

   </ul>   
   </div>

Файл s3Slider.js заливаем в корень сайта в папку js.

Скачать файл s3Slider.js - http://narod.ru/disk/8217933001/s3Slider.js.html

  • Страница 1 из 1
  • 1
Поиск: