Файл: Разработка интернет магазина.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))

return this

}

, to: function (pos) {

var $active = this.$element.find('.item.active')

, children = $active.parent().children()

, activePos = children.index($active)

, that = this

if (pos > (children.length - 1) || pos < 0) return

if (this.sliding) {

return this.$element.one('slid', function () {

that.to(pos)

})

}

if (activePos == pos) {

return this.pause().cycle()

}

return this.slide(pos > activePos ? 'next' : 'prev', $(children[pos]))

}

, pause: function (e) {

if (!e) this.paused = true

if (this.$element.find('.next, .prev').length && $.support.transition.end) {

this.$element.trigger($.support.transition.end)

this.cycle()

}

clearInterval(this.interval)

this.interval = null

return this

}

, next: function () {

if (this.sliding) return

return this.slide('next')

}

, prev: function () {

if (this.sliding) return

return this.slide('prev')

}

, slide: function (type, next) {

var $active = this.$element.find('.item.active')

, $next = next || $active[type]()

, isCycling = this.interval

, direction = type == 'next' ? 'left' : 'right'

, fallback = type == 'next' ? 'first' : 'last'

, that = this

, e

this.sliding = true

isCycling && this.pause()

$next = $next.length ? $next : this.$element.find('.item')[fallback]()

e = $.Event('slide', {

relatedTarget: $next[0]

})

if ($next.hasClass('active')) return

if ($.support.transition && this.$element.hasClass('slide')) {

this.$element.trigger(e)

if (e.isDefaultPrevented()) return

$next.addClass(type)

$next[0].offsetWidth // force reflow

$active.addClass(direction)

$next.addClass(direction)

this.$element.one($.support.transition.end, function () {

$next.removeClass([type, direction].join(' ')).addClass('active')

$active.removeClass(['active', direction].join(' '))

that.sliding = false

setTimeout(function () { that.$element.trigger('slid') }, 0)

})

} else {

this.$element.trigger(e)

if (e.isDefaultPrevented()) return

$active.removeClass('active')

$next.addClass('active')

this.sliding = false

this.$element.trigger('slid')

}

isCycling && this.cycle()

return this

}

}

var old = $.fn.carousel

$.fn.carousel = function (option) {

return this.each(function () {

var $this = $(this)

, data = $this.data('carousel')

, options = $.extend({}, $.fn.carousel.defaults, typeof option == 'object' && option)

, action = typeof option == 'string' ? option : options.slide

if (!data) $this.data('carousel', (data = new Carousel(this, options)))

if (typeof option == 'number') data.to(option)

else if (action) data[action]()

else if (options.interval) data.cycle()

})

}

$.fn.carousel.defaults = {

interval: 5000

, pause: 'hover'

}

$.fn.carousel.Constructor = Carousel

$.fn.carousel.noConflict = function () {

$.fn.carousel = old

return this

}

$(document).on('click.carousel.data-api', '[data-slide]', function (e) {

var $this = $(this), href

, $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7

, options = $.extend({}, $target.data(), $this.data())

$target.carousel(options)

e.preventDefault()

})

}(window.jQuery)