Question

我有3张图片，我只想在＆＃34; Next＆＃34;或＆＃34;以前＆＃34;单击按钮。到目前为止，我甚至无法隐藏其他图像。我被卡住了。如果我只是在其中放置一个图像，它会显示我希望它在Stylesheets中的位置，但我需要添加其他两个图像和按钮滚动。

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我放在一起的{{3}}。你的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 carousel插件，并在我的代码中使用它。假设我们想要一些完全从头开始的东西，只是循环通过图像，我甚至不会用多个图像标签来卷积它。我会有一个图像标记，如下所示：

<强> 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]);
}

然后只需在我的HTML中点按goBackward();和goForward();即可，例如：

更多HTML

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

然后你可以设置它的风格，但你想让图像看起来不错。您还可以添加自定义jQuery动画和过渡，以使图像在过渡时看起来更好一些，但这是基础。

<强>的jsfiddle

Also check out my JSFiddle on this.

如何修复我的jQuery按钮滑块？

3 个答案: