показ div по времени
Здравствуйте, уважаемые разработчики!
Искал, не нашел javascript код, реализующий следующее: необходимо прокручивать скрытые div, в которых висят картинки товаров. Через установленные промежутки времени баннеры меняются в области 970x174. Плюс чтобы была прокрутка баннеров вперед и назад. Это я когда-то видел на сайте radast org Сейчас там такого нет. С уважением. |
Вложений: 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> |
|
Часовой пояс GMT +3, время: 23:26. |