Ray

необходимо добавить активные кнопки "вперед/назад" для JS слайдера. slider.js var currentImage; var currentIndex = -1; var interval; function showImage(index){ if(index < $('#bigPic img').length){ var indexImage = $('#bigPic img')[index] if(currentImage){ if(currentImage != indexImage ){ $(currentImage).css('z-index',2); clearTimeout(myTimer); $(currentImage).fadeOut(250, function() { myTimer = setTimeout("showNext()", 3000); $(this).css({'display':'none','z-index':1}) }); } } $(indexImage).css({'display':'block', 'opacity':1}); currentImage = indexImage; currentIndex = index; $('#thumbs li').removeClass('active'); $($('#thumbs li')[index]).addClass('active'); } } function showNext(){ var len = $('#bigPic img').length; var next = currentIndex < (len-1) ? currentIndex + 1 : 0; showImage(next); } var myTimer; $(document).ready(function() { myTimer = setTimeout("showNext()", 3000); showNext(); //loads first image $('#thumbs li').bind('click',function(e){ var count = $(this).attr('rel'); showImage(parseInt(count)-1); }); }); slider.css html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; outline: 0; font-weight: normal; } *{outline:none;} html{ margin: 0; padding: 0; } #footer{ padding-top:10px; width:979px; margin:0pt 0px; } #bigPic{ width:800px; height:300px; padding:1px; } #bigPic img{ position:absolute; display:none; } ul#thumbs li.active{ border:2px solid #000; background:#fff; padding:2px; float: left; border-radius:6px } ul#thumbs li{ float:left; margin-right:25px; border:1px solid #CCC; padding:3px; cursor:pointer; background:transparent url(../images/fon2.jpg) repeat-x; border-radius: 10px } ul#thumbs img{ float:left; line-height:80px; } } html: <div id='wrapper'> <div id='body'> <div id="bigPic"> <img src="images/slider/1.jpg" alt="" /> <img src="images/slider/2.jpg" alt="" /> <img src="images/slider/3.jpg" alt="" /> <img src="images/slider/4.jpg" alt="" /> <img src="images/slider/5.jpg" alt="" /> <img src="images/slider/6.jpg" alt="" /> <img src="images/slider/7.jpg" alt="" /> <img src="images/slider/8.jpg" alt="" /> <img src="images/slider/9.jpg" alt="" /> <img src="images/slider/10.jpg" alt="" /> </div> </td> </tr> <ul id="thumbs"> <li class='active' rel='1'> <img src="images/slider/1_thumb.jpg" alt="" /></li> <li rel='2'><img src="images/slider/3_thumb.jpg" alt="" /></li> <li rel='3'><img src="images/slider/4_thumb.jpg" alt="" /></li> <li rel='4'><img src="images/slider/5_thumb.jpg" alt="" /></li> <li rel='5'><img src="images/slider/6_thumb.jpg" alt="" /></li> <li rel='6'><img src="images/slider/7_thumb.jpg" alt="" /></li> <li rel='7'><img src="images/slider/8_thumb.jpg" alt="" /></li> <li rel='8'><img src="images/slider/9_thumb.jpg" alt="" /></li> <li rel='9'><img src="images/slider/10_thumb.jpg" alt="" /></li> <li rel='10'><img src="images/slider/2_thumb.jpg" alt="" /></li> </ul> </div> </div>

уже решил проблему достатачно было применить overflow: hidden; width: 1140px;

Необходимо зафиксировать слайдер так. При фул скрине браузера я вижу: http://i060.radikal.ru/1208/b9/faf602214487.jpg Стоит перевести браузер в оконный режим, как одно из изображений падает на строку ниже: http://s45.radikal.ru/i108/1208/98/95df4218767e.jpg код слайдера: html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: normal; } *{outline:none;} html{ margin: 0; padding: 0; } #footer{ padding-top:10px; width:979px; margin:0pt 0px; } #bigPic{ width:800px; height:300px; padding:1px; } #bigPic img{ position:absolute; display:none; } ul#thumbs li.active{ border:2px solid #000; background:#fff; padding:2px; float: left; } ul#thumbs li{ float:left; margin-right:25px; border:1px solid #CCC; padding:3px; cursor:pointer; background:transparent url(../images/fon2.jpg) repeat-x; } ul#thumbs img{ float:left; line-height:80px; } подскажите, в чем проблема?