Слайдер картинок by PheonixICQ для ucoz
05.06.2013 в 15:27
Автор: Macros |
Комментариев (0) |
Просмотров: 322
Привет всем, представляю вам мой слайдер.
Вы можете поставить его просто куда хотите, но если вы его будите постоянно менять в нем картинки, то я вам предалагаю сделать глобальный блок под названием SLIDER и так, начнем установку! в блок слайдер вставляем: Код <head> <script type="text/javascript" src="http://s6.ucoz.net/src/jquery-1.3.2.js"></script><script type="text/javascript" src="http://s6.ucoz.net/src/uwnd.js?2"></script><style type="text/css">.UhideBlock {display:none}</style> </head> <body><script type="text/javascript" src="http://dedicated.3dn.ru/uCoz/raznoe/sliderby/jquery.tipsy.js"></script> <script type='text/javascript'> $(function() { $('.north').tipsy({gravity: 'n'}); $('.south').tipsy({gravity: 's'}); $('.east').tipsy({gravity: 'e'}); $('.west').tipsy({gravity: 'w'}); }); </script> <!--header--><script type="text/javascript" src="http://dedicated.3dn.ru/uCoz/raznoe/sliderby/script_site.js"></script> <div id="container_wrap" class="modulesindex pagessitePage3 uripage3"> <!--/header--> <div class="hslider_full"> <div class="hslider"> <b class="hslider_prev"></b> <b class="hslider_next"></b> <div class="hslider_in"> <ul><li> <a class='north' href="Ссылка" title="Название"> <img src="ссылка на картинку" width="120" height="156" alt=" " /> </a> </li> Таких картинок нужно сделать больше 6 т.к. в слайдере показывает 6 картинок за раз </div> </div> </div><!--/hslider_full--> <div id="content_full"><!--header--> <!-- <middle> --> <div id="side_right"> <div id="sider_left"> <!-- <body> --> Это в CSS: Код /* Черный шлепок*/ .tipsy { padding: 5px; font-size: 11px; opacity: 0.8; filter: alpha(opacity=80); background-repeat: no-repeat; background-image: url('http://dedicated.3dn.ru/uCoz/raznoe/sliderby/tipsy.gif'); } .tipsy-inner { padding: 5px 8px 4px 8px; background-color: black; color: white; max-width: 200px; text-align: center; } .tipsy-inner { -moz-border-radius:3px; -webkit-border-radius:3px; } .tipsy-north { background-position: top center; } .tipsy-south { background-position: bottom center; } .tipsy-east { background-position: right center; } .tipsy-west { background-position: left center; } /* ----------------------- */ |
