如何添加prev和下一個按鈕到我的jQuery滑塊？

我在a tutorial from TheHelpingDevelop之後創建了一個基本的jQuery滑塊。我已將滑塊更改爲靈活的寬度，並使圖像淡化而不是幻燈片。如何添加prev和下一個按鈕到我的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 2013-05-08 10:28:39

有一個錯字，它應該是：'VAR SC = $（「滑塊IMG」）的大小（）;' – Stano 2013-05-08 10:40:20

http://wowslider.com/jquery-幻燈巨大-demo.html – 2013-05-08 10:42:14

修改代碼來調整圖像的透明度，定位所有圖像絕對常見所以現在兩個圖像之間的轉換可以是動畫的。添加了簡單的下一個和上一個控件。

的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 2013-05-08 13:58:30

是否可以將圖像用於next和prev按鈕？我似乎遇到了問題 – aztekgold 2013-05-08 14:53:06

謝謝，這裏是[更新的代碼]（http://jsfiddle.net/lalatino/pjTU2/14/）。問候 – Stano 2013-05-08 21:53:50

我總是用純JS，不是jQuery的;但我向你解釋，你需要做的（希望這有助於）

爲自己做的是，你應該把一個變量在你的圖像名稱或他們的ID碼是什麼。現在你應該創建一個代碼來改變id的數量，當用戶點擊一個元素時！那是什麼元素？正好是下一個或上一個按鈕！是這樣的：

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>

腳本

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 2013-05-08 12:31:57

@aztekgold你試圖哪個瀏覽器..看到的jsfiddle http://jsfiddle.net/rKzxk/19/...它的工作權在鉻.. – 2013-05-08 12:33:18

即時通訊使用鉻和時在圖像2點擊下一步返回到我圖像1 – aztekgold 2013-05-08 12:54:14

如何添加prev和下一個按鈕到我的jQuery滑塊？

回答

相關問題