Файл: Разработка интернет магазина.pdf

</div>

</div>

<div class="item">…</div>

<div class="item">…</div>

</div>

<!-- Carousel nav -->

<a class="carousel-control left" href="#myCarousel" data-slide="prev"></a>

<a class="carousel-control right" href="#myCarousel" data-slide="next"></a>

</div>

<div class="categories">

<ul class="row-fluid">

<li class="item_cat item1 span4">

<a href="#">

<img src="img/cat1.jpg" alt="">

<h3>Одежда</h3>

</a>

</li>

<li class="item_cat item2 span4">

<a href="#">

<img src="img/cat2.jpg" alt="">

<h3>Обувь</h3>

</a>

</li>

<li class="item_cat item3 span4">

<a href="#">

<img src="img/cat3.jpg" alt="">

<h3>Мячи</h3>

</a>

</li>

<li class="item_cat item4 span4">

<a href="#">

<img src="img/cat4.jpg" alt="">

<h3>Аксессуары</h3>

</a>

</li>

<li class="item_cat item5 span4">

<a href="#">

<img src="img/cat5.jpg" alt="">

<h3>Клубная продукция</h3>

</a>

</li>

<li class="item_cat item6 span4">

<a href="#">

<img src="img/cat6.jpg" alt="">

<h3>Прочее</h3>

</a>

</li>

</ul>

</div>

</div><!--preview-->

</div>

<div class="container">

<div class="popular_products">

<h4 class="modul">Рекомендуемые товары</h4>

<ul class="row-fluid">

<li class="span3 item_pro">

<a href="#"><img src="img/pro1.jpg" alt=""></a>

<h5><a href="#">Nike Mercurial Victory IV FG Soccer Cleats</a></h5>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id dui id arcu rhoncus viverra. Aenean id congue mauris, commodo consectetur dui. </p>

<div class="prize">2299.00</div>

<div class="clearfix"></div>

<div class="add_to_cart"><a href="#">Добавить в корзину</a></div>

</li>

<li class="span3 item_pro">

<a href="#"><img src="img/pro2.jpg" alt=""></a>

<h5><a href="#">Nike Tiempo Legend IV FG Soccer Cleat White Black</a></h5>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id dui id arcu rhoncus viverra. Aenean id congue mauris, commodo consectetur dui. </p>

<div class="prize">4999.00</div>

<div class="clearfix"></div>

<div class="add_to_cart"><a href="#">Добавить в корзину</a></div>

</li>

<li class="span3 item_pro">

<a href="#"><img src="img/pro3.jpg" alt=""></a>

<h5><a href="#">Adidas Predator Absolion LZ TRX FG</a></h5>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id dui id arcu rhoncus viverra. Aenean id congue mauris, commodo consectetur dui. </p>

<div class="prize">1899.00</div>

<div class="clearfix"></div>

<div class="add_to_cart"><a href="#">Добавить в корзину</a></div>

</li>

<li class="span3 item_pro">

<a href="#"><img src="img/pro4.jpg" alt=""></a>

<h5><a href="#">New Mens Nike Sz 9 M Rio II FG Soccer Cleat</a></h5>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id dui id arcu rhoncus viverra. Aenean id congue mauris, commodo consectetur dui. </p>

<div class="prize">699.00</div>

<div class="clearfix"></div>

<div class="add_to_cart"><a href="#">Добавить в корзину</a></div>

</li>

<li class="span3 item_pro item5">

<div class="sale">Распродажа</div>

<a href="#"><img src="img/pro5.jpg" alt=""></a>

<h5><a href="#">adidas F50 adizero, Predator LZ</a></h5>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id dui id arcu rhoncus viverra. Aenean id congue mauris, commodo consectetur dui. </p>

<div class="prize">4399.00</div><div class="old_prize">8049.00</div>

<div class="clearfix"></div>

<div class="add_to_cart"><a href="#">Добавить в корзину</a></div>

</li>

<li class="span3 item_pro">

<a href="#"><img src="img/pro6.jpg" alt=""></a>

<h5><a href="#">Mens Nike HyperVenom Phatal FG Soccer Cleats</a></h5>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id dui id arcu rhoncus viverra. Aenean id congue mauris, commodo consectetur dui. </p>

<div class="prize">3399.00</div>

<div class="clearfix"></div>

<div class="add_to_cart"><a href="#">Добавить в корзину</a></div>

</li>

<li class="span3 item_pro">

<a href="#"><img src="img/pro7.jpg" alt=""></a>

<h5><a href="#">New Mens Nike Tiempo Natural III FG</a></h5>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id dui id arcu rhoncus viverra. Aenean id congue mauris, commodo consectetur dui. </p>

<div class="prize">699.00</div>

<div class="clearfix"></div>

<div class="add_to_cart"><a href="#">Добавить в корзину</a></div>

</li>

<li class="span3 item_pro">

<a href="#"><img src="img/pro8.jpg" alt=""></a>

<h5><a href="#">New Mens Nike Tiempo Natural IV</a></h5>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id dui id arcu rhoncus viverra. Aenean id congue mauris, commodo consectetur dui. </p>

<div class="prize">849.00</div>

<div class="clearfix"></div>

<div class="add_to_cart"><a href="#">Добавить в корзину</a></div>

</li>

</ul>

</div>

</div>

<footer>

<div class="footer">

<div class="row-fluid">

<ul class="categories span3">

<li><a href="#">Одежда</a></li>

<li><a href="#">Обувь</a></li>

<li><a href="#">Мячи</a></li>

<li><a href="#">Аксессуары</a></li>

<li><a href="#">Клубная продукция</a></li>

<li><a href="#">Прочее</a></li>

</ul>

<ul class="categories span3">

<li class="bestsell"><a href="#">Лидеры продаж</a></li>

<li class="contacts"><a href="#">Контакты</a></li>

<li class="sitemap"><a href="#">Карта сайта</a></li>

</ul>

</div>

<div class="copyright">

&copy; 2014 Дизайн и разработка — <a href="http://vk.com/bsanchezb">Беляков Александр</a>

</div>

</div>

</footer>

</body>

</html>

Приложение 2

Исходный код слайдера

магазин сайт код слайдер

Исходный код слайдера на JavaScript:

!function ($) {

"use strict"; // jshint ;_;

var Carousel = function (element, options) {

this.$element = $(element)

this.options = options

this.options.pause == 'hover' && this.$element

.on('mouseenter', $.proxy(this.pause, this))

.on('mouseleave', $.proxy(this.cycle, this))

}

Carousel.prototype = {

cycle: function (e) {

if (!e) this.paused = false

this.options.interval

&& !this.paused

&& (this.interval = setInterval($.proxy(this.next, this), this.options.interval))