如何在我的jQuery滑塊中添加上一個和下一個按鈕？

Question

我根據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>

我也想知道如何消除褪色圖像之間的間隙，以便在過渡期間看不到背景。 這將使滑塊更流暢。

參見JS Fiddle中的演示。

Answer 1

修改了代碼以調整圖像的不透明度，將所有圖像絕對放置在公共位置，因此現在可以對兩個圖像之間的過渡進行動畫處理。 還添加了簡單的下一個和上一個控件。

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

Answer 2

我總是使用純js，而不是jQuery； 但我向您解釋，您需要做什么（希望這會有所幫助）

當您這樣做時，應在代碼中放入一個用於圖像名稱或其ID的變量。 現在，當用戶單擊某個元素時，您應該創建一個代碼來更改id的數量！ 那是什么元素？ 恰好是下一個或上一個按鈕！ 像這樣：

nextButton.onclick=function(){

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

}

這是一個簡單的例子; 您可以按照自己的方式來做。 祝好運 ...

Answer 3

看到這個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>

腳本

 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;
}

如何在我的jQuery滑塊中添加上一個和下一個按鈕？

問題描述

3 個解決方案

解決方案1
2 已采納 2013-05-08 13:03:03

解決方案2
0 2013-05-08 10:33:30

解決方案3
0 2013-05-08 11:32:21

如何在我的jQuery滑塊中添加上一個和下一個按鈕？

問題描述

3 個解決方案

解決方案1 2 已采納 2013-05-08 13:03:03

解決方案2 0 2013-05-08 10:33:30

解決方案3 0 2013-05-08 11:32:21

解決方案1
2 已采納 2013-05-08 13:03:03

解決方案2
0 2013-05-08 10:33:30

解決方案3
0 2013-05-08 11:32:21