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

Я создал базовый слайдер jQuery после a tutorial from TheHelpingDevelop. Я изменил слайдер на гибкую ширину и заставил изображения исчезать вместо слайда.Как добавить предыдущие и следующие кнопки в свой ползунок jQuery?

Я хотел бы знать, как включить предыдущие и следующие кнопки в слайдере.

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Slider</title> 
    <script type="text/javascript" src="js/jquery.js"></script> 

    <style type="text/css"> 
    .slider{ 
     position: relative; 
     width:80%; 
     height:350px; 
     overflow: hidden; 
     margin: 30px auto; 
    } 

    .slider img{ 
     width: 100%; 
     height: inherit; 
     display: none; 
    } 
    </style> 
</head> 
<body onload="slider()"> 
    <div class="slider"> 
     <img id="1" src="img/image1.png" border="0" alt=""> 
     <img id="2" src="img/image2.png" border="0" alt=""> 
     <img id="3" src="img/image3.png" border="0" alt=""> 
    </div> 


<script type="text/javascript"> 

    function slider() { 
     $('.slider #1').fadeIn(); 
     $('.slider #1').delay(5500).fadeOut(); 

     var sc = $('#.slider img').size(); 
     var count = 2; 
     var slider = $('.slider') 

     setInterval(function(){ 
      $('.slider #'+count).fadeIn(500); 
      $('.slider #'+count).delay(5500).fadeOut(); 

       if(count == sc){ 
        count = 1; 
       }else{ 
        count = count + 1; 
       } 
      },6500); 

     } 

</script> 
</body> 
</html>

Я также хотел бы знать, как удалить разрыв между замирания изображения, так что я не вижу фона во время перехода. Это сделает слайдер более свободным.

См. demo in JS Fiddle.

источник

2013-05-08 aztekgold

пытаются добавить jsfiddle. Я не могу создать слайдер с кодом – arjuncc

, есть одна опечатка, это должно быть: 'var sc = $ ('. Slider img'). Size();' – Stano

http://wowslider.com/jquery- slideshow-huge-demo.html –

Модифицированный код для регулировки непрозрачности изображения, расположены все изображения абсолютно общий место, так что теперь переходы между двумя изображениями могут быть анимированы. Добавлены также простые следующие и предыдущие элементы управления.

JavaScript:

function slider() { 

    function animate_slider(){ 
     $('.slider #'+shown).animate({ 
      opacity:0 // fade out 
     },1000); 
     $('.slider #'+next_slide).animate({ 
      opacity:1.0 // fade in 
     },1000); 
     shown = next_slide; 
    } 

    function choose_next() { 
     next_slide = (shown == sc)? 1:shown+1; 
     animate_slider(); 
    } 

    $('.slider #1').css({opacity:1}); //show 1st image 
    var shown = 1; 
    var next_slide; 
    var sc = $('.slider img').length; // total images 
    var iv = setInterval(choose_next,3500); 
    $('.slider_nav').hover(function(){ 
     clearInterval(iv); // stop animation 
    }, function() { 
     iv = setInterval(choose_next,3500); // resume animation 
    }); 
    $('.slider_nav span').click(function(e){ 
     var n = e.target.getAttribute('name'); 
     if (n=='prev') { 
      next_slide = (shown == 1)? sc:shown-1; 
     } else if(n=='next') { 
      next_slide = (shown == sc)? 1:shown+1; 
     } else { 
      return; 
     } 
     animate_slider(); 
    }); 
} 

window.onload = slider;

дополнительный HTML:

<div class="slider_nav"> 
    <span name="prev"> previous </span>/
    <span name="next"> next image </span> 
</div>

DEMO

источник

2013-05-08 13:03:03 Stano

Именно то, что я искал. фантастика! – aztekgold

было бы возможно использовать изображения для следующих и предыдущих кнопок? У меня, кажется, есть проблемы с этим – aztekgold

Спасибо, вот [обновленный код] (http://jsfiddle.net/lalatino/pjTU2/14/). Приветствую – Stano

Я всегда использую чистые js, а не jQuery; но я объясню вам, что вам нужно сделать (надеюсь, это поможет)

как вы сами это сделаете, вы должны поместить переменную в свой код для имен изображений или их идентификатора. теперь вы должны создать код для изменения количества идентификаторов, когда пользователь нажимает на элемент! что это за элемент? точно следующую или предыдущую кнопку! так:

nextButton.onclick=function(){ 

$('.slider #'+count).fadeOut(); 
count=count+1 
$('.slider #'+count).fadeIn(slow); 

}

это простой пример; вы можете сделать это по-своему. удачи ...

источник

2013-05-08 10:33:30 mrReiha

Смотрите эту http://jsfiddle.net/rKzxk/19/

<body onload="slider()"> 
    <div class="slider"> 
     <img id="1" src="http://top-frog.com/stuff/slider/images/slider-test-image-1.gif" border="0" alt=""> 
     <img id="2" src="http://top-frog.com/stuff/slider/images/slider-test-image-2.gif" border="0" alt=""> 
     <img id="3" src="http://top-frog.com/stuff/slider/images/slider-test-image-3.gif" border="0" alt=""> 
    </div> 
    <input type=button id="prev" value="Prev"> 
    <input type=button id="next" value="Next"> 
</body>

Script

function slider() { 
    $('#1').fadeIn(); 
    $('#1').delay(5500).fadeOut(); 

    var sc = $('.slider img').size(); 
    var count = 2; 
    var slider = $('.slider') 


    myTimer = setInterval(slide, 6500); 

    function slide() { 
     slideActual(); 
     if (count == sc) { 
      count = 1; 
     } else { 
      count = count + 1; 
     } 
    } 

    function slideActual() { 
     $('#' + count).fadeIn(100); 
     $('#' + count).delay(5500).fadeOut(100); 

    } 
    $("#next").click(function() { 

     clearInterval(myTimer); 
     if(count==1){ 
      $('#' + sc).fadeOut(100); 
     }else{ 
       $('#' + count-1).fadeOut(100); 
     } 
     slideActual(); 
     if (count == sc) { 
      count = 1; 
     } else { 
      count = count + 1; 
     } 
     myTimer = setInterval(slide, 6500); 
    }); 
    $("#prev").click(function() { 
      if(count==1){ 
      $('#' + sc).fadeOut(100); 
     }else{ 
       $('#' + count-1).fadeOut(100); 
     } 

     if (count == 1) { 
      count = sc-1; 
     } else if (count == 2) { 
      count = sc; 
     } else { 
      count = count - 2; 
     } 
     clearInterval(myTimer); 

     slideActual(); 
     if (count == sc) { 
      count = 1; 
     } else { 
      count = count + 1; 
     } 
     myTimer = setInterval(slide, 6500); 
    }); 
}

CSS

.slider { 
    position: relative; 
    width:80%; 
    height:350px; 
    overflow: hidden; 
    margin: 30px auto; 
} 
.slider img { 
    width: 100%; 
    height: inherit; 
    display: none; 
}

источник

2013-05-08 11:32:21

только отображение изображения 1 – aztekgold

@aztekgold В каком браузере вы пытаетесь .. см. jsfiddle http://jsfiddle.net/rKzxk/19/... его рабочее право на хром .. –

im использование хром и когда на изображении 2 нажатие следующей возвращает меня к изображению 1 – aztekgold

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

ответ

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