Простой ротатор текста внутри блока через плагин List Ticker на jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
ul#fade, ul#slide { background:#333; color:#fff; padding:10px 20px; -moz-border-radius:10px; -webkit-border-radius:10px; width:200px; } ul#fade li, ul#slide li { list-style:none; font-family:verdana; font-size:12px; } |
2#: На нужных страницах после /head вставляйте:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script type="text/javascript" src="/js/ticker.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#fade').list_ticker({ speed:2000, effect:'fade' }); $('#slide').list_ticker({ speed:2000, effect:'slide' }); }) </script> |
3#: Далее прописываем блоки с ротацией: 1) Для эффекта fade:
|
1 2 3 4 5 6 7 |
<ul id="fade"> <li>Здесь текст номер раз</li> <li>Здесь текст номер два</li> <li>Здесь текст номер три</li> <li>Здесь текст номер четыре</li> <li>Здесь текст номер пять</li> </ul> |
|
1 2 3 4 5 6 7 |
<ul id="slide"> <li>Здесь текст номер раз</li> <li>Здесь текст номер два</li> <li>Здесь текст номер три</li> <li>Здесь текст номер четыре</li> <li>Здесь текст номер пять</li> </ul> |
