|
Сообщение от SV4
|
что должен сделать скрипт:
1) пользователь нажимает кнопку "посмотреть список"
2) скрипт запускается и проходит по очереди по всем ссылкам
у которых указан класс "GoDiv" (количество ссылок всегда разное)
на каждом блоке задерживается на пять секунд.
3) дойдя до последнего блока, делает так же задержку 5 сек. и возвращается к первому. Там и останавливается.
|
Как вариант...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
#list img {
cursor: pointer;
}
</style>
<script type='text/javascript'>
$(function (){
var obj=$('.GoDiv').parent().prev();
var tmout=2000;
var pos;
$('#list img').click(function (){
pos=0;
go();
});
function go(){
var id=obj.eq(pos).prop('id');
++pos;
if (pos>obj.length){
id=obj.eq(0).prop('id');
setTimeout(function(){
top.location='#'+id;
},tmout);
return;
};
top.location='#'+id;
setTimeout(go,tmout);
};
});
</script>
</head>
<body>
<div id='list'><img src='http://javascript.ru/forum/images/smilies/victory.gif'>кнопка посмотреть список</img></div>
<div align="center">
<div id="div1"> контейнер <strong>(№1)</strong></div>
<div><a href="#div2" class="GoDiv">ссылка на контейнер (№2)</a></div>
<div>
здесь содержимое (№1) и в нём некоторый текст....<br>
-------------------------------------------------------<br>
-------------------------------------------------------<br>
-------------------------------------------------------
</div>
</div>
<br>
<br>
<div align="center">
<div id="div2"> это контейнер <strong>(№2)</strong></div>
<div><a href="#div3" class="GoDiv">ссылка на контейнер (№3)</a></div>
<div> здесь содержимое (№2) и в нём некоторый текст....<br>
-------------------------------------------------------<br>
-------------------------------------------------------<br>
-------------------------------------------------------
</div>
</div>
<br>
<br>
<div align="center">
<div id="div3"> это контейнер <strong>(№3)</strong></div>
<div><a href="#div4" class="GoDiv">ссылка на контейнер (№4)</a></div>
<div> здесь содержимое (№3) и в нём некоторый текст....<br>
-------------------------------------------------------<br>
-------------------------------------------------------<br>
-------------------------------------------------------
</div>
</div>
<br>
<br>
<div align="center">
<div id="div4"> контейнер <strong>(№4)</strong></div>
<div><a href="#div5" class="GoDiv">ссылка на контейнер (№5)</a></div>
<div> здесь содержимое (№4) и в нём некоторый текст....<br>
-------------------------------------------------------<br>
-------------------------------------------------------<br>
-------------------------------------------------------
</div>
</div>
<br>
<br>
<div align="center">
<div id="div5"> это контейнер <strong>(№5)</strong></div>
<div><a href="#div1" class="GoDiv">ссылка на контейнер (№1)</a></div>
<div> здесь содержимое (№5) и в нём некоторый текст....<br>
-------------------------------------------------------<br>
-------------------------------------------------------<br>
-------------------------------------------------------
</div>
</div>
</body>
</html>