[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Очень красивый слайдер для ucoz 100% робочий
AKA-47 Date: Вторник, 17.07.2012, 15:43 | Message # 1
Messages: 73
Reproofs:
Respect
[ 5 ]
Offline
Сорри нет скрина
Итак Заходи в Панель Управления/Управления дизайном/Верхняя страница сайта или туда где хотите видеть слайдинг
Code
<link rel="stylesheet" type="text/css" href="http://fallen-angells.clan.su/Divslyder/style.css" media="screen" />  
  <script type="text/javascript" src="http://xaoc34rus.ucoz.ru/Divslyder/jquery.js"></script>    
  <div id="wowslider-container">  
  <div id="wowslider-images">  
  <a href="#"><img src="Ссылка на картинку (880х360)" alt="" title="" id="div0"/></a>  
  <a href="#"><img src="Ссылка на картинку (880х360)" alt="" title="Ваш текст виводимий слева" id="div1"/></a>  
  <a href="#"><img src="Ссылка на картинку (880х360)" alt="" title="Ваш текст виводимий слева" id="div2"/></a>  
  <a href="#"><img src="Ссылка на картинку (880х360)" alt="" title="Ваш текст виводимий слева" id="div3"/></a>  
  <a href="#"><img src="Ссылка на картинку (880х360)" alt="" title="Ваш текст виводимий слева" id="div4"/></a>  
  <a href="#"><img src="Ссылка на картинку (880х360)" alt="" title="" id="div5"/></a>  
  </div>  
  <div class="ws_bullets">  
  <a href="#div0" title="Fallen tree"><img src="Ссылка на картинку 300х150 ваш размер" alt=""/></a>  
  <a href="#div1" title="Forest glade"><img src=Ссылка на картинку 300х150 ваш размер" alt=""/></a>  
  <a href="#div2" title="In the woods"><img src="Ссылка на картинку 300х150 ваш размер" alt=""/></a>  
  <a href="#div3" title="The road in the woods"><img src="Ссылка на картинку 300х150 ваш размер" alt=""/></a>  
  <a href="#div4" title="Sapling"><img src="Ссылка на картинку 300х150 ваш размер" alt=""/></a>  
  <a href="#div5" title="Beauty spot"><img src="Ссылка на картинку 300х150 ваш размер" alt=""/></a>  
  <a href="#div6" title="Forested hills"><img src="Ссылка на картинку 300х150 ваш размер" alt=""/></a>  
  <a href="#div7" title="Swamp in the woods"><img src="Ссылка на картинку 300х150 ваш размер" alt=""/></a>  
  <a href="#div8" title="Fire in the woods"><img src="Ссылка на картинку 300х150 ваш размер" alt=""/></a>  
  <a href="#div9" title="Morning mist over the forest"><img src="Ссылка на картинку 300х150 ваш размер" alt=""/></a>  
  </div>p  
  </div>  
  </script>  
  <script type="text/javascript" src="http://xaoc34rus.ucoz.ru/Divslyder/Div1a.js"></script>

Создаем блокнот називаем ево (style.css) откривание и пихаем туда етот код
Code
#wowslider-container {         
  /*    overflow: hidden; */  
         zoom: 1;         
         position: relative;         
         width:Ваш размер рамки (ширина) (рекомендуетса 900рх)px;  
         height:Ваш размер рамки (высота) (рекомендуетса 360px)px;  
         margin:0 auto;  
         z-index:100;  
         border:10px solid#ЦВЕТ РАМКИ;  
  }  
  * html #wowslider-container{  
         background-image: none;  
  }  
  #wowslider-images{  
         position: relative;  
         width:880px;  
         height:360px;  
         overflow:hidden;  
  }  
  #wowslider-images a{  
         color:transparent;  
  }  

  #wowslider-images img{  
         top:0;  
         left:0;  
         border:none 0;  
  }  
  #wowslider-container a{         
         text-decoration: none;         
         outline: none;         
         border: none;         
  }  

  #wowslider-container  .ws_bullets {         
         font-size: 0px;         
         padding: 0px;         
         float: left;  
         position:absolute;  
            right: 5px;  
            top: 10px;  
         z-index:40;  
  }  
  #wowslider-container .ws_bullets a {         
         margin: 0 3px;         
         width:21px;  
         height:21px;  
         background: url(./bullet.png);  
         float: left;         
         text-indent: -1000px;         
         position:relative;  
  }  
  * html #wowslider-container .ws_bullets a {  
         background: url(./bullet.gif);  
  }  
  #wowslider-container .ws_bullets a.ws_selbull{  
         background: url(./bullet_active.png);  
  }  
  #wowslider-container .ws_bullets a:hover{  
         background: url(./bullet_active.png);  
  }  
  * html #wowslider-container .ws_bullets a:hover{  
         background: url(./bullet_active.gif);  
  }  
  * html #wowslider-container .ws_bullets a.ws_selbull{  
         background: url(./bullet_active.gif);  
  }  
  #wowslider-container a.ws_next, #wowslider-container a.ws_prev {  
         position:absolute;  
         display:none;  
         top:50%;  
         margin-top:-22px;  
         position:absolute;  
         z-index:1001;  
         height: 45px;  
         width: 45px;  
         background-image: url(./arrows.png);  
  }  
  * html #wowslider-container a.ws_next, * html #wowslider-container a.ws_prev{  
         background-image: url(./arrows.gif);  
  }  
  #wowslider-container a.ws_next{  
         background-position: 100% 0;         
         right:10px;  
  }  
  #wowslider-container a.ws_prev {  
         left:10px;  
         background-position: 0 0;         
  }  
  * html #wowslider-container a.ws_next,* html #wowslider-container a.ws_prev{display:block}  
  #wowslider-container:hover a.ws_next, #wowslider-container:hover a.ws_prev {display:block}  

  #wowslider-container .ws-title{  
         position: absolute;  
         bottom:25px;  
         left: 0px;  
         margin-right:30px;  
         z-index: 50;  
         padding:10px;  
         opacity:0.8;  
         filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);         
         color: #000000;  
         background:#FFF;  
            font-family: Tahoma,Arial,Helvetica;  
            font-size: 14px;  
            letter-spacing: 1px;  
            line-height: 18px;  
            text-align: left;  
            text-shadow: 0 0 2px #FFFFFF;         
         -moz-border-radius:0 8px 8px 0;  
         -webkit-border-radius:0 8px 8px 0;  
         border-radius:0 8px 8px 0;  
         font-size: 14px;  
  }  
  #wowslider-container .ws-title div{  
         padding-top:5px;  
         font-size: 12px;  
  }#wowslider-container .ws_bullets  a img{  
         text-indent:0;  
         display:block;  
         top:20px;  
         left:-120px;  
         visibility:hidden;  
                 
         position:absolute;  
            -moz-box-shadow: 0 0 18px #FFF;  
            box-shadow: 0 0 18px #FFF;  
            border: 3px solid #FFFFFF;  
  }  
  #wowslider-container .ws_bullets a:hover img{  
         visibility:visible;  
  }  

  #wowslider-container .ws_bulframe div div{  
         height:90px;  
         overflow:visible;  
         position:relative;  
  }  
  #wowslider-container .ws_bulframe div {  
         overflow:hidden;  
         position:relative;  
         width:240px;  
  }  
  #wowslider-container .ws_bulframe{  
         display:none;  
         top:25px;  
         overflow:visible;  
                 
         position:absolute;  
         cursor:pointer;  
            -moz-box-shadow: 0 0 18px #FFF;  
            box-shadow: 0 0 18px #FFF;  
            border: 3px solid #FFFFFF;  
  }  
  #wowslider-container .ws_bulframe span{  
         display:block;  
         position:absolute;  
         top:-9px;  
         margin-left:0px;  
         left:120px;  
         background:url(./triangle.png);  
         width:15px;  
         height:6px;  
  }

Создаем папку в файловом менджере (Divslyder) заливаем файл(style.css)в ету папку Divslyder

Вуаля Скрипт работает ставим ++ плюсиГ если помог

Если что то неработает пишите помогу


  • Страница 1 из 1
  • 1
Поиск: