css
Код:
#slideshow { margin:0 auto; width:370px; height: 120px; position:relative; line-height: 10px;} #slideshow #slidesContainer { margin:0 auto; width:300px; height: 120px; overflow:auto; /* allow scrollbar */ position:relative;} #slideshow #slidesContainer .slide { margin:0 auto; width:300px; height:120px;} .control { display:block; width: 100px; height: 163px; text-indent:-10000px; position:absolute; cursor: pointer;} #leftControl { top: 45px; left: 10px; background:transparent url(адрес левой стрелки) no-repeat 0 0;} #rightControl { top: 45px; right: -70px; background:transparent url(адрес правой стрелки) no-repeat 0 0;} .slide h2, .slide p { margin:15px; } .slide h2 { letter-spacing:-1px; } .slide img { float:right; margin:0 15px; }
html-низ
Код:
<script type="text/javascript"> $(document).ready(function(){ var currentPosition = 0; var slideWidth = 330; var slides = $('.slide'); var numberOfSlides = slides.length; // Remove scrollbar in JS $('#slidesContainer').css('overflow', 'hidden'); // Wrap all .slides with #slideInner div slides .wrapAll('<div id="slideInner"></div>') // Float left to display horizontally, readjust .slides width .css({ 'float' : 'right', 'width' : slideWidth }); // Set #slideInner width equal to total width of all slides $('#slideInner').css('width', slideWidth * numberOfSlides); // Insert controls in the DOM $('#slideshow') .prepend('<span class="control" id="leftControl">Clicking moves left</span>') .append('<span class="control" id="rightControl">Clicking moves right</span>'); // Hide left arrow control on first load manageControls(currentPosition); // Create event listeners for .controls clicks $('.control') .bind('click', function(){ // Determine new position currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1; // Hide / show controls manageControls(currentPosition); // Move slideInner using margin-left $('#slideInner').animate({ 'marginLeft' : slideWidth*(-currentPosition) }); }); // manageControls: Hides and Shows controls depending on currentPosition function manageControls(position){ // Hide left arrow if position is first slide if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() } // Hide right arrow if position is last slide if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() } } }); </script>
слайд-бар
Код:
<div id="pageContainer"> <h1></h1> <!-- Slideshow HTML --> <div id="slideshow"> <div id="slidesContainer"> <div class="slide"> <p><a href="http://nstdart.ru/viewforum.php?id=30"><img src="http://funkyimg.com/u2/403/856/_png.png" width="70" height="70" alt= /></a><p style="text-align: center;"><strong><span style="font-family: arial,helvetica,sans-serif;"><span style="font-size: small;">ДЕЙСТВУЮЩИЕ КОНКУРСЫ</span></span></strong></p><a href="http://nstdart.ru/viewtopic.php?id=3251">Здесь</a> и <a href="http://nstdart.ru/viewtopic.php?id=3181">здесь</a> вы можете проголосовать в первом туре конкурса "Две звезды" и "Фильм недели" соответственно. Давайте делать нашу жизнь ярче, ведь участвовать и побеждать в конкурсе так приятно! <br> <p> </div> <div class="slide"> <p><a href="http://nstdart.ru/viewtopic.php?id=2427#p137350"><img src="http://funkyimg.com/u2/559/506/ge.png" width="70" height="70" alt= /></a><p style="text-align: center;"><strong><span style="font-family: arial,helvetica,sans-serif;"><span style="font-size: small;">БЛОГ АДМИНИСТРАТОРОВ</span></span></strong></p>Осенью тема вдохновения стоит как нельзя остро. Смотришь в окно, а за ним серость и слякоть, а где же красота стихий? Нестандарт отменяет конец лета! Мы обещаем, что не дадим убежать вашей музе далеко. <br> <p> </div> <div class="slide"> <p><a href="http://nstdart.ru/viewtopic.php?id=2747&p=2#p137346"><img src="http://funkyimg.com/u2/957/267/Green.png" width="70" height="70" alt= /></a><p style="text-align: center;"><strong><span style="font-family: arial,helvetica,sans-serif;"><span style="font-size: small;">ЛУЧШИЕ РАБОТЫ ЗА ДЕНЬ</span></span></strong></p><a href="http://nstdart.ru/viewtopic.php?id=2747&p=2#p137346">Здесь</a> можно просмотреть лучшие работы. Сегодняшний день радовал нас вашими успехами в фотошопе. Аватары дня от мастера <b>mr. snape</b> и ученицы <b>.lost in love</b>. Стошки дня были выполнены <b>шум пандоры</b>.<br> <p> </div> </div> </div> <!-- Slideshow HTML --> <div id="footer"> </div> </div>