如何修復jQuery按鈕滑塊？

Question

僅當單擊“下一個”或“上一個”按鈕時，我才需要滾動3張圖像。 到目前為止，我什至無法隱藏其他圖像。 我被卡住了。 如果我只在其中放置一張圖像，它會按照樣式表的方式顯示在我想要的位置，但是我需要添加另外兩張圖像並滾動按鈕。

HTML

    <div class="wrapper">

        <div class="container">

            <div class="carouselWrapper">

                <div class="carousel">

                    <div class="cImg active" >
                        <img src="../1.jpg">
                    </div>

                    <div class="cImg">
                        <img src="../2.jpg">
                    </div>

                    <div class="cImg">
                        <img src="../3.jpg">
                    </div>

                </div>

                <div id="nav">
      <div id="button-previous">prev</div>
        <div id="button-next">next</div>
                </div>

            </div>

jQuery的

<script type="text/javascript">
        $(document).ready(function(){  
            $('.active').show();

                $('#button-next').click(function(){

                $('.active').removeClass('active').addClass('oldActive');    
                               if ( $('.oldActive').is(':last-child')) {
                    $('.cImg').first().addClass('active');
                    }
                    else{
                    $('.oldActive').next().addClass('active');
                    }
                $('.oldActive').removeClass('oldActive');
                $('.cImg').fadeOut();
                $('.active').fadeIn();


                });

                   $('#button-previous').click(function(){
                $('.active').removeClass('active').addClass('oldActive');    
                       if ( $('.oldActive').is(':first-child')) {
                    $('.cImg').last().addClass('active');
                    }
                       else{
                $('.oldActive').prev().addClass('active');
                       }
                $('.oldActive').removeClass('oldActive');
                $('.cImg').fadeOut();
                $('.active').fadeIn();
            });

        });
    </script>

CSS

.carousel img {
    float: left;
    width: 40%;
    height: auto;
    margin: 20px 40px 80px 20px;
}

Answer 1

我不確定為什么您將img的寬度限制為40％，但這是我整理的一個jsbin 。 您的javascript正常-沒有改變。 但是請注意CSS更改：

.carouselWrapper {
  width:460px; // example height, use whatever you'd like
  height:300px; // example width, use whatever you'd like
  overflow:hidden;

  .carousel {
    width:auto;
    height:300px;
  }
  .cImg {
    float:left;
    width:460px;
    height:300px;
  }
}

Answer 2

這是您正在尋找的確切解決方案

<body>
<div class="slider-img">
<div>
<div class="back"><img src ="1.jpg" /></div>
<div class="back"><img src ="2.jpg" /></div>
<div class="back"><img src ="3.jpg" /></div>
<div class="back"><img src ="4.jpg" /></div>
</div>
<div id="button-next"><img src ="next.png" /></div>
<div id="button-pre"><img src ="previous.png" /></div>
</div>
</body>

以上代碼的CSS是

.slider-img { width: 80%; margin:0px auto; height:500px;}
.back{position: absolute;}
#button-next{position:relative; float:right; top:220px; margin-right: 12px;}
#button-next:hover {opacity:0.4}
#button-pre{position:relative; float:left; top:220px;}
#button-pre:hover {
    opacity: 0.4;
}

jQuery的

    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script>
    $(document).ready(function(){
    $(".back").first().addClass("active");
    $(".back").hide();
    $(".active").show();
    $("#button-next").click(function(){
    $(".active").removeClass("active").addClass("oldactive");
       if ( $('.oldactive').is(':last-child')) {

        $('.back').first().addClass('active');
        }
        else
        {
         $(".oldactive").next().addClass("active");
        }
     $(".oldactive").removeClass("oldactive");   
     $(".back").fadeOut("slow");
     $('.active').fadeIn("slow");

    });
 $("#button-pre").click(function(){
    $(".active").removeClass("active").addClass("oldactive");
        if($('.oldactive').is(':first-child'))
        {
         $('.back').last().addClass('active');
        }
        else
        {
         $('.oldactive').prev().addClass('active');
        }
    $('.oldactive').removeClass('oldactive');
     $('.back').fadeOut("slow");
     $('.active').fadeIn("slow");
    });


   });


    </script>

我希望這對您有用...

Answer 3

鑒於您沒有發布CSS，所以我只會解釋如何執行此操作。

首先，老實說，我只會找到一個jQuery或純CSS輪播插件，並在我的代碼中使用它。 假設我們完全需要從頭開始的東西，只是在圖像之間循環，那么我什至不會用多個圖像標簽對其進行卷積。 我將有一個圖像標簽，如下所示：

HTML

<div class="image-wrapper">
    <img src="" id="carousel" />
</div>

然后，我只需要jQuery代碼在圖像之間循環：

使用Javascript

var images = [
    "image/url/1.png",
    "image/url/2.png"
];

var selectedImage = 0;

$(document).ready(function(){
    $("#carousel").attr("src", images[0]);
});

function goForward(){
    selectedImage += 1;

    if(selectedImage >= images.length){
        selectedImage = 0;
    }

    $("#carousel").attr("src", images[selectedImage]);
}

function goBackward(){
    selectedImage -= 1;

    if(selectedImage < 0){
        selectedImage = images.length - 1;
    }

    $("#carousel").attr("src", images[selectedImage]);
}

然后只需制作調用goBackward();按鈕即可goBackward(); 和goForward(); 在我的HTML中的任何位置，例如：

更多HTML

<button onclick="goForward();">Forward</button>
<button onclick="goBackwward();">Backward</button>

然后可以設置樣式，但是要使圖像看起來不錯。 您還可以添加自定義jQuery動畫和過渡，以使圖像在過渡時看起來更好看，但這是基礎。

的jsfiddle

另外，請查看我的JSFiddle。

如何修復jQuery按鈕滑塊？

問題描述

3 個解決方案

解決方案1
1 已采納 2014-11-19 06:09:27

解決方案2
0 2014-11-19 06:11:16

解決方案3
0 2014-11-19 06:13:19

如何修復jQuery按鈕滑塊？

問題描述

3 個解決方案

解決方案1 1 已采納 2014-11-19 06:09:27

解決方案2 0 2014-11-19 06:11:16

解決方案3 0 2014-11-19 06:13:19

解決方案1
1 已采納 2014-11-19 06:09:27

解決方案2
0 2014-11-19 06:11:16

解決方案3
0 2014-11-19 06:13:19