Красивый Слайдер для uCoz


Слайдер для uCoz, главная особенность данного слайдера, в том его легко редактировать для своих нужд.

Установка:



Скачиваем архив и заливаем в корень сайта в папку js Вот сам код:
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>


Если есть вопросы по установки данного слайдера пишите не стесняйтесь !


  Категория: Другие скрипты для ucoz | Добавил: AID | Дата: 03.10.2011
Скачать Красивый Слайдер для uCoz с файлообменника
3 | Ирландец5127 пишет: | 06.03.2012 | 13:52 Страница с комментарием |
на какой форум писать?
+ (0) -