Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.


С нашей помощью вы можете создать форум,
похожий на этот!
Мы в социальных сетях

Правила форума

для обязательного прочтения!


Внимание! Важная информация для РЕГИСТРАЦИИ на форуме:

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
Интересные решения
Быстрый переход к сервисам: Savepic Видео фоторедактор Транслит

Помогите сделать слайдер в шапке

Предыдущая тема Следующая тема Перейти вниз

Помогите сделать слайдер в шапке

Сообщение автор das1k в Сб 17 Дек - 0:48

Подскажите каак сделать..

Чтоб логотип можно было перелистовать...


das1k
 

Сообщения : 32
Регистрация : 2010-12-12
Благодарности : 1

Без предупреждений

http://in-gaming.pro

Вернуться к началу Перейти вниз

Re: Помогите сделать слайдер в шапке

Сообщение автор ZoD1aK в Сб 17 Дек - 0:49

Через Слайд

ZoD1aK
 

Мужчина

Сообщения : 219
Возраст : 24
Место обитания : Україна
Регистрация : 2010-05-14
Благодарности : 50

Без предупреждений

http://ship.narutorpg.org

Вернуться к началу Перейти вниз

Re: Помогите сделать слайдер в шапке

Сообщение автор das1k в Сб 17 Дек - 0:53

а подробнее?

das1k
 

Сообщения : 32
Регистрация : 2010-12-12
Благодарности : 1

Без предупреждений

http://in-gaming.pro

Вернуться к началу Перейти вниз

Re: Помогите сделать слайдер в шапке

Сообщение автор ZoD1aK в Сб 17 Дек - 0:59

http://www.1stwebdesigner.com/freebies/javascript-sliders-scrollers/

Вот смотри и выбирай. ПОтом просто подгоняй под форум

ZoD1aK
 

Мужчина

Сообщения : 219
Возраст : 24
Место обитания : Україна
Регистрация : 2010-05-14
Благодарности : 50

Без предупреждений

http://ship.narutorpg.org

Вернуться к началу Перейти вниз

Re: Помогите сделать слайдер в шапке

Сообщение автор das1k в Сб 17 Дек - 1:13

alex12345 пишет:http://www.1stwebdesigner.com/freebies/javascript-sliders-scrollers/

Вот смотри и выбирай. ПОтом просто подгоняй под форум

