| Andre99 | Дата: Суббота, 17.12.2011, 01:20 | Сообщение # 1 |
 Імператор
Группа: Администраторы
Сообщений: 742
Статус: Offline
| Для начала создаем 3 одинаковых информера:
Материалы · В случайном порядке · Материалы: 1 · Колонки: 1
Заменяете весь код в них на:
<h2>$TITLE$</h2>
<div>
<div class="scr"><a href="$ENTRY_URL$"><span style="color:#00BFFF;">$TITLE$</a></div>
<a href="$IMG_URL1$" rel="rr" onclick="return jsiBoxOpen(this)"><img src="$IMG_URL1$" style="width:200;height:160px;"></a>
<p>$MESSAGE$</p>
</div>
Далее подключаете в HEAD страницы где расположен скрипт:
<script src="http://isu-ucoz.3dn.ru/a_scripts/h/jquery.js" type="text/javascript"></script>
<script>
$(function() {
var current;
function rotate() {
if (current == 1) {
$("#block-1").removeClass().addClass("active");
$("#block-2").removeClass().addClass("non-active-top");
$("#block-3").removeClass().addClass("non-active-bottom");
} else if (current == 2) {
$("#block-1").removeClass().addClass("non-active-bottom");
$("#block-2").removeClass().addClass("active");
$("#block-3").removeClass().addClass("non-active-top");
} else {
$("#block-1").removeClass().addClass("non-active-top");
$("#block-2").removeClass().addClass("non-active-bottom");
$("#block-3").removeClass().addClass("active");
}
}
$("#rotator div").click(function() {
current = this.id.substr(6);
rotate();
});
});
</script>
В CSS:
#rotator { width: 820px; height: 200px; position: relative; padding: 0px; }
#block-1 { background: #222; border:1px solid #333;}
#block-2 { background: #222; border:1px solid #333;}
#block-3 { background: #222; border:1px solid #333;}
#rotator > div {position: absolute;overflow: hidden;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;}
#rotator > div > div {padding: 0px;}
#rotator > div > div img {float: left;margin: 5 10px 2px 10px;border:1px solid #333;}
#rotator .active { top: 0px; left: 0px; width: 608px; height: 200px; }
#rotator .non-active-top { top: 0px; left: 615px; height: 96px; width: 205px; }
#rotator .non-active-bottom { top: 104px; left: 615px; height: 96px; width: 205px; }
#rotator .non-active-top:hover, #rotator .non-active-bottom:hover {cursor: pointer;-webkit-box-shadow: 0 0 10px #555;-moz-box-shadow: 0 0 10px #555;box-shadow: 0 0 10px #555;}
#rotator p {text-align: left;padding:0 10 0 10;}
#rotator .scr {padding:3 10 5 10;font-size:12px;color:#00BFFF;background:#333;}
#rotator h2 {text-align: center;line-height: 70px;font-size:12px;padding:5;}
#rotator .active h2 {display: none;}
А это туда где будет расположен сам скрипт:
Не забудьте изменить на номера Ваших информеров:
<div id="rotator">
<div id="block-1" class="active">
$MYINF_X$
</div>
<div id="block-2" class="non-active-top">
$MYINF_X$
</div>
<div id="block-3" class="non-active-bottom">
$MYINF_X$
</div>
</div>
|
| |
| |
