Проблема со сменой z-Index
Задача такая: необходимо написать "слайдер", без использования css, jQuery. Я решил реализовать это с помощью смены z-index у блоков-элементов слайдера. Вроде всё верно написал, но слайдер не работает:help:
html и css
<html>
<head>
<style type="text/css">
div.slider {top: 100px;
left: 100px}
div.i {position: fixed;
display: block;
width: 80%;
margin: 5% 10% 0 10%;
height: 30%}
div.i img {width: 100%;
height: 100%}
div.description {color: white;
bottom: 0;
width: 100%;
background: rgb(0,0,0);
height: 30%;}
div.decription p{margin: 10px}
div.prev {position: fixed;
left: 7%;
top: 25%}
div.next {position: fixed;
right: 7%;
top: 25%}
</style>
<script type="text/javascript" src="aslider.js"></script>
</head>
<body>
<div class="prev"><a href="#" id="pr" onclick="viewdiv(this.id)">Back</a></div>
<div>
<div class="i" id="d0"><img src="1.jpg"><div class="description">1</div></div>
<div class="i" id="d1"><img src="2.jpg"><div class="description">2</div></div>
<div class="i" id="d2"><img src="3.jpg"><div class="description">3</div></div>
<div class="i" id="d3"><img src="4.jpg"><div class="description">4</div></div>
<div class="i" id="d4"><img src="5.jpg"><div class="description">5</div></div>
<div class="i" id="d5"><img src="6.jpg"><div class="description">6</div></div>
<div class="i" id="d6"><img src="7.jpg"><div class="description">7</div></div>
<div class="i" id="d7"><img src="8.jpg"><div class="description">8</div></div>
<div class="i" id="d8"><img src="9.jpg"><div class="description">9</div></div>
<div class="i" id="d9"><img src="10.jpg"><div class="description">10</div></div>
<div class="i" id="d10"><img src="11.jpeg"><div class="description">11</div></div>
<div class="i" id="d11"><img src="12.jpg"><div class="description">12</div></div>
</div>
<div class="next"><a href="#" id="ne" onclick="viewdiv(this.id)">Next</a></div>
</body>
</hmtl>
Скрипт aslider.js
var i = 11;
var id;
function viewdiv(a)
{
if(a=="pr")
{
if(i==-1) i=11;
i--;
id = 'd'+i;
el = document.getElementById(id);
if(i==0)
{
el.style.zindex = "2";
i = 12;
}
else el.style.zindex = "2"
}
else
{
if(i==12) i=0;
i++
id='d'+i;
var el = document.getElementById(id);
if(i==11)
{
el.style.zindex="2";
i=-1;
}
else el.style.zindex="2";
}
}
|
Цитата:
- Не верно написал - Идея не прошла |
0nline, упрощайте идею, то бишь скрипт, начиная с передачи в функцию не id кнопки, а направление, zIndex, и т.д.
|
Отлично, а по существу есть что-то? Поконкретнее, в чём проблема?
|
Слайдер без jquery
0nline,
<html>
<head>
<style type="text/css">
div.slider {top: 100px;
left: 100px}
div.i {position: fixed;
display: block;
width: 80%;
margin: 5% 10% 0 10%;
height: 30%}
div.i img {width: 100%;
height: 100%}
div.description {color: white;
bottom: 0;
width: 100%;
background: rgb(0,0,0);
height: 30%;}
div.decription p{margin: 10px}
div.prev {position: fixed;
left: 7%;
top: 25%}
div.next {position: fixed;
right: 7%;
top: 25%}
</style>
<script>
var i = 11;
var id, el;
function viewdiv(a)
{
id = 'd'+i;
el = document.getElementById(id);
el.style.zIndex="1";
i += a=="pr" ? 1 : -1;
i==12 && (i = 0);
i==-1 && (i = 11);
id = 'd'+i;
el = document.getElementById(id);
el.style.zIndex="2";
}
</script>
</head>
<body>
<div class="prev"><a href="#" id="pr" onclick="viewdiv(this.id);return false">Back</a></div>
<div>
<div class="i" id="d0"><img src="1.jpg"><div class="description">1</div></div>
<div class="i" id="d1"><img src="2.jpg"><div class="description">2</div></div>
<div class="i" id="d2"><img src="3.jpg"><div class="description">3</div></div>
<div class="i" id="d3"><img src="4.jpg"><div class="description">4</div></div>
<div class="i" id="d4"><img src="5.jpg"><div class="description">5</div></div>
<div class="i" id="d5"><img src="6.jpg"><div class="description">6</div></div>
<div class="i" id="d6"><img src="7.jpg"><div class="description">7</div></div>
<div class="i" id="d7"><img src="8.jpg"><div class="description">8</div></div>
<div class="i" id="d8"><img src="9.jpg"><div class="description">9</div></div>
<div class="i" id="d9"><img src="10.jpg"><div class="description">10</div></div>
<div class="i" id="d10"><img src="11.jpeg"><div class="description">11</div></div>
<div class="i" id="d11"><img src="12.jpg"><div class="description">12</div></div>
</div>
<div class="next"><a href="#" id="ne" onclick="viewdiv(this.id); return false">Next</a></div>
</body>
</html>
|
Спасибо большое, работает)
Буду разбираться теперь с кодом, кратко всё очень, в принципе, большую часть операторов я понял, спасибо. До JavaScript прогал на c++ поэтому пишу с большим количеством условий. |
Цитата:
|
| Часовой пояс GMT +3, время: 22:54. |