Это скрипт слайдера, позволяющий по клику на стрелки переходить на следующий/предыдущий слайды.
Код:<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>
Это всё остальное, уже настроенное под форум.
Код:<!-- Cлайдер--> <style type="text/css"> #slideshow { margin: 0 auto; width: 445px; height: 31px; margin: 595px auto 0 auto; margin-left: 30px; background: transparent; position: relative; } #slideshow #slidesContainer { margin: 0 auto; width: 365px; height: 31px; overflow: none; position: relative; } #slideshow #slidesContainer .slide { margin: 0 auto; width: 345px; height: 31px; } .control { display: block; width: 13px; height: 31px; text-indent: -10000px; position: absolute; cursor: pointer; z-index: 100; } #leftControl { top: 0; left: 0; background: transparent url(http://uploads.ru/i/S/4/H/S4Hhb.png) no-repeat 0 0; } #rightControl { top: 0; right: 0; background: transparent url(http://uploads.ru/i/i/a/Z/iaZ3E.png) no-repeat 0 0; } </style>Код:<div id="slideshow"> <div id="slidesContainer"> <div class="slide"> <a target="_blank" href="http://truevampire.rolka.su"><img src="https://forumstatic.ru/files/0011/7a/6b/45986.gif" width="88" height="31"></a> <a href="http://kirin.rolbb.ru/" title=" Dream High" target="_blank"><img src="http://uploads.ru/i/3/P/g/3PgHM.gif" border="0" width="88" height="31"></a> <a href="http://wolfsliveantarctica.rolka.su" target="_blank"><img src="http://savepic.net/2681017.gif" border="0" title="Волчья Жизнь" width=88 height=31></a> <a href="http://playart.rusff.ru/" target="_blank"><img src="http://uploads.ru/i/5/r/I/5rImY.gif" border="0" alt="PLAY ART"/></a> </div> <div class="slide"> <a href="http://hptertium.f-rpg.ru/" target="_blank"><img src="http://uploads.ru/i/B/H/S/BHSlM.jpg" title="Хогвартс. Другая сторона." width="88" height="31"></a> <a href="http://reviews.rusff.ru/" target="_blank"><img src="http://uploads.ru/i/9/F/g/9FgQh.gif" title="'Пёс' помощь форумам, обзоры, критика" width="88" height="31"></a> <a href="http://screamsoul.rusff.ru/"><img src="http://uploads.ru/i/L/j/K/LjKoh.gif" width="88" height="31" border=0 alt="Официальное приглашение на Soul Scream"></a> <a href="http://www.rigii008.mybb.ru/"><img src="https://forumupload.ru/uploads/000f/55/8a/87-1.gif" title="Волшебный мир..." /> </div> <div class="slide"> <a href="http://alarmme.ru/" title="Alarm with LA me" target=_blank> <img src="http://uploads.ru/t/r/w/O/rwOYN.gif"></a" border="0" alt="LA me"></a> </div> </div></div>
Эскизы:
Стрелки:
Что нужно сделать:
1) На первом слайдер нет левой стрелки, т.к. назад на первом слайде листать невозможно. Нужно сделать так, чтобы там находилась полупрозрачная стрелка, на которую нельзя кликнуть.
То же самое с последним слайдом - правой стрелкой.
2) Слайдер статичен сам по себе. Чтобы просмотреть слайды, нужно кликать на стрелки.
Нужно сделать так, чтобы он ещё и сам по себе листался.