Форум Сайтостроение Веб-строительство

Простой слайдер на сайт

2
На сайте с 27.07.2016
Offline
29
22071989a
384

Подскажите пожалуйста есть вот такой простенький слайдер на сайт

<html>
<script>
var int;
var opac;
function nextimg(im){
if(int!=null) clearInterval(int);
var div=document.getElementById("div");
var i=0;
while(div.childNodes.nodeType!=1) i++;
i=0;
while(div.childNodes.nodeType!=1) i++;
currImg=div.childNodes;
opac=0;
currImg.style.opacity=opac;
currImg.style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity="+opac*100+")";
div.appendChild(currImg);
int=setInterval(setOpac,50); //здесь задаём интервал 100мс
}
function setOpac(){
if(parseInt(opac)>=1) {opac=0; clearInterval(int); return;}
opac+=0.07; //здесь задаём приращение прозрачности
currImg.style.opacity=opac;
currImg.style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity="+opac*100+")";
}
</script>
<body>
<div id="div" style="position:relative">
<img style="cursor:pointer; position:absolute;top:0px;left:0px;" onclick="nextimg(this);" src="https://pp.userapi.com/c845018/v845018894/10dcf/8IeqBu6ury4.jpg" />
<img style="cursor:pointer; position:absolute;top:0px;left:0px;" onclick="nextimg(this);" src="https://pp.userapi.com/c845018/v845018894/10dc5/5uu8FdpmWiY.jpg" />
<img style="cursor:pointer; position:absolute;top:0px;left:0px;" onclick="nextimg(this);" src="https://pp.userapi.com/c845018/v845018894/10dbb/Q34usBzOVnA.jpg" />
</div>
</body>
</html>

как сделать что бы картинки сами автоматом переключались?

Dim_K
На сайте с 11.07.2007
Offline
85
Dim_K
#1

nextimg переключает картинку. Соответственно, нужно добавить 

setInterval(nextimg, 5000)

исходник

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий