15.04.2011 13:48 Отредактировано: 15.04.2011 13:50
вот еще забыл добавить: слайдер js + jquery, меню тоже. может я что то не так делаю.
P.S. Прошу сильно не пинать меня, я не очень в скриптах этих разбираюсь.
вот код страницы:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Untitled Document</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript">
/***
Simple jQuery Slideshow Script
Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it :)
***/
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
// use this to pull the images in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
// uncomment the 3 lines below to pull the images in random order
// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 5000 );
});
</script>
</head>
<body>
<div class="bigcont">
<div class="logocont"></div>
<div class="linecont"></div>
<!--________________________________________________СЛАЙДЕР_____________________________________________________-->
<div class="slcont">
<div id="slideshow">
<img src="images/1.jpg" alt="Slideshow Image 1" class="active" />
<img src="images/2.jpg" alt="Slideshow Image 2" />
<img src="images/3.jpg" alt="Slideshow Image 3" />
<img src="images/4.jpg" alt="Slideshow Image 4" />
<img src="images/5.jpg" alt="Slideshow Image 5" /></div>
</div>
<!--____________________________________________КОНЕЦ СЛАЙДЕРА__________________________________________________-->
<div class="linecont"></div>
<!--______________________________________________МЕНЮ САЙТА____________________________________________________-->
<div class="menucont">
<ul id="sdt_menu" class="sdt_menu">
<li>
<a href="#">
<img src="images/menu1.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Главная</span>
<span class="sdt_descr">Гланая страница</span>
</span>
</a>
</li>
<li>
<a href="#">
<img src="images/menu2.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Фото</span>
<span class="sdt_descr">Мы делаем фото</span>
</span>
</a>
<div class="sdt_box">
<a href="#">Веб сайты</a>
<a href="#">Иллюстрации</a>
<a href="#">Фотографии</a>
</div>
</li>
<li>
<a href="#">
<img src="images/menu3.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Видео</span>
<span class="sdt_descr">Мы делаем видео</span>
</span>
</a>
</li>
<li>
<a href="#">
<img src="images/menu4.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">События</span>
<span class="sdt_descr">Блог и новости</span>
</span>
</a>
</li>
<li>
<a href="#">
<img src="images/menu5.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Контакты</span>
<span class="sdt_descr">Обратная связь</span>
</span>
</a>
</li>
</ul>
<!-- JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
/**
* Для каждого элемента меню при получении события mouseenter
* мы увеличиваем изображение и выводим оба элемента span sdt_active и
* sdt_wrap. Если элемент имеет подменю (sdt_box),
* то его надо плавно выдвинуть - если элемент является последним в меню,
* то выдвижение происходит влево, в другом случае - вправо.
*/
$('#sdt_menu > li').bind('mouseenter',function(){
var $elem = $(this);
$elem.find('img')
.stop(true)
.animate({
'width':'190px',
'height':'190px',
'left':'0px'
},400,'easeOutBack')
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'140px'},500,'easeOutBack')
.andSelf()
.find('.sdt_active')
.stop(true)
.animate({'height':'190px'},300,function(){
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length){
var left = '190px';
if($elem.parent().children().length == $elem.index()+1)
left = '-190px';
$sub_menu.show().animate({'left':left},200);
}
});
}).bind('mouseleave',function(){
var $elem = $(this);
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length)
$sub_menu.hide().css('left','0px');
$elem.find('.sdt_active')
.stop(true)
.animate({'height':'0px'},300)
.andSelf().find('img')
.stop(true)
.animate({
'width':'0px',
'height':'0px',
'left':'85px'},400)
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'25px'},500);
});
});
</script>
</div>
<!--________________________________________КОНЕЦ МЕНЮ САЙТА____________________________________________________-->
</div>
</body>
</html>
