Javascript 如何修复jQuery按钮滑块？_Javascript_Jquery_Html_Css_Slider

Javascript 如何修复jQuery按钮滑块？

javascript jquery html css

Javascript 如何修复jQuery按钮滑块？,javascript,jquery,html,css,slider,Javascript,Jquery,Html,Css,Slider,我有3张图片，我只想在点击“下一步”或“上一步”按钮时滚动浏览。到目前为止，我甚至无法隐藏其他图像。我卡住了。如果我只是把一个图像放在那里，它会显示在我希望它在样式表方面的位置，但是我需要添加另外两个图像和按钮滚动 HTML 我不知道你为什么要把img限制在40%的宽度，但我总结了一个例子。您的javascript运行良好-没有改变任何事情。注意CSS的变化，不过： .carouselWrapper { width:460px; // example height, use whatever

我有3张图片，我只想在点击“下一步”或“上一步”按钮时滚动浏览。到目前为止，我甚至无法隐藏其他图像。我卡住了。如果我只是把一个图像放在那里，它会显示在我希望它在样式表方面的位置，但是我需要添加另外两个图像和按钮滚动

HTML

我不知道你为什么要把img限制在40%的宽度，但我总结了一个例子。您的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;
  }
}

这是您正在寻找的确切解决方案

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

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>


$（文档）.ready（函数（）{
$（.back”）.first（）.addClass（“活动”）；
$（“.back”）.hide（）；
$（“.active”）.show（）；
$（“#按钮下一步”）。单击（函数（）{
$（.active”）.removeClass（“active”）.addClass（“oldactive”）；
如果（$（'.oldactive'）。是（':last child'））{
$（'.back'）.first（）.addClass（'active'）；
}
其他的
{
$（“.oldactive”）.next（）.addClass（“active”）；
}
$（.oldactive”）.removeClass（“oldactive”）；
$（“.back”）.fadeOut（“慢”）；
$（'.active'）.fadeIn（“慢”）；
});
$（“#按钮前”）。单击（函数（）{
$（.active”）.removeClass（“active”）.addClass（“oldactive”）；
如果（$（'.oldactive'）。是（':first child'））
{
$（'.back'）.last（）.addClass（'active'）；
}
其他的
{
$（'.oldactive'）.prev（）.addClass（'active'）；
}
$（'.oldactive'）.removeClass（'oldactive'）；
$（'.back'）。淡出（“慢”）；
$（'.active'）.fadeIn（“慢”）；
});
});

我希望这对你有用…

鉴于你没有发布CSS，我将解释我将如何做到这一点

首先，老实说，我会找到一个jQuery或纯CSS旋转木马插件，然后在我的代码中使用它。假设我们想要的是完全从头开始的东西，只是在图像中循环，我甚至不会用多个图像标签来让它复杂化。我会有一个图像标签，如下所示：

HTML

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

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

然后，您可以根据自己的喜好对其进行造型，以使图像看起来更漂亮。您还可以添加自定义jQuery动画和转换，使图像在转换时看起来更漂亮，但这是最基本的

JSFiddle

发布相关CSS或设置fiddle@elzi我为img标签添加了CSS我如何修改下一个/上一个的CSS，使它们在旋转木马中左右居中？我不会为你做所有的事情。。。查看

position:absolute

以获得提示。谢谢！我真的很感激

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

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

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

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

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