1. Ссылка на форум:
http://fmatfotl.rusff.ru/
2. Эскиз таблицы:
http://pic.lg.ua/x/9/a95f07/759ca2b0.jpg
3. Дополнительные предпочтения:
Всего пять слайдов. Картинки и заполнение сделаем самостоятельно.
Прошу прощения, если это не слайдер.
Таблица. Слайдер
Сообщений 1 страница 4 из 4
Поделиться127.11.12 15:57
Поделиться227.11.12 15:59
А картинки сразу не дадите?
Поделиться327.11.12 16:17
Бу
- К сожалению, я не знаю, какого размера должны будут быть картинки. Я могу кинуть на глаз, Вы растяните, я потом переделаю под нормальные размеры, можно так?
Поделиться428.11.12 11:39
SamTayJerome421
поставила пока значения на глазок, в хтмл верх пометила ,что и где изменять, и, что за что отвечает. Возможно, когда установите картинки, нужно будет изменить некоторые значения, так как все они сейчас относительны. Чтобы подредактировать слайдер идем в эту тему: Горизонтальный слайдер . Возникнут вопросы в лс или новую тему создадите.
<style type="text/css"> <!-- #slideshow { margin:0 auto; width:560px; height:263px; background:transparent url(фон слайдера) no-repeat 0 0; position:relative; } #slideshow #slidesContainer { margin:0 auto; width:480px; height:263px; overflow:auto; /* поддержка прокрутки */ position:relative; } #slideshow #slidesContainer .slide { margin:0 auto; width:460px; /* На двадцать пикселей меньше чем ширина #slidesContainer */ height:263px; } .control { display:block; width:44px; /* ширина стрелок */ height:125px; /* высота стрелок */ text-indent:-10000px; position:absolute; cursor: pointer; } #leftControl { top:0; right:510px; /* отодвигаем стрелку влево, чем больше значение, тем левее стрелка */ background:transparent url(левая стрелка, ссылка на картинку) no-repeat 0 0; } #rightControl { top:0; left:480px; /* отодвигаем стрелку вправо, чем больше значение, тем правее стрелка */ background:transparent url(правая стрелка) no-repeat 0 0; } .slide h2, .slide p { margin:15px; } .slide img { float:right; margin:0 15px; } --> </style>
<script type="text/javascript"> $(document).ready(function(){ var currentPosition = 0; var slideWidth = 480; 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>
<table width="700px" height="300px"> <tr> <td rowspan="2" width="200px" height="300px">картинка </td> <td> <center><div id="slideshow"> <div id="slidesContainer"> <div class="slide"> 1 слайдер </div> <div class="slide"> 2 слайдер </div> <div class="slide"> 3 слайдер </div> <div class="slide"> 4 слайдер </div> <div class="slide"> 5 слайдер </div> </div> </center></td> </tr> <tr> <td> топы </td> </tr> </table>