1. Ссылка на форум - http://cwvr.mybb.ru/ (НО!: действие происходит на тестовике)
2. Код таблицы - я его пока даже не переписал нормально... так что простите :с
<style type="text/css"> <!-- #slideshow { margin:0 auto; width:640px; height:263px; background:transparent url(ссылка_на_фон_вкладок) no-repeat 0 0; position:relative; } #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("http://i62.fastpic.ru/big/2014/0514/96/be3e895a391f7a5db59694e31af67c96.png") no-repeat 0 0; } #rightControl { top:0; right:0; background:transparent url("http://i64.fastpic.ru/big/2014/0514/06/f318f2afc4e5430474ef8542bca10f06.png") 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 = 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> <div id="slideshow"> <div id="slidesContainer"> <div class="slide"> <p><img src="ссылка_на_картинку" /> Ваш текст здесь</p> </div> <div class="slide"> <p><img src="ссылка_на_картинку" /> Ваш текст здесь</p> </div> </div>
3. Текст в таком же виде, в каком вы желаете видеть его в таблице (для каждой ячейке отдельно) -
Мне не нужны "скелеты", это не трудно. Я хотел бы привести в пример этот форум. Обычный слайдер в обьявлении и точки внизу, загорающиеся последовательно с "пролистыванием" слайдера (упустим момент, что листает он в обратную сторону о.о). Вопрос прост - каков скрипт данных точек и как его связать с кодиком слайдера? Если трудно его вычленить из имеющегося кода, киньте скрипт всея таблицы с такой плюшкой.