Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.08.2012, 19:51
Ray Ray вне форума
Новичок на форуме
Отправить личное сообщение для Ray Посмотреть профиль Найти все сообщения от Ray
 
Регистрация: 21.08.2012
Сообщений: 1

кнопки след. слайд, пред. слайд
необходимо добавить активные кнопки "вперед/назад" для 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>

Последний раз редактировалось Ray, 21.08.2012 в 19:54.
Ответить с цитированием
  #2 (permalink)  
Старый 22.08.2012, 10:04
Аватар для LittlePony
Кандидат Javascript-наук
Отправить личное сообщение для LittlePony Посмотреть профиль Найти все сообщения от LittlePony
 
Регистрация: 19.08.2012
Сообщений: 100

Например можно по нажатию на эти кнопки эмулировать нажатие на превьюшку, являющуюся следующей или предыдущей по отношению к той, которая имеет класс active.
Ответить с цитированием
  #3 (permalink)  
Старый 22.08.2012, 10:22
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Ray,
А ссылка на тестовую страницу - есть ?
Cделайте скриншот текущего и пририсуйте кнопки
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск