如何将上一个和下一个按钮添加到我的 jQuery 滑块？答案

【问题标题】：How do I add prev and next buttons to my jQuery slider?如何将上一个和下一个按钮添加到我的 jQuery 滑块？
【发布时间】：2013-05-08 10:16:26
【问题描述】：

我在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。

【问题讨论】：

尝试添加一个 jsfiddle。我无法使用您的代码创建滑块
有一处错别字，应该是：var sc = $('.slider img').size();
wowslider.com/jquery-slideshow-huge-demo.html
jsfiddle.net/rKzxk/15

标签： jquery slider

【解决方案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

【讨论】：

正是我想要的。太棒了！
是否可以将图像用于下一个和上一个按钮？我似乎遇到了麻烦
谢谢，这里是the updated code。问候

【解决方案2】：

我总是使用纯 js，而不是 jQuery；但我向你解释，你需要做什么（希望这会有所帮助）

当你这样做时，你应该在你的代码中为图像名称或它们的 id 放置一个变量。现在你应该创建一个代码来改变 id 的数量，当用户点击一个元素时！那是什么元素？正是下一个或上一个按钮！像这样：

nextButton.onclick=function(){

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

}

这是一个简单的例子；你可以按照自己的方式去做。祝你好运...

【讨论】：

【解决方案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;
}

【讨论】：

@aztekgold 在您正在尝试的浏览器上.. 看到 jsfiddle jsfiddle.net/rKzxk/19... 它在 chrome 上正常工作..
我正在使用 chrome，当在图像 2 上单击下一步时，我会返回图像 1
@aztekgold 在我的环境中运行良好。该代码应该让您基本了解您需要做什么。您可以通过计算来玩/操作。