Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 17.01.2015, 17:41   #1
NetSpace
Участник клуба
 
Аватар для NetSpace
 
Регистрация: 03.06.2009
Сообщений: 1,792
По умолчанию Заменить клик мышкой на счётчик

Есть код, позволяющий менять картинки на форме по щелчку мыши. Как избавится от привязки к мыши и перейти к автоматической смене?
Код HTML:
<html>
<script>
var currImg;
var int;
var opac;
function nextimg(im){
	if(int!=null) clearInterval(int);
	var div=document.getElementById("div");
	var i=0;
	while(div.childNodes[i].nodeType!=1) i++;
	i=0;
	while(div.childNodes[i].nodeType!=1) i++;
	currImg=div.childNodes[i];
	opac=0;
	currImg.style.opacity=opac;
	currImg.style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity="+opac*100+")";
	div.appendChild(currImg);
	int=setInterval(setOpac,100); //здесь задаём интервал 100мс
}
function setOpac(){
	if(parseInt(opac)>=1) {opac=0; clearInterval(int); return;}
	opac+=0.1; //здесь задаём приращение прозрачности
	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="http://img.lenta.ru/news/2009/07/27/year/picturesmall.jpg" />
<img style="cursor:pointer; position:absolute;top:0px;left:0px;" onclick="nextimg(this);" src="http://img.lenta.ru/news/2009/07/27/meet/picturesmall.jpg" />
<img style="cursor:pointer; position:absolute;top:0px;left:0px;" onclick="nextimg(this);" src="http://img.lenta.ru/news/2009/07/28/romanchuk/picturesmall.jpg" />
</div>
</body>
</html>
Программирование - это единственный способ заставить компьютер делать то, что тебе хочется, а не то, что приходится.
NetSpace вне форума Ответить с цитированием
Старый 17.01.2015, 18:18   #2
Stilet
Белик Виталий :)
Старожил
 
Аватар для Stilet
 
Регистрация: 23.07.2007
Сообщений: 57,792
По умолчанию

С потолка:
Код:
var imgID=0;
var div=document.getElementById("div");

function nextimg(){
	currImg=div.childNodes[imgID++];
	opac=0;
	currImg.style.opacity=opac;
	currImg.style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity="+opac*100+")";
	div.appendChild(currImg);
	int=setInterval(setOpac,100); //здесь задаём интервал 100мс
 
 if(imgID=div.childNodes.length) imgID=0;
	setInterval(nextimg,1000); //здесь задаём интервал 1000мс для смены картинки
}
I'm learning to live...
Stilet вне форума Ответить с цитированием
Старый 17.01.2015, 18:48   #3
NetSpace
Участник клуба
 
Аватар для NetSpace
 
Регистрация: 03.06.2009
Сообщений: 1,792
По умолчанию

теперь вообще не меняется и на мышь не реагирует.
Код:
<html>

<script>
var imgID=0;
var opac;
var int;
var div=document.getElementById("div");
var currImg;
function nextimg(){
	currImg=div.childNodes[imgID++];
	opac=0;
	currImg.style.opacity=opac;
	currImg.style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity="+opac*100+")";
	div.appendChild(currImg);
	int=setInterval(setOpac,100); //здесь задаём интервал 100мс
        if(imgID=div.childNodes.length) imgID=0;
	setInterval(nextimg,1000); //здесь задаём интервал 1000мс для смены картинки
}
function setOpac(){
	if(parseInt(opac)>=1) {opac=0; clearInterval(int); return;}
	opac+=0.1; //здесь задаём приращение прозрачности
	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="1.jpg" />
<img style="cursor:pointer; position:absolute;top:0px;left:0px;" onclick="nextimg(this);" src="2.jpg" />
<img style="cursor:pointer; position:absolute;top:0px;left:0px;" onclick="nextimg(this);" src="3.jpg" />
</div>
</body>
</html>
Программирование - это единственный способ заставить компьютер делать то, что тебе хочется, а не то, что приходится.

Последний раз редактировалось NetSpace; 17.01.2015 в 18:51.
NetSpace вне форума Ответить с цитированием
Старый 17.01.2015, 20:06   #4
NetSpace
Участник клуба
 
Аватар для NetSpace
 
Регистрация: 03.06.2009
Сообщений: 1,792
По умолчанию

всё, разобрался. спасибо. тему можно закрывать.
Программирование - это единственный способ заставить компьютер делать то, что тебе хочется, а не то, что приходится.
NetSpace вне форума Ответить с цитированием
Старый 17.01.2015, 20:21   #5
Stilet
Белик Виталий :)
Старожил
 
