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

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

Поделиться101.02.13 16:34

Автор: LAP
Призрак
Последний визит:
21.03.13 20:21
Уважение: +2

я не знаю, возможно ли смастерить такую таблицу :з
1. Ссылка на форум: его пока нет, но будет по тематике котов-воителей.
2. Эскиз таблицы: 1 лист 2 лист 3 лист
3. Дополнительные предпочтения: рамки не видно, а отступ текста внутри ячеек от рамки был не меньше 15 пикселей. размер шрифта в таблице равен 10рх.
это стрелки: лево право
также хочу спросить, каким образом делается, что за ссылками появляется фон? пример:

в тех местах, где ничего не перелистывется хочу такую навигацию т_т если это делается еще в коде таблицы, то пожалуйста сделайте.
и у меня просьба показать мне, как менять фон таблицы и цвет того самого фона за ссылками, чтобы я могла менять его с изменением дизайна.

Поделиться204.02.13 11:30

Автор: LAP
Призрак
Последний визит:
21.03.13 20:21
Уважение: +2

Прошу прощения за повторение, не могли бы вы принять заказ?

Поделиться307.02.13 09:38

Автор: Jii-Jo
Призрак
Последний визит:
18.04.14 17:05
Уважение: +392

LAP
возьму.
хотелось бы уточнить цвет фона или картинку в фон таблицы и/или слайдера.

Поделиться407.02.13 21:23

Автор: LAP
Призрак
Последний визит:
21.03.13 20:21
Уважение: +2

Jii-Jo написал(а):

LAP
возьму.
хотелось бы уточнить цвет фона или картинку в фон таблицы и/или слайдера.

спасибо .D
дело в том, что мне фон не нужен, так как дизайн еще не сделан. я просто хотела бы знать, где его можно поменять/вставить, чтобы уже самостоятельно изменять цвет фона таблицы при появлении новых дизайнов.

Поделиться511.02.13 06:34

Автор: Jii-Jo
Призрак
Последний визит:
18.04.14 17:05
Уважение: +392

LAP
приношу огромные извинения, что пропала..

фон

#slideshow {
margin:0 auto;
width:300px;
height:400px;
background: url(фон) no-repeat 0 0;
background: #e6eaf6;
position:relative;
}
.....
#slideshow #slidesContainer .slide {
margin:0 auto;
width:280px; /* На двадцать пикселей меньше чем ширина #slidesContainer */
height:400px;
background: url(фон);
border-radius: 25px;
}

сам код

Код:

<style type="text/css">
<!--
#slideshow {
margin:0 auto;
width:300px;
height:400px;
background: url(фон) no-repeat 0 0;
    background: #e6eaf6;
position:relative;
}
#slideshow #slidesContainer {
  margin:0 auto;
  width:300px;
  height:400px;
  overflow:auto; /* поддержка прокрутки */
  position:relative;
}
#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:280px; /* На двадцать пикселей меньше чем ширина #slidesContainer */
  height:400px;
background: url(фон);
border-radius: 25px;
}
.control {
  display:block;
  width:52px; /* ширина стрелок */
  height:36px; /* высота стрелок */
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}
#leftControl {
top: 110px;
left: -45px; /* отодвигаем стрелку влево, чем больше значение, тем левее стрелка */
  background:transparent url(http://s3.uploads.ru/nipbU.png) no-repeat 0 0;
}
#rightControl {
top: 110px;
left: 300px;  /* отодвигаем стрелку вправо, чем больше значение, тем правее стрелка */
  background:transparent url(http://s3.uploads.ru/5Gi2Z.png) no-repeat 0 0;
}
.slide h2, .slide p {
  margin:15px;
}
.slide img {
  float: center;
  margin:0 15px;
}
-->
</style>
<script type="text/javascript">
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 280;
  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>

<center top><table width="900px" height="400px">
<tr>
<td rowspan="2" width="300px" height="200px" font-size: 10px;>
<p><b>Очередь постов</b><p>
должников нет
</td>
<td><div id="slideshow">
    <div id="slidesContainer">
<div class="slide">
<center>1 слайд
</div>

<div class="slide">
<center>2 слайд
</div>

<div class="slide">
<table>
<tr>
<td width="260px" height="150px"><center>1</td>
<td width="260px" height="250px"><center>2</td>
</tr>
<tr>
<td width=520px" height="40px"><center>баннеры баннеры баннеры баннеры баннеры баннеры баннеры баннеры баннеры баннеры </td>
</tr>
</table>
</div>
<td rowspan="3" width="300px" height="200px" font-size: 10px;>
<p><b>Очередь постов</b><p>
должников нет
</td>
    </div>
</center></td>
</tr>
</table></center>

Поделиться611.02.13 21:57

Автор: LAP
Призрак
Последний визит:
21.03.13 20:21
Уважение: +2

Jii-Jo
благодарю :з

Поделиться712.02.13 08:30

Автор: Jii-Jo
Призрак
Последний визит:
18.04.14 17:05
Уважение: +392

LAP
все отображается хорошо, да? тему закрывать?

Поделиться813.02.13 09:51

Автор: LAP
Призрак
Последний визит:
21.03.13 20:21
Уважение: +2

Jii-Jo написал(а):

LAP
все отображается хорошо, да? тему закрывать?

все нормально, но вот только вы ширину и высоту перепутали) в табличке высота 300 а ширина ячеек разная)

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

Меню навигации

Пользовательские ссылки

Объявление

🎧 Подкаст «НЕТЕРОЛЕВЫЕ»

🍁 Что такое осень? Конкурс осенних дизайнов!

🔥 Акция! Осенние скидки на Мгновенные уведомления

❤️ Поддержи проект! Стань модератором!

💌 Акция! Подписка, лайк, коммент, репост!

🌟 SPECIAL OFFER: We distribute designs for free

❤️ Support the project

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