ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка

Объявление

Проект от команды FD

☑ Поиск роли, партнёра, игрока.
☑ Легко. Удобно. Современно.
☑ Мы в процессе разработки.

Читать спойлеры

Загадочный Дом «Кузнечик»

Форумные игры, кино, позитивное отношение и душевное общение!
Есть в мире место, где душе тепло...
Заходи, мы будем тебе рады!

Подробнее

Мийрон

Качественный пиар быстро и недорого.
Красивейшие дизайны по низким ценам.
Каталог ролевых игр.

Подробнее

FD Chat - Чат на вашем форуме

Чат на отдельной странице на форуме. Без регистрации, используются форумные аккаунты.
Стоимость: 1500р
Первым 10 покупателям скидка 20%.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайтеПредложения
Стать модераторомОтзывы

Подробнее
Начался второй тур лотереи для форумов "Новогодний кот". Подаём заявки на участие до 8.12. Не пропустите!
Ищешь чем бы украсить свой форум или сайт к Новому году? 🎄 Мы поможем нарядиться! 🎄

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.



Горизонтальный слайдер

Сообщений 1 страница 10 из 48

1

Горизонтальный слайдер

Платформа: любая
Демо:
[html]<div id="slideshow">
    <div id="slidesContainer">
      <div class="slide">
        Первый слайд
      </div>
      <div class="slide">
        Второй слайд
      </div>
      <div class="slide">
        Третий слайд
      </div>
    </div>
</div>
<script type="text/javascript">

$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 560;
  var slides = $('.slide');
  var numberOfSlides = slides.length;

  // С помощью скрипта убираем прокрутку в контейнере.

  $('#slidesContainer').css('overflow', 'hidden');
  // Свернем все вкладки .slides в блок #slideInner
  slides .wrapAll('<div id="slideInner"></div>')
.css({
      'float' : 'left',
      'width' : slideWidth
    });

  // Проставим блоку #slideInner ширину, равную общей ширине контейнеров
  $('#slideInner').css('width', slideWidth * numberOfSlides);
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');
  manageControls(currentPosition);
  $('.control')
    .bind('click', function(){
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
    manageControls(currentPosition);
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });

  function manageControls(position){
    // Скрыть левую стрелку у первого контейнера
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
// Скрыть правую стрелку у последнего контейнера
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }

  }
});
</script>
<style type="text/css">
#slideshow {

margin:0 auto;
width:640px;
height:263px;
background:#000 url(ссылка_на_фон_вкладок) no-repeat 0 0;
position:relative;
color: #fff;
}

#slideshow #slidesContainer {
  margin:0 auto;
  width:560px;
  height:263px;
  overflow:auto; /* поддержка прокрутки */
  position:relative;
}

#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:540px; /* На двадцать пикселев меньше чем ширина #slidesContainer */
  height:263px;
}

.control {
  display:block;
  width:39px;
  height:263px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}

#leftControl {
  top:0;
  left:0;
  background:transparent url(https://www.webpagefx.com/blog/demo/sli … l_left.jpg) no-repeat 0 0;
}

#rightControl {
  top:0;
  right:0;
  background:transparent url(https://www.webpagefx.com/blog/demo/sli … _right.jpg) no-repeat 0 0;
}

.slide h2, .slide p {
  margin:15px;
}

.slide img {
  float:right;
  margin:0 15px;
}
</style>[/html]

Для размещения слайдера используется данный код:

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Каждая вкладка размещаются между тегами блока с классом slide, то есть

<div class="slide">…</div>

Скрипт слайдера таков:

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

И, наконец, стиль нашего слайдера.

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Важно: значения, выделенные жирным в скрипте и стиле должны быть одинаковыми, иначе слайдер будет работать некорректно!

+5

2

Дополнение.
Как присвоить каждой вкладке собственный фон.
Для этого, создавая новый контейнер, используйте код:

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

0

3

Ghоst, здравствуйте. спасибо за скритп, но подскажите для неграмотного меня, что куда ставится?

