Блог web-разработчика | HTML+CSS, PHP, MySQL, JavaScript/jQuery

Фев/10

18

Контент-слайдер

1 коммент. » | Автор admin, рубрики JavaScript

Контент-слайдер MopSlider

Контент-слайдер MopSlider

Контент-слайдер – это универсальный инструмент для тех моментов, когда необходимо показать больше чем казалось можно уместить.

Вот пример того что получилось.

Для реализации этого контент-слайдера я воспользовался JavaScript-плагином MopSlider к библиотеке jQuery. Скачать этот плагин можно на офсайте автора mopstudio также там есть инструкция на английском языке.

Идея

Идея слайдера состоит в том, что в один блок <div> помещаются <div>-блоки с нужными нам элементами (к примеру я взял телевизоры) и при помощи полосы прокрутки мы будем перемещать их.

Создание xHTML

Для одного блока с телевизором я написал вот такую разметку:

1
2
3
4
5
6
7
8

<div class="product">
	<div class="pic"><img src="img/content/1.png" width="128" height="128" alt="Dell Vostro A860" /></div>
	<div class="title">32&quot; LCD Philips 32PFL7603D/12</div>
	<div class="price">$2500</div>
	<div class="description">32" ЖК телевизор от Philips</div>
	<div class="link"><a href="http://www.consumer.philips.com/" target="blank">Узнать больше</a></div>
	<div class="clear"></div>
</div>

Пять таких блоков я поместил в блок “slider”:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

<div id="slider">
	<div class="product">
		<div class="pic"><img src="img/content/1.png" width="128" height="128" alt="Dell Vostro A860" /></div>
		<div class="title">32&quot; LCD Philips 32PFL7603D/12</div>
		<div class="price">$2500</div>
		<div class="description">32" ЖК телевизор от Philips</div>
        <div class="link"><a href="http://www.consumer.philips.com/" target="blank">Узнать больше</a></div>
		<div class="clear"></div>
	</div>
 
	<div class="product">
		<div class="pic"><img src="img/content/2.png" width="128" height="128" alt="Sony Vaio VGN-FW31J" /></div>
		<div class="title">32&quot; LCD Samsung LE32A558P3F</div>
		<div class="price">$2000</div>
		<div class="description">Новая 32&quot;-модель от Samsung</div>
		<div class="link"><a href="http://sony.com/" target="blank">Узнать больше</a></div>
		<div class="clear"></div>
	</div>
 
	<div class="product">
		<div class="pic"><img src="img/content/3.png" width="128" height="128" alt="Lenovo 3000 N200" /></div>
		<div class="title">NEW! 42&quot; LCD Philips 42PFL9803H</div>
		<div class="price">$3000</div>
		<div class="description">42&quot; Full HD телевизор от Philips</div>
		<div class="link"><a href="http://www.consumer.philips.com/" target="blank">Узнать больше</a></div>
		<div class="clear"></div>
	</div>
 
	<div class="product">
		<div class="pic"><img src="img/content/4.png" width="128" height="128" alt="Acer Aspire 5738G" /></div>
		<div class="title">40&quot; Sony KLV-40V550A</div>
		<div class="price">$1500</div>
		<div class="description">Оптимальное соотношение цена/качество от Sony</div>
		<div class="link"><a href="http://acer.com/" target="blank">Узнать больше</a></div>
		<div class="clear"></div>
	</div>
 
	<div class="product">
		<div class="pic"><img src="img/content/5.png" width="128" height="128" alt="MacBook Air" /></div>
		<div class="title">37&quot; Toshiba 37CV500PR</div>
		<div class="price">$1000</div>
		<div class="description">Бюджетный телевизор REGZA от Toshiba</div>
		<div class="link"><a href="http://tv.toshiba.com.ru/" target="blank">Узнать больше</a></div>
		<div class="clear"></div>
	</div>
</div>

На этом закончил разметку слайдера с его пятью элементами.

Прописываем стили

Вот такая таблица стилей получилась у меня (style.css):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109

body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
	margin:0px;
	padding:0px;
}
 
body{
	color:white;
	font-size:13px;
	background: #41677E;
	font-family:Arial, Helvetica, sans-serif;
}
 
h1{
	color:white;
	font-size:28px;
	font-weight:bold;
	font-family:"Trebuchet MS",Arial, Helvetica, sans-serif;
}
 
h2{
	font-family:"Arial Narrow",Arial,Helvetica,sans-serif;
	font-size:10px;
	font-weight:normal;
	letter-spacing:1px;
	padding-left:2px;
	text-transform:uppercase;
	white-space:nowrap;
}
 
.clear{
	clear:both;
}
 
#main{
	width:800px;
	margin:0 auto;
}
 
.container,.titles{
	color:white;
	margin-top:30px;
	width:100%;
	overflow:hidden;
 
	background:#2C4554;
	padding:20px 10px 10px;
 
	-moz-border-radius:12px;
	-khtml-border-radius: 12px;
	-webkit-border-radius: 12px;
	border-radius:12px;
}
 
.titles{
	width:165px;
	padding:10px 15px;
	height:55px;
}
 