Если честн нехня не пойму..(((
Я нуб пока ещё в этом деле((

das1k
 

Сообщения : 32
Регистрация : 2010-12-12
Благодарности : 1

Без предупреждений

http://in-gaming.pro

Вернуться к началу Перейти вниз

Re: Помогите сделать слайдер в шапке

Сообщение автор ZoD1aK в Сб 17 Дек - 2:33

Код слайдера. Вставляй куда тибе нужно.

Код:
  <script type="text/javascript" src="http://blog.dreamcss.com/wp-content/uploads/example/js/jquery.js"></script>
  <script type="text/javascript" src="http://blog.dreamcss.com/wp-content/uploads/example/js/scripts.js"></script>

<div id="header">
<div class="wrap">
<div id="slide-holder">
<div id="slide-runner">
<a href=""><img id="slide-img-1" src="http://blog.dreamcss.com/wp-content/uploads/example/images/nature-photo.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-2" src="http://blog.dreamcss.com/wp-content/uploads/example/images/nature-photo1.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-3" src="http://blog.dreamcss.com/wp-content/uploads/example/images/nature-photo2.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-4" src="http://blog.dreamcss.com/wp-content/uploads/example/images/nature-photo3.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-5" src="http://blog.dreamcss.com/wp-content/uploads/example/images/nature-photo4.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-6" src="http://blog.dreamcss.com/wp-content/uploads/example/images/nature-photo4.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-7" src="http://blog.dreamcss.com/wp-content/uploads/example/images/nature-photo6.png" class="slide" alt="" /></a>
<div id="slide-controls">
<p id="slide-client" class="text"><strong>post: </strong><span></span></p>
<p id="slide-desc" class="text"></p>
<p id="slide-nav"></p>
 </div>
 </div>
 </div>
</div>
</div>

  <script type="text/javascript">
    if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"ПЕРша картинка","desc":"ПЕРша картинка 1"},{"id":"slide-img-2","client":"Вторая","desc":"Вторая 1"},{"id":"slide-img-3","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-4","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-5","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-6","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-7","client":"nature beauty","desc":"add your description here"}];
  </script>

<style>

*{
margin:0;
padding:0;
}
html{
height:100%;
}
body{
height:100%;
color:#a4a4a4;
cursor:default;
font-size:11px;
line-height:16px;
text-align:center;
background-color:#000;
background-position:50% 0;
background-repeat:no-repeat;
font-family:Tahoma,sans-serif;
}
a:link,a:visited{
color:#fff;
text-decoration:none;
}
a img{
border:0;
}
div.wrap{
width:993px;
margin:0 auto;
text-align:left;
}
div#top div#nav{
float:left;
clear:both;
width:993px;
height:52px;
margin:22px 0 0;
background:url url(http://blog.dreamcss.com/wp-content/uploads/example/images/nav-bg.png) 0 0 no-repeat;
}
div#top div#nav ul{
float:left;
width:700px;
height:52px;
list-style-type:none;
}
div#nav ul li{
float:left;
height:52px;
}
div#nav ul li a{
border:0;
height:52px;
display:block;
line-height:52px;
text-indent:-9999px;
}
div#header{
margin:-1px 0 0;
}
div#video-header{
height:683px;
margin:-1px 0 0;
}
div#header div.wrap{
height:299px;
background:url(http://blog.dreamcss.com/wp-content/uploads/example/images/header-bg.png) 50% 0 no-repeat;
}
div#header div#slide-holder{
z-index:40;
width:993px;
height:299px;
position:absolute;
}
div#header div#slide-holder div#slide-runner{
top:9px;
left:9px;
width:973px;
height:278px;
overflow:hidden;
position:absolute;
}
div#header div#slide-holder img{
margin:0;
display:none;
position:absolute;
}
div#header div#slide-holder div#slide-controls{
left:0;
bottom:228px;
width:973px;
height:46px;
display:none;
position:absolute;
background:url(http://blog.dreamcss.com/wp-content/uploads/example/images/slide-bg.png) 0 0;
}
div#header div#slide-holder div#slide-controls p.text{
float:left;
color:#fff;
display:inline;
font-size:10px;
line-height:16px;
margin:15px 0 0 20px;
text-transform:uppercase;
}
div#header div#slide-holder div#slide-controls p#slide-nav{
float:right;
height:24px;
display:inline;
margin:11px 15px 0 0;
}
div#header div#slide-holder div#slide-controls p#slide-nav a{
float:left;
width:24px;
height:24px;
display:inline;
font-size:11px;
margin:0 5px 0 0;
line-height:24px;
font-weight:bold;
text-align:center;
text-decoration:none;
background-position:0 0;
background-repeat:no-repeat;
}
div#header div#slide-holder div#slide-controls p#slide-nav a.on{
background-position:0 -24px;
}
div#header div#slide-holder div#slide-controls p#slide-nav a{background-image:url(http://blog.dreamcss.com/wp-content/uploads/example/images/silde-nav.png);}
div#nav ul li a{background:url(http://blog.dreamcss.com/wp-content/uploads/example/images/nav.png) no-repeat;}

</style>
Сылкы на картинкы поизминяй.
Описания картинок изминяетса в скрипте перед стилем, пример снизу показую где изминять
Код:
"id":"slide-img-2","client":"Изминять тут","desc":"и Тут изминять"
Визде изминяй в client и desc

ZoD1aK
 

Мужчина

Сообщения : 219
Возраст : 24
Место обитания : Україна
Регистрация : 2010-05-14
Благодарности : 50

Без предупреждений

http://ship.narutorpg.org

Вернуться к началу Перейти вниз

Предыдущая тема Следующая тема Вернуться к началу


 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения