Esta vez les mostramos Feature List, un pequeño script que nos permitira crear un slideshow de texto e imágenes, nos puede servir para múltiples usos, como por ejemplo un slideshow de noticias, contenido que queremos destacar o todo lo que se te pueda ocurrir.
Como ya los tenemos acostumbrados, les mostraremos el código por partes asi podrán personalizarlo a su gusto.
1. LLAMANDO AL JQUERY Y ESCRIBIENDO LOS SCRIPTS
|
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
|
<head>
<script type=“text/javascript” src=“http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js”></script>
<script type=“text/javascript” src=“jquery.featureList-1.0.0.js”></script>
<script language=“javascript”>
$(document).ready(function() {
$.featureList(
$(“#pestañas li a”),
$(“#ver_articulo li”), {
start_item : 1
}
);
/*
// Alternative
$(‘#tabs li a’).featureList({
$(‘#pestañas li a’).featureList({
ver_articulo : ‘#ver_articulo li’,
});
*/
});
</script>
</head>
|
2. CREANDO EL 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
|
<div id=“feature_list”>
<ul id=“pestañas”>
<li>
<a href=“javascript:;”>
<img src=“services.png” />
<h3>PESTAÑA Nº 1</h3>
<descripcion><span>Lorem ipsum dolor sit amet consect</span></descripcion>
</a>
</li>
<li>
<a href=“javascript:;”>
<img src=“programming.png” />
<h3>PESTAÑA Nº 2</h3>
<descripcion><span>Lorem ipsum dolor sit amet consect</span></descripcion>
</a>
</li>
<li>
<a href=“javascript:;”>
<img src=“applications.png” />
<h3>PESTAÑA Nº 3</h3>
<descripcion><span>Lorem ipsum dolor sit amet consect</span></descripcion>
</a>
</li>
</ul>
<ul id=“ver_articulo”>
<li>
<img src=“sample1.jpg” />
<a href=“#”>LEER MÁS</a>
</li>
<li>
<img src=“sample2.jpg” />
<a href=“#”>LEER MÁS</a>
</li>
<li>
<img src=“sample3.jpg” />
<a href=“#”>LEER MÁS</a>
</li>
</ul>
</div>
|
3. DANDO EL ESTILO CON CSS AL SLIDESHOW
|
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
|
h3 {
margin: 0;
padding: 7px 0 0 0;
font–size: 16px;
}
div#feature_list {
width: 750px;
height: 240px;
overflow: hidden;
position: relative;
}
div#feature_list ul {
position: absolute;
top: 0;
list–style: none;
padding: 0;
margin: 0;
}
ul#pestañas {
left: 0;
z–index: 2;
width: 320px;
}
ul#pestañas li {
font–size: 12px;
font–family: Arial;
}
ul#pestañas li img {
padding: 5px;
border: none;
float: left;
margin: 10px 10px 0 0;
}
ul#pestañas li a {
color: #222;
text–decoration: none;
display: block;
padding: 10px;
height: 60px;
outline: none;
}
ul#pestañas li a:hover {
text–decoration: underline;
}
ul#pestañas li a.current {
background: url(‘feature-tab-current.png’);
color: #FFF;
}
ul#pestañas li a.current:hover {
text–decoration: none;
cursor: default;
}
ul#ver_articulo {
right: 0;
width: 463px;
height: 240px;
position: relative;
}
ul#ver_articulo li {
position: absolute;
width: 463px;
height: 240px;
}
ul#ver_articulo li a {
position: absolute;
bottom: 10px;
right: 10px;
padding: 8px 12px;
text–decoration: none;
font–size: 11px;
color: #FFF;
background: #000;
–moz–border–radius: 5px;
}
ul#ver_articulo li a:hover {
background: #D33431;
}
a {
font–size: 12px;
outline–color: #888;
font–family:Tahoma;
text–decoration:none;
}
a:link {
text–decoration: none;
}
a:visited {
text–decoration: none;
}
a:hover {
text–decoration: none;
}
a:active {
text–decoration: none;
}
|
Ver Página Oficial