.product{
	width:370px;
	height:150px;
	background:url(img/product_bg.png) repeat-x;
	padding-top:10px;
	float:left;
 
	-moz-border-radius:12px;
	-khtml-border-radius: 12px;
	-webkit-border-radius: 12px;
	border-radius:12px;
}
 
.product .pic{
	float:left;
	width:128px;
	height:128px;
	padding:0 10px 5px;
	margin-top:-15px;
}
 
.product .link,.product .price{
	font-size:10px;
	text-transform:uppercase;
	padding:4px 0;
}
 
.product .price{
	color:#CCCCCC;
}
 
.product .title{
	font-size:16px;
	font-weight:bold;
}
 
a, a:visited {
	color:#00BBFF;
	text-decoration:none;
	outline:none;
}
 
a:hover{
	text-decoration:underline;
}
 
.footer{
	text-align:center;
	padding:10px;
}

Настраиваем слайдер

Скрипт для настройки MopSlider я решил вынести со страницы в отдельный JS-файл (script.js), который подключил в шапке index.html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

$(document).ready(function(){
 
	$("#slider").mopSlider({
		'w':800,
		'h':150,
		'sldW':500,
		'btnW':200,
		'itemMgn':20,
		'indi':"Больше чем кажется",
		'type':'tutorialzine',
		'shuffle':0
	});
 
});

Готовый файл index.html

Для корректного отображения прозрачных png-картинок в IE6 я воспользовался jQuery-плагином pngFix.
После подключения всех js-скриптов и CSS-таблицы файл Index.html стал выглядеть вот так:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=win1251" />
<title>Оригинальный контент-слайдер</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.pngFix-1.2.js"></script>
<script type="text/javascript" src="js/ui.core-1.7.2.js"></script>
<script type="text/javascript" src="js/ui.draggable-1.7.2.js"></script>
 
<script type="text/javascript" src="mopSlider/mopSlider-2.4.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
 
<body>
 
<div id="main">
	<div class="titles">
	<h1>Телевизоры</h1>
    <h2>Новинки сезона</h2>
 
    </div>
 
	<div class="container">
 
    	<div id="slider">
     		<div class="product">
				<div class="pic"><img src="img/content/1.png" width="128" height="128" alt="?Dell Vostro A860" /></div>
				<div class="title">32&quot; LCD Philips 32PFL7603D/12</div>
				<div class="price">$2500</div>
				<div class="description">32" ЖК телевизор от Philips</div>
		        <div class="link"><a href="http://www.consumer.philips.com/" target="blank">Узнать больше</a></div>
				<div class="clear"></div>
			</div>
 
			<div class="product">
				<div class="pic"><img src="img/content/2.png" width="128" height="128" alt="Sony Vaio VGN-FW31J" /></div>
				<div class="title">32&quot; LCD Samsung LE32A558P3F</div>
    			<div class="price">$2000</div>
				<div class="description">Новая 32&quot;-модель от Samsung</div>
				<div class="link"><a href="http://sony.com/" target="blank">Узнать больше</a></div>
				<div class="clear"></div>
			</div>
 
			<div class="product">
				<div class="pic"><img src="img/content/3.png" width="128" height="128" alt="Lenovo 3000 N200" /></div>
				<div class="title">NEW! 42&quot; LCD Philips 42PFL9803H</div>
				<div class="price">$3000</div>
				<div class="description">42&quot; Full HD телевизор от Philips</div>
				<div class="link"><a href="http://www.consumer.philips.com/" target="blank">Узнать больше</a></div>
				<div class="clear"></div>
			</div>
 
			<div class="product">
				<div class="pic"><img src="img/content/4.png" width="128" height="128" alt="Acer Aspire 5738G" /></div>
				<div class="title">40&quot; Sony KLV-40V550A</div>
				<div class="price">$1500</div>
				<div class="description">Оптимальное соотношение цена/качество от Sony</div>
				<div class="link"><a href="http://acer.com/" target="blank">Узнать больше</a></div>
				<div class="clear"></div>
			</div>
 
			<div class="product">
                <div class="pic"><img src="img/content/5.png" width="128" height="128" alt="MacBook Air" /></div>
				<div class="title">37&quot; Toshiba 37CV500PR</div>
				<div class="price">$1000</div>
				<div class="description">Бюджетный телевизор REGZA от Toshiba</div>
				<div class="link"><a href="http://tv.toshiba.com.ru/" target="blank">Узнать больше</a></div>
				<div class="clear"></div>
			</div>
 
   		</div>
 
    	<div class="clear"></div>
    </div>
    <div class="container footer"><a href="http://www.web4develop.ru">web4develop.ru</a></div>
</div>
 
</body>
</html>

Готовый результат можно скачать нажав здесь.

, , ,

RSS Feed

Есть 1 комментарий. к Контент-слайдер

Kyle Nopeman | 14 Май 2011 | 11:02

Я считаю, что Вы не правы. Я уверен. Пишите мне в PM….

Вот пример того что получилось…..

Написать комментарий

»

Найти!

Дизайн devolux
Наверх

Публикация материлов с сайта только с указанием активной ссылки на источник. web4develop.ru. 2010 год.