0

4

Mem
Само размещение ставится там, где вы хотите получить свой сладер: на странице ли, в объявлении.
Скрипт - в html-низ.
Стиль - в html-верх или в свой стиль, любое окно без тегов.

0

5

Ghоst, спасибо.

0

6

можно вопрос?
я попыталась сделать его во вкладке объявления, но все так поехало, что я просто ужасаюсь
вот ссылка http://vendettade.rolka.su/
(таблица от другого форума, не обращайте внимания

0

7

Поставила скрипт все хорошо, но когда захожу в профиль или сообщения все съезжает, что делать?

0

8

Ариэлия
По словам и по фотографии пациента не лечу. Ссылку на форум.
Шизофрения
Где-то не закрыли див, все съехало. Дай господь, найду ошибку.
Попробуйте убрать вставку слайдера, а мне сюда кинуть код всего объявления.

0

9

код со слайдером

Код:
<!--контейнер-->
<div class="container" style="width: 800px; float: left;">
    <div class="html-box">

<ul class="tabs">
    <li class="active"><a href="#tab1">Новости и события</a></li>
    <li><a href="#tab2">Ссылки</a></li>
 <li><a href="#tab3">Администрация</a></li>
    <li><a href="#tab4">Время/Погода</a></li>
<li><a href="#tab5">Расписание</a></li>
<li><a href="#tab6">События в игре</a></li>
    <li><a href="#tab7">Реклама/Партнеры</a></li>
</ul>

      <div class="tab_container1">
<div style="width:100%; height:220px; overflow:auto; border:solid 0px black; border-radius:8px; line-height: px;overflow:auto;scrollbar-face-color:transparent; scrollbar-highlight-color: transparent;scrollbar-shadow-color: transparent;scrollbar-3dlight-color: transparent;scrollbar-arrow-color: #39546f;scrollbar-track-color: transparent;scrollbar-darkshadow-color: transparent;">
<div style="display: block;" id="tab1" class="tab_content">
<div id="slideshow" >

    <div id="slidesContainer">

      <div class="slide">

        <p><b><i><center><font color=red>Achtung!</font> Уважаемые гости! Если после регистрации вам не пришел пароль на почтовый ящик, то напишите в гостевую с просьбой сменить пароль. Так же сообщите ваш ник.</center></i></b>
<br><br><b><i>1.12.2011.</i></b> *барабанная дробь* Итак, господа, настал этот момент, когда мы начинаем игру. теперь регистрация для пользователей свободна, проходите. занимайте роли, в общем, присоединяйтесь к нам. 
<br><b><i>8.10.2011.</i></b> Сейчас идет активная разработка, настройка и написание материалов для игры. Уже есть дизайн. Регистрация пользователей временно запрещена, только по приглашениям. </p>

      </div>

      <div class="slide" ">

        <p><b><u>На 1 сентября</b></u><br><br> 
Уроков не будет, но собрание для преподавателей начнется в 11 в кабинете директора, в 18 будет бал для всех и знакомство.  </p>

   
      </div>


      <div class="slide">

          <p> Вот и все, дружище. </p> 

      <p>    Не правда ли красивый слайдер получился?</p> 

      </div>

    </div>
</div>
</div>
</div>
</div>
</div>

<div style="display: none;" id="tab2" class="tab_content">
<table width="100%" height="250px" border="0" background="">
<td width="30%"  rowspan="2">
<p style="text-align:center;">
<font style="font:bold;font-family: Plantagenet Cherokee;letter-spacing:3px;color:#613030;text-transform:uppercase;">Важные:</font><br>
</p>
<a href="http://aleajactaest.rusff.ru/viewtopic.php?id=5">- сюжет</a><br>
<a href="http://aleajactaest.rusff.ru/viewtopic.php?id=4">- правила</a><br>
<a href="http://aleajactaest.rusff.ru/viewtopic.php?id=10">- шаблон дела</a><br>
<a href="http://aleajactaest.rusff.ru/viewtopic.php?id=54">- список ролей</a><br>
<a href="http://aleajactaest.rusff.ru/viewtopic.php?id=53">- способности</a><br>
<a href="http://aleajactaest.rusff.ru/viewtopic.php?id=6">- расы</a><br>
<a href="http://aleajactaest.rusff.ru/viewtopic.php?id=16#p43">- f.a.q.</a><br><br>
<p style="text-align:center;">
<font style="font:bold;font-family: Plantagenet Cherokee;letter-spacing:3px;color:#613030;;text-transform:uppercase;">Для гостей:</font><br>
</p>
<a href="http://aleajactaest.rusff.ru/viewtopic.php?id=2">- отзывы/предложения</a><br>
<a href="http://aleajactaest.rusff.ru/viewtopic.php?id=56#p87">- занять роль</a><br>
<a href="http://aleajactaest.rusff.ru/viewtopic.php?id=3">- ваши вопросы</a><br>
<a href="http://aleajactaest.rusff.ru/viewtopic.php?id=60">- физические характеристики</a><br>

</td>
<td width="30%"  rowspan="2">
<p style="text-align:center;">
<font style="font:bold;font-family: Plantagenet Cherokee;letter-spacing:3px;color:#613030;text-transform:uppercase;">Акции:</font><br>
</p>
<a href="http://aleajactaest.rusff.ru/viewtopic.php?id=64#p108">- Акция vol 0.1 Получи за магию</a><br>
<a href="http://aleajactaest.rusff.ru/viewtopic.php?id=65#p109">- Акция vol 0.2 фак ю</a><br><br>
<p style="text-align:center;">
<font style="font:bold;font-family: Plantagenet Cherokee;letter-spacing:3px;color:#613030;text-transform:uppercase;">Пользовательские:</font><br>
</p>
<a href="http://aleajactaest.rusff.ru/viewtopic.php?id=55#p86">- занятые внешности</a><br>
<a href="http://aleajactaest.rusff.ru/viewtopic.php?id=14">- отсутствие/уход</a><br>
<a href="http://aleajactaest.rusff.ru/viewtopic.php?id=17">- поиск партнера</a><br>
<a href="http://aleajactaest.rusff.ru/viewtopic.php?id=63#p101">- Передача, приобретение, повышение</a><br>
<a href="http://aleajactaest.rusff.ru/viewtopic.php?id=19">- заселение в общежитие</a><br>
<a href="http://aleajactaest.rusff.ru/viewtopic.php?id=61">- заполнение профиля</a><br>
<a href="http://aleajactaest.rusff.ru/viewtopic.php?id=20">- заказ аватара</a><br>
<a href="http://aleajactaest.rusff.ru/viewtopic.php?id=13">- объявления от администрации</a><br>
<a href="http://aleajactaest.rusff.ru/viewforum.php?id=6">- квестовый раздел</a><br>
<a href="http://aleajactaest.rusff.ru/viewforum.php?id=30">- флешбек</a><br>
<a href="http://aleajactaest.rusff.ru/viewforum.php?id=7">- отношения</a><br>
</td>
<td width="30%"  rowspan="2">
<p style="text-align:center;">
<font style="font:bold;font-family: Plantagenet Cherokee;letter-spacing:3px;color:#613030;;text-transform:uppercase;">Рекламные:</font><br>
</p>
<a href="http://aleajactaest.rusff.ru/viewtopic.php?id=57#p88">- правила/наша реклама</a><br>
<a href="http://aleajactaest.rusff.ru/viewtopic.php?id=58#p89">- ваша реклама</a><br>
</td>
</tr>
</table>
</div>

<div style="display: block;" id="tab3" class="tab_content"> 
<center><i><a href="http://aleajactaest.rusff.ru/profile.php?id=2">Superbia</a><br>
Бог мира сего, Всемогущая и просто ваша повелительница. Весьма странная и веселая особа. Редко проверяет анкеты, но заправляет всем и вся на форуме. Именно ей пришла идея о создании ролевой. Она так же заведует дизайном и проверяет всю информацию. <br><br><i><a href="http://aleajactaest.rusff.ru/profile.php?id=5"> Decessus</a><br>
Второй управляющий миром. является тем, кто написал добрую часть информации, правда перед этим обсудив ее со Всемогущей. Строг при приеме, но добр к игрокам, если они только не клеятся к Богине.</i></center>
</div>


<div style="display: none;" id="tab4" class="tab_content"> 
<b><u>Время и погода.</b></u><br><br> 31 августа. На территории школы тепло, примерно +22. Дует легкий морской ветерок. Солнечно
</font> 
</div>

<div style="display: none;" id="tab5" class="tab_content"> 
<b><u>В разработке</b></u><br><br>
</font> 
</div>

<div style="display: none;" id="tab6" class="tab_content"> 
<b><u>На 1 сентября</b></u><br><br> 
Уроков не будет, но собрание для преподавателей начнется в 11 в кабинете директора, в 18 будет бал для всех и знакомство.  
</font> 
</div>

<div style="display: none;" id="tab7" class="tab_content"> 
<table><tr><td width=400px><center>
<b><i>Ротация:</i></b></a>
<!-- /http://kolubel.ru/ KOLUBEL --><div style="WIDTH: 88px; height:41px" ><center><script type="text/javascript" src="http://kolubel.ucoz.ru/rtr/1 "></script><a href="http://kolubel.mybb.ru/" target=_blank><img src=https://forumupload.ru/uploads/000c/8b/02/103450-1.gif border="0" alt="Ротация баннеров"></a></center></div>  <br /> <!-- /http://kolubel.ucoz.ru/rtr/1/ KOLUBEL -->
<a href=http://urchoice.ru/ target="_blank">
<img src="http://s005.radikal.ru/i212/1001/b3/a2328b18a862.gif" ></a></center>
</td>
<td width=400px><center><b><i>Партнеры</i></b>
<br><A HREF="http://harrypotterandthedeat.rolka.su/" TARGET=_BLANK> <IMG SRC="http://savepic.su/498374.png" TITLE="Harry Potter: Gift of the past" BORDER=0> </A> <a href='http://rpgsoul.rolka.su/' target='_blank' title='Soul Eater - New Generation.'><img src='http://s59.radikal.ru/i165/1112/d5/9f7598001f50.png' border='0' width='88' height='31' alt='Новая история, новые приключения!'></a></center></td>
</tr></table>
</div>
      </div>
    </div>
</div>

без слайдера

Код:
<!--контейнер-->
<div class="container" style="width: 800px; float: left;">
    <div class="html-box">

<ul class="tabs">
    <li class="active"><a href="#tab1">Новости</a></li>
    <li><a href="#tab2">Ссылки</a></li>
 <li><a href="#tab3">Администрация</a></li>
    <li><a href="#tab4">Время/Погода</a></li>
<li><a href="#tab5">Расписание</a></li>
<li><a href="#tab6">События в игре</a></li>
    <li><a href="#tab7">Реклама/Партнеры</a></li>
</ul>

      <div class="tab_container1">

<div style="display: block;" id="tab1" class="tab_content">
<div style="width:100%; height:220px; overflow:auto; border:solid 0px black; border-radius:8px; line-height: px;overflow:auto;scrollbar-face-color:transparent; scrollbar-highlight-color: transparent;scrollbar-shadow-color: transparent;scrollbar-3dlight-color: transparent;scrollbar-arrow-color: #39546f;scrollbar-track-color: transparent;scrollbar-darkshadow-color: transparent;">
<b><i><center><font color=red>Achtung!</font> Уважаемые гости! Если после регистрации вам не пришел пароль на почтовый ящик, то напишите в гостевую с просьбой сменить пароль. Так же сообщите ваш ник.</center></i></b>
<br><br><b><i>29.12.2011.</i></b> Итак, ваша Администрация сваливает в отпуск и будет здесь очень редко. Для тех, кто только пишет анкеты это отличная возможность все обдумать. Мы все все равно будем доступны в средствах связи. В случае чего обращайтесь к Вельзевулу или Моретте, они знают, как нас найти 
<br><b><i>1.12.2011.</i></b> *барабанная дробь* Итак, господа, настал этот момент, когда мы начинаем игру. теперь регистрация для пользователей свободна, проходите. занимайте роли, в общем, присоединяйтесь к нам. 
<br><b><i>8.10.2011.</i></b> Сейчас идет активная разработка, настройка и написание материалов для игры. Уже есть дизайн. Регистрация пользователей временно запрещена, только по приглашениям. 
</div>
</div>

<div style="display: none;" id="tab2" class="tab_content">
<table width="100%" height="250px" border="0" background="">
<td width="30%"  rowspan="2">
<p style="text-align:center;">
<font style="font:bold;font-family: Plantagenet Cherokee;letter-spacing:3px;color:#613030;text-transform:uppercase;">Важные:</font><br>
</p>
<a href="http://aleajactaest.rusff.ru/viewtopic.php?id=5">- сюжет</a><br>
<a href="http://aleajactaest.rusff.ru/viewtopic.php?id=4">- правила</a><br>
<a href="http://aleajactaest.rusff.ru/viewtopic.php?id=10">- шаблон дела</a><br>
<a href="http://aleajactaest.rusff.ru/viewtopic.php?id=54">- список ролей</a><br>
<a href="http://aleajactaest.rusff.ru/viewtopic.php?id=53">- способности</a><br>
<a href="http://aleajactaest.rusff.ru/viewtopic.php?id=6">- расы</a><br>
<a href="http://aleajactaest.rusff.ru/viewtopic.php?id=16#p43">- f.a.q.</a><br><br>
<p style="text-align:center;">
<font style="font:bold;font-family: Plantagenet Cherokee;letter-spacing:3px;color:#613030;;text-transform:uppercase;">Для гостей:</font><br>
</p>
<a href="http://aleajactaest.rusff.ru/viewtopic.php?id=2">- отзывы/предложения</a><br>
<a href="http://aleajactaest.rusff.ru/viewtopic.php?id=56#p87">- занять роль</a><br>
<a href="http://aleajactaest.rusff.ru/viewtopic.php?id=3">- ваши вопросы</a><br>
<a href="http://aleajactaest.rusff.ru/viewtopic.php?id=60">- физические характеристики</a><br>

</td>
<td width="30%"  rowspan="2">
<p style="text-align:center;">
<font style="font:bold;font-family: Plantagenet Cherokee;letter-spacing:3px;color:#613030;text-transform:uppercase;">Акции:</font><br>
</p>
<a href="http://aleajactaest.rusff.ru/viewtopic.php?id=64#p108">- Акция vol 0.1 Получи за магию</a><br>
<a href="http://aleajactaest.rusff.ru/viewtopic.php?id=65#p109">- Акция vol 0.2 фак ю</a><br><br>
<p style="text-align:center;">
<font style="font:bold;font-family: Plantagenet Cherokee;letter-spacing:3px;color:#613030;text-transform:uppercase;">Пользовательские:</font><br>
</p>
<a href="http://aleajactaest.rusff.ru/viewtopic.php?id=55#p86">- занятые внешности</a><br>
<a href="http://aleajactaest.rusff.ru/viewtopic.php?id=14">- отсутствие/уход</a><br>
<a href="http://aleajactaest.rusff.ru/viewtopic.php?id=17">- поиск партнера</a><br>
<a href="http://aleajactaest.rusff.ru/viewtopic.php?id=63#p101">- Передача, приобретение, повышение</a><br>
<a href="http://aleajactaest.rusff.ru/viewtopic.php?id=19">- заселение в общежитие</a><br>
<a href="http://aleajactaest.rusff.ru/viewtopic.php?id=61">- заполнение профиля</a><br>
<a href="http://aleajactaest.rusff.ru/viewtopic.php?id=20">- заказ аватара</a><br>
<a href="http://aleajactaest.rusff.ru/viewtopic.php?id=13">- объявления от администрации</a><br>
<a href="http://aleajactaest.rusff.ru/viewforum.php?id=6">- квестовый раздел</a><br>
<a href="http://aleajactaest.rusff.ru/viewforum.php?id=30">- флешбек</a><br>
<a href="http://aleajactaest.rusff.ru/viewforum.php?id=7">- отношения</a><br>
</td>
<td width="30%"  rowspan="2">
<p style="text-align:center;">
<font style="font:bold;font-family: Plantagenet Cherokee;letter-spacing:3px;color:#613030;;text-transform:uppercase;">Рекламные:</font><br>
</p>
<a href="http://aleajactaest.rusff.ru/viewtopic.php?id=57#p88">- правила/наша реклама</a><br>
<a href="http://aleajactaest.rusff.ru/viewtopic.php?id=58#p89">- ваша реклама</a><br>
</td>
</tr>
</table>
</div>

<div style="display: block;" id="tab3" class="tab_content"> 
<center><i><a href="http://aleajactaest.rusff.ru/profile.php?id=2">Superbia</a><br>
Бог мира сего, Всемогущая и просто ваша повелительница. Весьма странная и веселая особа. Редко проверяет анкеты, но заправляет всем и вся на форуме. Именно ей пришла идея о создании ролевой. Она так же заведует дизайном и проверяет всю информацию. <br><br><i><a href="http://aleajactaest.rusff.ru/profile.php?id=5"> Decessus</a><br>
Второй управляющий миром. является тем, кто написал добрую часть информации, правда перед этим обсудив ее со Всемогущей. Строг при приеме, но добр к игрокам, если они только не клеятся к Богине.</i></center>
</div>


<div style="display: none;" id="tab4" class="tab_content"> 
<b><u>Время и погода.</b></u><br><br> 31 августа. На территории школы тепло, примерно +22. Дует легкий морской ветерок. Солнечно
</font> 
</div>

<div style="display: none;" id="tab5" class="tab_content"> 
<b><u>В разработке</b></u><br><br>
</font> 
</div>

<div style="display: none;" id="tab6" class="tab_content"> 
<b><u>На 1 сентября</b></u><br><br> 
Уроков не будет, но собрание для преподавателей начнется в 11 в кабинете директора, в 18 будет бал для всех и знакомство.  
</font> 
</div>

<div style="display: none;" id="tab7" class="tab_content"> 
<table><tr><td width=400px><center>
<b><i>Ротация:</i></b></a>
<!-- /http://kolubel.ru/ KOLUBEL --><div style="WIDTH: 88px; height:41px" ><center><script type="text/javascript" src="http://kolubel.ucoz.ru/rtr/1 "></script><a href="http://kolubel.mybb.ru/" target=_blank><img src=https://forumupload.ru/uploads/000c/8b/02/103450-1.gif border="0" alt="Ротация баннеров"></a></center></div>  <br /> <!-- /http://kolubel.ucoz.ru/rtr/1/ KOLUBEL -->
<a href=http://urchoice.ru/ target="_blank">
<img src="http://s005.radikal.ru/i212/1001/b3/a2328b18a862.gif" ></a></center>
</td>
<td width=400px><center><b><i>Партнеры</i></b>
<br><A HREF="http://harrypotterandthedeat.rolka.su/" TARGET=_BLANK> <IMG SRC="http://savepic.su/498374.png" TITLE="Harry Potter: Gift of the past" BORDER=0> </A> <a href='http://rpgsoul.rolka.su/' target='_blank' title='Soul Eater - New Generation.'><img src='http://s59.radikal.ru/i165/1112/d5/9f7598001f50.png' border='0' width='88' height='31' alt='Новая история, новые приключения!'></a></center></td>
</tr></table>
</div>
      </div>
    </div>
</div>

0

10

А у меня стрелочки почему то не отображаются....

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

0