Search the Community
Showing results for tags 'функция div одновременно'.
Found 1 result
-
Выполнение двух функций параллельно, одинаковых в разных блоках div
Driev posted a question in JavaScript
Нужно что бы фотки и в том и другом блоках выполнялись, а так в одном стоит, а в другом выполняется, подскажите, как сделать? <!DOCTYPE html> <html> <head> <title>Главная</title> <script src="js.js"></script> <link rel="stylesheet" href=" css.css " type="text/css" /> <style> #block1, #block2, #block3{ position: relative; } #container { width: 960px; margin: 0 auto; height:900px; } #block1{ width: 50%; float:left; height: 99%; background:red; } #block2{ width: 50%; float:left; height: 99%; background:green; } #block3{ float:left; top: -690px; background:blue; border: 1px solid #7a7b7e; width: 160px; height:160px; border-radius: 80px; left: 400px; } body { background: #e1dfb9; } #block1 { z-index: 1; } #block2 { z-index: 1; } #block3 { z-index: 2; } </style> <style type="text/css"> div#rotator {position:relative; height:150px; ;margin-top: -16px;} div#rotator ul li {float:left; position:absolute; list-style: none;} </style> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript"> function theRotator() { $('div#rotator ul li').css({opacity: 0.0}); $('div#rotator ul li:first').css({opacity: 1.0}); setInterval('rotate()',5000); } function rotate() { var current = ($('div#rotator ul li.show')? $('div#rotator ul li.show') : $('div#rotator ul li:first')); var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#rotator ul li:first') :current.next()) : $('div#rotator ul li:first')); next.css({opacity: 0.0}) .addClass('show') .animate({opacity: 1.0}, 1000); current.animate({opacity: 0.0}, 1000) .removeClass('show'); }; $(document).ready(function() { theRotator(); }); </script> <style type="text/css"> div#rotatr {position:relative; height:150px; ;margin-top: -16px;} div#rotatr ul li {float:left; position:absolute; list-style: none;} </style> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript"> function theRotatr() { $('div#rotatr ul li').css({opacity: 0.0}); $('div#rotatr ul li:first').css({opacity: 1.0}); setInterval('rotate()',5000); } function rotate() { var current = ($('div#rotatr ul li.shw')? $('div#rotatr ul li.shw') : $('div#rotatr ul li:first')); var next = ((current.next().length) ? ((current.next().hasClass('shw')) ? $('div#rotatr ul li:first') :current.next()) : $('div#rotatr ul li:first')); next.css({opacity: 0.0}) .addClass('shw') .animate({opacity: 1.0}, 1000); current.animate({opacity: 0.0}, 1000) .removeClass('shw'); }; $(document).ready(function() { theRotatr(); }); </script> </head> <body> <div id="container"> <div id="block1"> <div id="rotator"> <ul> <li class="show"><a href="http://google.ru/"><img src="DSC05240.JPG" width="480" height="891" alt="pic1" /></a></li> <li><a href="http://yandex.ru/"><img src="DSC05239.JPG" width="480" height="891" alt="pic2" /></a></li> <li><a href="http://nigma.ru/"><img src="DSC05244.JPG" width="480" height="891" alt="pic3" /></a></li> </ul> </div> <ul class="menul"> <li><a href="#"><span>Кабинеты</span></a> <ul> <li><a href="#"><span>1 Кабинет</span></a></li> <li><a href="#"><span>2 Кабинет</span></a></li> <li><a href="#"><span>3 Кабинет</span></a></li> <li><a href="#"><span>4 Кабинет</span></a></li> <li><a href="#"><span>5 Кабинет</span></a></li> <li><a href="#"><span>6 Кабинет</span></a></li> <li><a href="#"><span>7 Кабинет</span></a></li> <li><a href="#"><span>8 Кабинет</span></a></li> <li><a href="#"><span>9 Кабинет</span></a></li> </ul> </li> </ul> </div> <div id="block2" > <div id="rotatr"> <ul> <li class="shw"><a href="http://google.ru/"><img src="Фото0290.jpg" width="480" height="891" alt="pic1" /></a></li> <li><a href="http://yandex.ru/"><img src="Scan_20140220_233431.jpg" width="480" height="891" alt="pic2" /></a></li> <li><a href="http://nigma.ru/"><img src="LgJDOFRP8Fk.jpg" width="480" height="891" alt="pic3" /></a></li> </ul> </div> <ul class="menur"> <li><a href="#"><span>Кабинеты</span></a> <ul> <li><a href="#"><span>1 Кабинет</span></a></li> <li><a href="#"><span>2 Кабинет</span></a></li> <li><a href="#"><span>3 Кабинет</span></a></li> <li><a href="#"><span>4 Кабинет</span></a></li> <li><a href="#"><span>5 Кабинет</span></a></li> <li><a href="#"><span>6 Кабинет</span></a></li> <li><a href="#"><span>7 Кабинет</span></a></li> <li><a href="#"><span>8 Кабинет</span></a></li> <li><a href="#"><span>9 Кабинет</span></a></li> </ul> </li> </ul> </div> <div id="block3" ></div> <div style=" width:100%; height:1px; clear:both;"></div> </div> </body> </html>