Подключаем на нужную страницу JQwerty
Code
<script src="http://csrulz.ru/scripts/jquery-1.2.2.pack.js"></script>
Создаем глобальный блок SLIDER, пихаем туда следующий код.
Code
<style type="text/css">
#wrap {width: 250px;height: 380px;padding:10px;background-image: url(http://iucoz.ru/other/silder/pattern.png);}
* html #wrap {width: 270px;height: 380px;padding:10px;background-image: url(http://iucoz.ru/other/silder/pattern.png);}
#flow {overflow: hidden;height:380;width:220;}
#pult {float:right; width:25px;height:380px;background-color:#ebebeb;}
#b {margin-top:330px;}
.contblock {font-family: Verdana; font-size:11px; color:#666666; border-bottom: 1px dotted #999999; padding:4px;text-align:justify;}
.postdate {color: #0066CC;font-weight: bold;}
#up {filter: alpha(opacity=30); opacity: 0.30;}
#down {filter: alpha(opacity=30); opacity: 0.30;}
</style>
<div id="wrap"><div id="pult">
<div id="t"><img src="http://iucoz.ru/other/silder/arrow_up.png" width="25" height="25" id="down"></div>
<div id="b"><img src="http://iucoz.ru/other/silder/arrow_dw.png" width="25" height="25" id="up"></div>
</div><div id="flow"><div id="cont">$MYINF_X$
</div></div>
</div>
<script type="text/javascript">
var j = jQuery.noConflict();
var cheight = j("#cont").height();
var wheight = j("#wrap").height();
var maxmarging = parseInt(cheight)-parseInt(wheight);
j("#up").hover(
function() {
j("#cont").animate({marginTop: "-" + maxmarging + "", marginBottom: "0"}, 5000);
j("#up").animate({opacity: 1}, 70);
},
function() {
j("#cont").stop();
j("#up").animate({opacity: 0.3}, 70);
});
j("#down").hover(
function() {
j("#cont").animate({marginBottom: "-" + maxmarging + "", marginTop: "0"}, 5000);
j("#down").animate({opacity: 1}, 70);
},
function() {
j("#cont").stop();
j("#down").animate({opacity: 0.3}, 70);
});
</script>
Создаем информер. Новости, дата добавления
Не забывайте, вы можете использовать функцию вывода материалов лишь некоторых категорий, например если вы хотите использовать слайдер как блог разработчика или последние новости, важные на данный момент.
Нажимаем на вставляем туда следующий код:
Code
<div class="contblock"><span class="postdate">$DATE$</span><br>$MESSAGE$</div>
Ставим $GLOBAL_SLIDER$ в то место, где вам нужен слайдер. Готово.