Быстрое howto или как запустить javascript карусель у себя на сайте за 10 минут.Компонент карусель был добавлен в YUI билиотеку для быстрого скролла контента на сайте в привлекательном и удобном интерфейсе. Последние тенденции показывают, что карусели все чаще становятся необходимым атрибутом каждого сайта. Конкретно В данном туториале мы расмотрим стандартную имплементацию yui библиотеки для реализации поставленной задачи.
Посмотрим?
В вашем текстовом редакторе создайте следующую html-страничку:
Все! Сохраните ее, только картинки сами добавьте. Карусель готова. Результат можно наблюдать на изображении.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/2.6.0/build/carousel/assets/skins/sam/carousel.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>YUI Carousel Example 1</title>
</head>
<body class="yui-skin-sam">
<div id="scientists">
<ol>
<li><img src="img/scientists/bohr_thumb.jpg" alt="Niels Bohr"></li>
<li><img src="img/scientists/darwin_thumb.jpg" alt="Charles Darwin"></li>
<li><img src="img/scientists/einstein_thumb.jpg" alt="Albert Einstein"></li>
<li><img src="img/scientists/galileo_thumb.jpg" alt="Galileo Galilei"></li>
<li><img src="img/scientists/newton_thumb.jpg" alt="Isaac Newton"></li>
<li><img src="img/scientists/maxwell_thumb.jpg" alt="James Clerk Maxwell"></li>
</ol>
</div>
<script type="text/javascript"
src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript"
src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js"></script>
<script type="text/javascript"
src="http://yui.yahooapis.com/2.6.0/build/carousel/carousel-beta-min.js"></script>
<script type="text/javascript">
//create carousel control
var carousel = new YAHOO.widget.Carousel("scientists");
//render to page
carousel.render();
//display
carousel.show();
</script>
</body>
</html>
И все-таки карусель на jquery получается лучше! и проще!
ВідповістиВидалитиСоветую обратить внимание на YUI, после того как вы в нем разберетесь - вы поймете всю его прелесть!
ВідповістиВидалити