Для разработчиков: скрипты для сайта
Раздел примеров скриптов CSS для разработчиков.
1. Скрипт "Карусель" (Удобное представление изображения с прокруткой)
Эта часть кода для вставки между тегами head:
<link rel="stylesheet" type="text/css" href="carusel/style.css" media="all" />
<link rel="stylesheet" media="all" href="carusel/style/type/puritan.css" />
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="carusel/style/css/ie7.css" media="all" />
<![endif]-->
<script type="text/javascript" src="carusel/style/js/jquery-1.5.min.js"></script>
<script type="text/javascript" src="carusel/style/js/jquery.jcarousel.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
// Initialise the first and second carousel by class selector.
// Note that they use both the same configuration options (none in this case).
jQuery('.d-carousel .carousel').jcarousel({
scroll: 1,
});
});
</script>
Эта часть кода для вставки между тегами body:
<!-- Begin Wrapper -->
<div id="wrapper">
<div class="d-carousel">
<ul class="carousel">
<li> <a href="#"><img src="carusel/style/images/carousel1.jpg" alt="" /></a>
<h4><a href="#"> Свежие новости сайта</a></h4>
<p>Здесь описание вашей картинки №1 или новости. Например, краткое содержание или анонс новой статьи на вашем сайте. </p>
</li>
<li> <a href="#"><img src="carusel/style/images/carousel2.jpg" alt="" /></a>
<h4><a href="#"> Свежие новости сайта </a></h4>
<p>Здесь описание вашей картинки №2 или новости. Например, краткое содержание или анонс новой статьи на вашем сайте. </p>
</li>
<li> <a href="#"><img src="carusel/style/images/carousel3.jpg" alt="" /></a>
<h4><a href="#"> Свежие новости сайта </a></h4>
<p>Здесь описание вашей картинки №3 или новости. Например, краткое содержание или анонс новой статьи на вашем сайте. </p>
</li>
<li> <a href="#"><img src="carusel/style/images/carousel4.jpg" alt="" /></a>
<h4><a href="#"> Свежие новости сайта </a></h4>
<p>Здесь описание вашей картинки №4 или новости. Например, краткое содержание или анонс новой статьи на вашем сайте. </p>
</li>
<li> <a href="#"><img src="carusel/style/images/carousel5.jpg" alt="" /></a>
<h4><a href="#"> Свежие новости сайта </a></h4>
<p>Здесь описание вашей картинки №5 или новости. Например, краткое содержание или анонс новой статьи на вашем сайте. </p>
</li>
<li> <a href="#"><img src="carusel/style/images/carousel6.jpg" alt="" /></a>
<h4><a href="#"> Свежие новости сайта </a></h4>
<p>Здесь описание вашей картинки №6 или новости. Например, краткое содержание или анонс новой статьи на вашем сайте. </p>
</li>
<li> <a href="#"><img src="carusel/style/images/carousel7.jpg" alt="" /></a>
<h4><a href="#"> Свежие новости сайта </a></h4>
<p>Здесь описание вашей картинки №7 или новости. Например, краткое содержание или анонс новой статьи на вашем сайте. </p>
</li>
<li> <a href="#"><img src="carusel/style/images/carousel8.jpg" alt="" /></a>
<h4><a href="#"> Свежие новости сайта </a></h4>
<p>Здесь описание вашей картинки №8 или новости. Например, краткое содержание или анонс новой статьи на вашем сайте. </p>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
<!-- End Wrapper -->