1. Ссылка на форум: http://chaosgeneration.rolevaya.com/
2. Эскиз таблицы:
3. Дополнительные предпочтения:
Плеер будет такого типа Ccылка
Отредактировано Jii-Jo (01.09.13 15:12)
ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов |
Привет, Гость! Войдите или зарегистрируйтесь.
Вы здесь » ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов » Заказать дизайн, графику или скрипты » Заказать верстку и скрипты » [Выполнено] Таблица.
1. Ссылка на форум: http://chaosgeneration.rolevaya.com/
2. Эскиз таблицы:
3. Дополнительные предпочтения:
Плеер будет такого типа Ccылка
Отредактировано Jii-Jo (01.09.13 15:12)
актуально
BBS
Заказ принимаю. (:
Сколько нужно слайдов?
Jii-Jo
Ура)))
4 слайда)
BBS
Пробуем:
Код:<style type="text/css"> #slideshow { margin:0 auto; width:234px; height: 263px; position:relative; } #slideshow #slidesContainer { margin:0 auto; width:840px; height:340px; overflow:auto; /* поддержка прокрутки */ position:relative; } #slideshow #slidesContainer .slide { margin:0 auto; width:840px; /* На двадцать пикселев меньше чем ширина #slidesContainer */ height:340px; } .control { display: block !important; width: 96px; height: 34px; text-indent:-10000px; position:absolute; cursor: pointer; z-index: 2; } #leftControl { top: 224px; left:0; /* отодвигаем стрелку влево, чем больше значение, тем левее стрелка */ background: transparent url(http://s4.uploads.ru/Qosya.png) no-repeat 0 0; } #rightControl { top: 224px; right:2px; /* отодвигаем стрелку вправо, чем больше значение, тем правее стрелка */ background: transparent url(http://s4.uploads.ru/txbHZ.png) no-repeat 0 0; } </style>
Код:<script type="text/javascript"> $(document).ready(function(){ var currentPosition = 0; var slideWidth = 840; 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 style="width: 100px; height: 60px; margin-left: 390px; "> <p style="padding-top: 130px;"> <script language="javascript"> var links = new Array("1_баннер", "2_баннер"); var los = Math.floor(Math.random() * links.length) document.write (links[los]); </script> </p> </div> <table border="0" cellpadding="1" cellspacing="1" style="width: 790px; height: 463px; background: url(http://s5.uploads.ru/0MV8E.jpg);"> <tbody> <tr> <td style="width: 490px; height: 190px; padding: 2px;"> <div style="margin-left: 22px; margin-bottom: 40px; margin-top: 59px; height: 130px; width: 323px; overflow-y: scroll;"> Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст </div></td> <td rowspan="3" style="width: 245px; height: 455px; padding: 2px;"> <div style="overflow-y: scroll; overflow-x: hidden; width: 250px; height: 280px; margin-left: 19px; margin-top: 86px;"> <!-- Начало таблицы меню --> <div id="slideshow"> <div id="slidesContainer"> <!-- Первый слайд --> <div class="slide"> Первый слайд </div> <!-- Второй слайд --> <div class="slide"> Второй слайд </div> <!-- Третий слайд --> <div class="slide"> Третий слайд </div> <!-- Четвертый слайд --> <div class="slide"> Четвертый слайд </div> </div> <!-- Конец меню --> </div></td> </tr> <tr> <td style="width: 490px; height: 170px; padding: 2px;"> <div style="width: 468px; height: 120px; margin-bottom: 16px; margin-left: 22px; overflow-y: scroll;"> <p>2Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст </div></td> </tr> <tr> <td style="width: 490px; padding: 2px;"> <div style="width: 368px; height: 40px; margin-left: 34px; margin-top: -26px; overflow: hidden;"> <p>3Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст </div></td> </tr> </tbody> </table>
Jii-Jo, все замечательно, но можно ли сделать так, что бы стрелки в слайдах не ездили наверх?
BBS
Попробуйте так:
Код:<script type="text/javascript"> $(document).ready(function(){ var currentPosition = 0; var slideWidth = 243; 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:234px; height: 248px; position:relative; } #slideshow #slidesContainer { margin:0 auto; width:253px; height:248px; overflow:auto; /* поддержка прокрутки */ position:relative; } #slideshow #slidesContainer .slide { margin:0 auto; width:243px; /* На двадцать пикселев меньше чем ширина #slidesContainer */ height:248px; overflow-y: scroll; } .control { display: block !important; width: 96px; height: 34px; text-indent:-10000px; position:absolute; cursor: pointer; z-index: 2; } #leftControl { top: 246px; left:0; /* отодвигаем стрелку влево, чем больше значение, тем левее стрелка */ background: transparent url(http://s4.uploads.ru/Qosya.png) no-repeat 0 0; } #rightControl { top: 246px; right:2px; /* отодвигаем стрелку вправо, чем больше значение, тем правее стрелка */ background: transparent url(http://s4.uploads.ru/txbHZ.png) no-repeat 0 0; } </style>
Отредактировано Jii-Jo (01.09.13 13:05)
Jii-Jo
Полоса прокрутки все равно видна.. и их почему-то стало две.
Может заменить слайд на вкладки раз не получается?
BBS
Я гениален. ._. забыла скинуть объявление.
Код:<div style="width: 100px; height: 60px; margin-left: 390px; "> <p style="padding-top: 130px;"> <script language="javascript"> var links = new Array("1_баннер", "2_баннер"); var los = Math.floor(Math.random() * links.length) document.write (links[los]); </script> </p> </div> <table border="0" cellpadding="1" cellspacing="1" style="width: 790px; height: 463px; background: url(http://s5.uploads.ru/0MV8E.jpg);"> <tbody> <tr> <td style="width: 490px; height: 190px; padding: 2px;"> <div style="margin-left: 22px; margin-bottom: 40px; margin-top: 59px; height: 130px; width: 323px; overflow-y: scroll;"> Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст </div></td> <td rowspan="3" style="width: 245px; height: 455px; padding: 2px;"> <div style="overflow: hidden; width: 250px; height: 280px; margin-left: 19px; margin-top: 86px;"> <!-- Начало таблицы меню --> <div id="slideshow"> <div id="slidesContainer"> <!-- Первый слайд --> <div class="slide"> Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст </div> <!-- Второй слайд --> <div class="slide"> Второй слайд </div> <!-- Третий слайд --> <div class="slide"> Третий слайд </div> <!-- Четвертый слайд --> <div class="slide"> Четвертый слайд </div> </div> <!-- Конец меню --> </div></td> </tr> <tr> <td style="width: 490px; height: 170px; padding: 2px;"> <div style="width: 468px; height: 120px; margin-bottom: 16px; margin-left: 22px; overflow-y: scroll;"> <p>2Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст </div></td> </tr> <tr> <td style="width: 490px; padding: 2px;"> <div style="width: 368px; height: 40px; margin-left: 34px; margin-top: -26px; overflow: hidden;"> <p>3Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст </div></td> </tr> </tbody> </table>
Jii-Jo
Огромное спасибо за проделанную работу))
Вы здесь » ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов » Заказать дизайн, графику или скрипты » Заказать верстку и скрипты » [Выполнено] Таблица.