добавить следующую и предыдущую кнопку в слайдере jQuery

Я сделал несколько сценариев ниже, чтобы сделать простой слайд-шоу fadeInOut. Теперь я хочу добавить Next/Prv buttton. Как мне это сделать?добавить следующую и предыдущую кнопку в слайдере jQuery

Вот мой HTML ниже:

<body> 
    <div id="slider-main-part"> 
     <img class="slider-img" src="images/slider01.jpg" /> 
     <img class="slider-img" src="images/slider02.jpg" /> 
     <img class="slider-img" src="images/slider03.jpg" /> 
     <img class="slider-img" src="images/slider04.jpg" /> 
    </div> 
</body>

Вот мой JavaScript/JQuery ниже:

$(document).ready(function (e) { 
var slider = { 
    init: function() { 
     var initialFadeIn = 1000; 
     var itemInterval = 5000; 
     var fadeOut = 2500; 
     var numberOfItems = $('.slider-img').length; 
     var currentItem = 0; 
     //show first item 
     $('.slider-img').eq(currentItem).fadeIn(initialFadeIn); 
     //loop through the items 
     var infiniteLoop = setInterval(function() { 
      $('.slider-img').eq(currentItem).fadeOut(fadeOut); 
      if (currentItem == numberOfItems - 1) { 
       currentItem = 0; 
      } else { 
       currentItem++; 
      } 
      $('.slider-img').eq(currentItem).fadeIn(fadeOut); 
     }, itemInterval); 
    } 
}; 
slider.init();

});

Здесь я присоединять мою CSS ниже:

#slider-main-part { 
    position: relative; 
    zoom:1; 
    margin:auto; 
    width:980px; 
} 
.slider-img { 
    display: none; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width:980px; 
    border:none; 
    height:551px; 
}

источник

2013-06-27 jignesh kheni

Мы не можем реализовать целую функцию для вас. Что вы сделали для этих функций до сих пор? – SomeShinyObject

я попытался функции сделать согласно вашему требованию. Надеюсь, все в порядке.

$(document).ready(function(e) { 
    slider(); 

    $('.slider_nav span').click(function(e){ 
     var n = e.target.getAttribute('name'); 
     if (n=='prev') { 
      if(currentitem == 1){ 
       next_slide =imglength 
      }else{ 
       next_slide =currentitem-1; 
      } 
     } else if(n=='next') { 
      if(currentitem == imglength){ 
       next_slide = 1 
      }else{ 
       next_slide =currentitem+1; 
      } 
      } 
     else { 
      return; 
     } 
     animate_slider(); 
    }); 
}); 
function slider() { 
    var currentitem= 1; 
    var next_slide; 
    var imglength = $('.slider-main-part img').length; // total images 
    var setinterval = setInterval(choose_next,5000); 

    $('.slider-main-part #1').fadeIn(1000); //show 1st image 
    $('.slider_nav , .slider-main-part img').hover(function(){ 
    clearInterval(setinterval); // stop animation 
    }, function() { 
    setinterval = setInterval(choose_next,5000); // resume animation 
}); 

function animate_slider(){ 
    $('.slider-main-part #'+currentitem).fadeOut(1000); 
    $('.slider-main-part #'+next_slide).fadeIn(1000); 
    currentitem = next_slide; 
} 
function choose_next() { 
    if(currentitem == imglength){ 
    next_slide =1 
    } 
    else{ 
    next_slide =currentitem+1; 
    } 
    animate_slider(); 
}

источник

2013-07-02 10:14:49

добавить следующую и предыдущую кнопку в слайдере jQuery

ответ

Смежные вопросы