Упрощение слайдеров
26.09.2012, 11:23. Показов 797. Ответов 5
У меня есть 3 слайдера. Я написал такой код для их прокручивания, просто использовал счетчик, для шагов влево и вправо. Но у меня будут ещё неизвестно сколько слайдеров. Как можно написать 1 код который бы работал везде, без шага?
| HTML5 | 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
| <div id="sliders">
<div id="slidersNew"> <!-- #slidersNew -->
<div id="slidersNewLeft" class="arrowLeft"></div>
<div class="sliderMain">
<div id="labelNEW">123!</div>
<span id="sliderMainLabel">123</span>
<div id="slidersNewItems">
<a href="index.html"><img src="https://www.cyberforum.ru/images/slider1.jpg"></a><div><a href="index.html">Светильник<br />точечный<br />ELK-001D-6W<br /></a><span>$13,20</span></div>
<a href="index.html"><img src="https://www.cyberforum.ru/images/slider2.jpg"></a><div><a href="index.html">Светильник<br />точечный<br />ENK006-5W<br /></a><span>$6,80</span></div>
<a href="index.html"><img src="https://www.cyberforum.ru/images/slider3.jpg"></a><div><a href="index.html">Трубка<br />Т8-60*-120**<br />8-01<br /></a><span>$12,30</span></div>
<a href="index.html"><img src="https://www.cyberforum.ru/images/slider3.jpg"></a><div><a href="index.html">Трубка<br />Т8-60*-120**<br />8-01<br /></a><span>$12,30</span></div>
<a href="index.html"><img src="https://www.cyberforum.ru/images/slider1.jpg"></a><div><a href="index.html">Светильник<br />точечный<br />ELK-001D-6W<br /></a><span>$13,20</span></div>
<a href="index.html"><img src="https://www.cyberforum.ru/images/slider2.jpg"></a><div><a href="index.html">Светильник<br />точечный<br />ENK006-5W<br /></a><span>$6,80</span></div>
<a href="index.html"><img src="https://www.cyberforum.ru/images/slider3.jpg"></a><div><a href="index.html">Трубка<br />Т8-60*-120**<br />8-01<br /></a><span>$12,30</span></div>
<a href="index.html"><img src="https://www.cyberforum.ru/images/slider3.jpg"></a><div><a href="index.html">Трубка<br />Т8-60*-120**<br />8-01<br /></a><span>$12,30</span></div>
<a href="index.html"><img src="https://www.cyberforum.ru/images/slider1.jpg"></a><div><a href="index.html">Светильник<br />точечный<br />ELK-001D-6W<br /></a><span>$13,20</span></div>
<a href="index.html"><img src="https://www.cyberforum.ru/images/slider2.jpg"></a><div><a href="index.html">Светильник<br />точечный<br />ENK006-5W<br /></a><span>$6,80</span></div>
<a href="index.html"><img src="https://www.cyberforum.ru/images/slider3.jpg"></a><div><a href="index.html">Трубка<br />Т8-60*-120**<br />8-01<br /></a><span>$12,30</span></div>
<a href="index.html"><img src="https://www.cyberforum.ru/images/slider3.jpg"></a><div><a href="index.html">Трубка<br />Т8-60*-120**<br />8-01<br /></a><span>$12,30</span></div>
</div>
</div> <!-- .sliderMain -->
<div id="slidersNewRight" class="arrowRight"></div>
</div>
<div id="slidersLead">
<div id="slidersLeadLeft" class="arrowLeft"></div>
<div class="sliderMain">
<div id="stars"></div>
<span id="slidersLeadLabel">123</span>
<div id="slidersLeadItems">
<img src="https://www.cyberforum.ru/images/slider1.jpg"><div><a href="index.html">Светильник<br />точечный<br />ELK-001D-6W<br /></a><span>$13,20</span></div>
<img src="https://www.cyberforum.ru/images/slider2.jpg"><div><a href="index.html">Светильник<br />точечный<br />ENK006-5W<br /></a><span>$6,80</span></div>
<img src="https://www.cyberforum.ru/images/slider3.jpg"><div><a href="index.html">Трубка<br />Т8-60*-120**<br />8-01<br /></a><span>$12,30</span></div>
<img src="https://www.cyberforum.ru/images/slider3.jpg"><div><a href="index.html">Трубка<br />Т8-60*-120**<br />8-01<br /></a><span>$12,30</span></div>
<img src="https://www.cyberforum.ru/images/slider1.jpg"><div><a href="index.html">Светильник<br />точечный<br />ELK-001D-6W<br /></a><span>$13,20</span></div>
<img src="https://www.cyberforum.ru/images/slider2.jpg"><div><a href="index.html">Светильник<br />точечный<br />ENK006-5W<br /></a><span>$6,80</span></div>
<img src="https://www.cyberforum.ru/images/slider3.jpg"><div><a href="index.html">Трубка<br />Т8-60*-120**<br />8-01<br /></a><span>$12,30</span></div>
<img src="https://www.cyberforum.ru/images/slider3.jpg"><div><a href="index.html">Трубка<br />Т8-60*-120**<br />8-01<br /></a><span>$12,30</span></div>
<img src="https://www.cyberforum.ru/images/slider1.jpg"><div><a href="index.html">Светильник<br />точечный<br />ELK-001D-6W<br /></a><span>$13,20</span></div>
<img src="https://www.cyberforum.ru/images/slider2.jpg"><div><a href="index.html">Светильник<br />точечный<br />ENK006-5W<br /></a><span>$6,80</span></div>
<img src="https://www.cyberforum.ru/images/slider3.jpg"><div><a href="index.html">Трубка<br />Т8-60*-120**<br />8-01<br /></a><span>$12,30</span></div>
<img src="https://www.cyberforum.ru/images/slider3.jpg"><div><a href="index.html">Трубка<br />Т8-60*-120**<br />8-01<br /></a><span>$12,30</span></div>
</div>
</div> <!-- .sliderMain -->
<div id="slidersLeadRight" class="arrowRight"></div>
</div> <!-- #slidersLead -->
<div id="slidersSale">
<div id="slidersSaleLeft" class="arrowLeft"></div>
<div class="sliderMain">
<div id="prots"></div>
<span id="slidersSaleLabel">123</span>
<div id="slidersSaleItems">
<img src="https://www.cyberforum.ru/images/slider1.jpg"><div><a href="index.html">Светильник<br />точечный<br />ELK-001D-6W<br /></a><span>$13,20</span></div>
<img src="https://www.cyberforum.ru/images/slider2.jpg"><div><a href="index.html">Светильник<br />точечный<br />ENK006-5W<br /></a><span>$6,80</span></div>
<img src="https://www.cyberforum.ru/images/slider3.jpg"><div><a href="index.html">Трубка<br />Т8-60*-120**<br />8-01<br /></a><span>$12,30</span></div>
<img src="https://www.cyberforum.ru/images/slider3.jpg"><div><a href="index.html">Трубка<br />Т8-60*-120**<br />8-01<br /></a><span>$12,30</span></div>
<img src="https://www.cyberforum.ru/images/slider1.jpg"><div><a href="index.html">Светильник<br />точечный<br />ELK-001D-6W<br /></a><span>$13,20</span></div>
<img src="https://www.cyberforum.ru/images/slider2.jpg"><div><a href="index.html">Светильник<br />точечный<br />ENK006-5W<br /></a><span>$6,80</span></div>
<img src="https://www.cyberforum.ru/images/slider3.jpg"><div><a href="index.html">Трубка<br />Т8-60*-120**<br />8-01<br /></a><span>$12,30</span></div>
<img src="https://www.cyberforum.ru/images/slider3.jpg"><div><a href="index.html">Трубка<br />Т8-60*-120**<br />8-01<br /></a><span>$12,30</span></div>
<img src="https://www.cyberforum.ru/images/slider1.jpg"><div><a href="index.html">Светильник<br />точечный<br />ELK-001D-6W<br /></a><span>$13,20</span></div>
<img src="https://www.cyberforum.ru/images/slider2.jpg"><div><a href="index.html">Светильник<br />точечный<br />ENK006-5W<br /></a><span>$6,80</span></div>
<img src="https://www.cyberforum.ru/images/slider3.jpg"><div><a href="index.html">Трубка<br />Т8-60*-120**<br />8-01<br /></a><span>$12,30</span></div>
<img src="https://www.cyberforum.ru/images/slider3.jpg"><div><a href="index.html">Трубка<br />Т8-60*-120**<br />8-01<br /></a><span>$12,30</span></div>
</div>
</div> <!-- .sliderMain -->
<div id="slidersSaleRight" class="arrowRight"></div>
</div> <!-- #slidersSale -->
</div> <!-- #sliders --> |
|
| 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
| #sliders {position:relative;overflow:hidden;width:560px;height:350px;top:-620px;left:0px;}
#slidersCat {position:relative;overflow:hidden;width:560px;height:350px;top:-930px;left:0px;}
#slidersNew {position:relative;overflow:hidden;width:558px;height:110px;top:0px;left:0px;margin-bottom:7px;border:1px #d2d2d2 solid;border-radius:5px 5px 5px 5px;-moz-border-radius:5px 5px 5px 5px;-webkit-border-radius:5px 5px 5px 5px;}
#labelNEW {position:relative;overflow:hidden;width:65px;height:21px;background:#8dc63f;border-bottom:1px #bbdd8c solid;border-right:1px #bbdd8c solid;border-radius:0px 0px 5px 0px;-moz-border-radius:0px 0px 5px 0px;-webkit-border-radius:0px 0px 5px 0px;font-family:Tahoma, Geneva, sans-serif;font-size:13pt;color:#fff;font-weight:bold;padding-top:4px;padding-left:15px;}
#sliderMainLabel {position:relative;overflow:hidden;font-family:Tahoma, Geneva, sans-serif;font-size:10pt;color:#000;font-weight:bold;top: -22px;left: 88px}
#slidersLead {position:relative;overflow:hidden;width:558px;height:110px;top:0px;left:0px;margin-bottom:7px;border:1px #d2d2d2 solid;border-radius:5px 5px 5px 5px;-moz-border-radius:5px 5px 5px 5px;-webkit-border-radius:5px 5px 5px 5px;}
#stars {position:relative;overflow:hidden;width:76px;height:13px;top:0px;left:0px;background:url(../images/stars.png) no-repeat;top: 6px;left: 5px}
#slidersLeadLabel {position:relative;overflow:hidden;font-family:Tahoma, Geneva, sans-serif;font-size:10pt;color:#000;font-weight:bold;top:-9px;left:85px;}
#slidersSale {position:relative;overflow:hidden;width:558px;height:110px;top:0px;left:0px;border:1px #d2d2d2 solid;border-radius:5px 5px 5px 5px;-moz-border-radius:5px 5px 5px 5px;-webkit-border-radius:5px 5px 5px 5px;}
#prots {position:relative;overflow:hidden;width:24px;height:24px;top:5px;left:5px;background:url(../images/prots.png) no-repeat;}
#slidersSaleLabel {position:relative;overflow:hidden;font-family:Tahoma, Geneva, sans-serif;font-size:10pt;color:#000;font-weight:bold;top: -17px;left: 35px;}
.arrowLeft {position:relative;overflow:hidden;width:21px;height:110px;cursor:pointer;background-color:#defea7;background-image:url(../images/slidersArrowLeft.png);background-position:center;background-repeat:no-repeat;top:0px;left:0px;border-radius:5px 0px 0px 5px;-moz-border-radius:5px 0px 0px 5px;-webkit-border-radius:5px 0px 0px 5px;}
.sliderMain {position:relative;overflow:hidden;width:517px;height:110px;background-color:white;top: -110px;left: 21px;}
.arrowRight {position:relative;overflow:hidden;width:21px;height:110px;cursor:pointer;background-color:#defea7;background-image:url(../images/slidersArrowRight.png);background-position:center;background-repeat:no-repeat;top: -220px;left: 538px;border-radius:0px 5px 5px 0px;-moz-border-radius:0px 5px 5px 0px;-webkit-border-radius:0px 5px 5px 0px;}
#slidersNewItems {position:relative;overflow:hidden;width:3000px;height:65px;top:-7px;left:0px;}
#slidersNewItems img {position:relative;overflow:hidden; float:left;margin-right:5px;}
#slidersNewItems div {position:relative;overflow:hidden;font-family:Tahoma, Geneva, sans-serif;height:62px;;font-size:7pt;color:#000;margin-top: 3px;float:left;margin-right: 4px;}
#slidersNewItems a:link {font-family:Tahoma, Geneva, sans-serif;font-size:7pt;color:#000;text-decoration:none;}
#slidersNewItems a:visited {font-family:Tahoma, Geneva, sans-serif;font-size:7pt;color:#000;text-decoration:none;}
#slidersNewItems a:active {font-family:Tahoma, Geneva, sans-serif;font-size:7pt;color:#006633;text-decoration:none;}
#slidersNewItems a:hover {font-family:Tahoma, Geneva, sans-serif;font-size:7pt;color:#006633;text-decoration:none;}
#slidersNewItems div span {position:relative;overflow:hidden;font-family:Tahoma, Geneva, sans-serif;font-size:10pt;color:#006633;font-weight:bold;top: 6px;}
#slidersLeadItems {position:relative;overflow:hidden;width:3000px;height:65px;top:6px;left:0px;}
#slidersLeadItems img {position:relative;overflow:hidden; float:left;margin-right:5px;}
#slidersLeadItems div {position:relative;overflow:hidden;font-family:Tahoma, Geneva, sans-serif;height:62px;;font-size:7pt;color:#000;margin-top: 3px;float:left;margin-right: 4px;}
#slidersLeadItems a:link {font-family:Tahoma, Geneva, sans-serif;font-size:7pt;color:#000;text-decoration:none;}
#slidersLeadItems a:visited {font-family:Tahoma, Geneva, sans-serif;font-size:7pt;color:#000;text-decoration:none;}
#slidersLeadItems a:active {font-family:Tahoma, Geneva, sans-serif;font-size:7pt;color:#006633;text-decoration:none;}
#slidersLeadItems a:hover {font-family:Tahoma, Geneva, sans-serif;font-size:7pt;color:#006633;text-decoration:none;}
#slidersLeadItems div span {position:relative;overflow:hidden;font-family:Tahoma, Geneva, sans-serif;font-size:10pt;color:#006633;font-weight:bold;top: 6px;}
#slidersSaleItems {position:relative;overflow:hidden;width:3000px;height:65px;top:-5px;left:0px;}
#slidersSaleItems img {position:relative;overflow:hidden; float:left;margin-right:5px;}
#slidersSaleItems div {position:relative;overflow:hidden;font-family:Tahoma, Geneva, sans-serif;height:62px;;font-size:7pt;color:#000;margin-top: 3px;float:left;margin-right: 4px;}
#slidersSaleItems a:link {font-family:Tahoma, Geneva, sans-serif;font-size:7pt;color:#000;text-decoration:none;}
#slidersSaleItems a:visited {font-family:Tahoma, Geneva, sans-serif;font-size:7pt;color:#000;text-decoration:none;}
#slidersSaleItems a:active {font-family:Tahoma, Geneva, sans-serif;font-size:7pt;color:#006633;text-decoration:none;}
#slidersSaleItems a:hover {font-family:Tahoma, Geneva, sans-serif;font-size:7pt;color:#006633;text-decoration:none;}
#slidersSaleItems div span {position:relative;overflow:hidden;font-family:Tahoma, Geneva, sans-serif;font-size:10pt;color:#006633;font-weight:bold;top: 6px;} |
|
| JavaScript | 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
| var a = 100;
$('#slidersNewLeft').click(function(){
if (a != 100) {
$('#slidersNewItems').animate({left:'+=515',}, 500);
a--;
}
});
$('#slidersNewRight').click(function(){
if (a != 102) {
$('#slidersNewItems').animate({left:'-=515',}, 500);
a++;
}
});
var b = 100;
$('#slidersLeadLeft').click(function(){
if (b != 100) {
$('#slidersLeadItems').animate({left:'+=515',}, 500);
b--;
}
});
$('#slidersLeadRight').click(function(){
if (b != 102) {
$('#slidersLeadItems').animate({left:'-=515',}, 500);
b++;
}
});
var c = 100;
$('#slidersSaleLeft').click(function(){
if (c != 100) {
$('#slidersSaleItems').animate({left:'+=515',}, 500);
c--;
}
});
$('#slidersSaleRight').click(function(){
if (c != 102) {
$('#slidersSaleItems').animate({left:'-=515',}, 500);
c++;
}
}); |
|
Я новичок и поэтому мне тяжело ещё писать свой универсальный код.
0
|
(
Сообщение от qw3qw3qw3r