Аватар для Stilet
 
Регистрация: 23.07.2007
Сообщений: 57,792
По умолчанию

Ну я все равно покажу примером что имел ввиду:
Код:
<html>

<script>
var imgID=0;
var opac;
var int;
var div;
var currImg;
var imgs;

function nextimg(){
    if (imgID>=imgs.length) imgID=0;
    if (currImg) {
     currImg.style.visibility='hidden';
    } 
	 currImg=imgs[imgID++];
     currImg.style.visibility='visible';
	setInterval(nextimg,1000); //здесь задаём интервал 1000мс для смены картинки
}

function ifload(){
    div=document.getElementById("div");
    imgs=div.getElementsByTagName('img')
    nextimg();
    
}
</script>

<body onload="ifload()">
<div id="div" style="position:relative">
<img style="cursor:pointer; position:absolute;top:0px;left:0px;visibility:hidden"  src="1.jpg" />
<img style="cursor:pointer; position:absolute;top:0px;left:0px;visibility:hidden"  src="2.jpg" />
<img style="cursor:pointer; position:absolute;top:0px;left:0px;visibility:hidden"  src="3.jpg" />
</div>
</body>
</html>
Иначе зачем я его готовил?
I'm learning to live...
Stilet вне форума Ответить с цитированием
Старый 17.01.2015, 23:37   #6
NetSpace
Участник клуба
 
Аватар для NetSpace
 
Регистрация: 03.06.2009
Сообщений: 1,792
По умолчанию

и я свой код выложу, с плавным переходом (выцветанием, что ли...), перелопатил литературы сегодня немало....
Код:
<html>
<head>
<body>

<script type="text/javascript" src="index_files/jquery-1.js"></script>
<script type="text/javascript" src="index_files/jquery.js"></script>
<script type="text/javascript">
$(function(){$('#test1').crossSlide({sleep:2,fade:1},
[
  { src: '01.jpg'},
  { src: '02.jpg'},
  { src: '03.jpg'},
  { src: '04.jpg'}
]);});</script>
<style type="text/css">
#test1{margin:1em auto;border:2px solid #6699CC;width:380px;height:360px;}</style>

<div style="overflow:hidden;padding:0px;position:relative;"id="test1" align="center">
<img style="position:absolute;visibility:hidden;top:0px;left:0px;border:0px none;"src="01.jpg">
<img style="position:absolute;visibility:visible;top:0px;left:0px;border:0px none;opacity: 1;" src="02.jpg">
<img style="position:absolute;visibility:visible;top:0px;left:0px;border:0px none;opacity: 0.081;" src="03.jpg">
<img style="position:absolute;visibility:hidden;top:0px;left:0px;border:0px none;opacity: 0;" src="04.jpg">
</div>

</body>
</html>
но я это сделал!
Программирование - это единственный способ заставить компьютер делать то, что тебе хочется, а не то, что приходится.

Последний раз редактировалось NetSpace; 17.01.2015 в 23:40.
NetSpace вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Поиск пикселя по коду цвета в окне программы и клик по нему мышкой. Angelochek* Общие вопросы Delphi 1 27.09.2013 10:34
клик мышкой мимо окна xrob Компоненты Delphi 7 13.08.2012 16:30
клик мышкой при определенном событии legenda1 Общие вопросы Delphi 6 01.02.2012 03:21
TreeView клик мышкой Slukka C# (си шарп) 1 28.05.2011 00:35
Как отследить был ли клик мышкой в приложении? MyLastHit Общие вопросы Delphi 3 20.12.2010 18:23