Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   показ div по времени (https://javascript.ru/forum/dom-window/16779-pokaz-div-po-vremeni.html)

TTongorovortoto 21.04.2011 19:53

показ div по времени
 
Здравствуйте, уважаемые разработчики!
Искал, не нашел javascript код, реализующий следующее:
необходимо прокручивать скрытые div, в которых висят картинки товаров.
Через установленные промежутки времени баннеры меняются в области 970x174.
Плюс чтобы была прокрутка баннеров вперед и назад.
Это я когда-то видел на сайте radast org
Сейчас там такого нет.
С уважением.

TTongorovortoto 21.04.2011 21:02

Вложений: 1
нашел только вот что:
показ div через интервалы времни в цикле.
нет плавного прокручивания (сверху вниз) баннеров, нет кнопки крутилки или цифр перебора.

1.htm

<HTML>
<HEAD>
	<link rel="stylesheet" href="styles.css" type="text/css">


<script type="text/javascript" src="jquery.min.js"></script>


<script type="text/javascript">
$('html').addClass('js'); 
$(function() { 
  var timer = setInterval( showDiv, 4000); 
  var counter = 2; 
  function showDiv() { 
    if (counter ==0) { counter++; return; } 
    $('div','#container') 
      .stop() 
      .hide() 
      .filter( function() { return this.id.match('div' + counter); })    
      .show('fast'); 
    counter == 4? counter = 0 : counter++;  
  } 
}); 
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<title>Sandbox</title> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
<style type="text/css" media="screen"> 
body { background-color: #fff; font: 16px Helvetica, Arial; color: #000; } 
.display { width:300px; height:200px; border: 2px solid #000; } 
.display1 { width:300px; height:200px; border: 2px solid #000; } 
.js .display { display:none; } 

</style> 
</head> 
<body> 
<h2>Example of using setInterval to trigger display of Div</h2> 
<p>The first div will display after 10 seconds...</p> 
<div id='container'> 
<div id='div1' class='display1' style="background-color: red;">  
<a href="shop/index.php?productID=717"><img src="./images/action1.png" border="0" alt="браслет из стали"></a>
</div> 
<div id='div2' class='display' style="background-color: green;">  
<a href="shop/index.php?productID=811"><img src="./images/action2.png" border="0" alt="кожаный браслет"></a>
</div> 
<div id='div3' class='display' style="background-color: blue;">  
<a href="shop/index.php?productID=961"><img src="./images/action3.png" border="0" alt="кулон из стали"></a>
</div> 
<div id='div4' class='display' style="background-color: blue;">  
<a href="shop/index.php?productID=764"><img src="./images/action4.png" border="0" alt="кулон для влюбленных"></a>
</div> 
</div> 
fgh
</body> 
</html>

dmitriymar 21.04.2011 22:20

http://javascript.ru/forum/job/


Часовой пояс GMT +3, время: 23:26.