Question

我创建了一个半途工作的滑块。如果我单击左箭头然后图像旋转得很好，但是当我点击问题所在的右箭头时。当我点击它时，它会旋转到第二个图像，但之后就会出错。

这是js

$(".nav_arrows").click(function(){
$direction1 = ($(this).hasClass("left-arrow") ? "left" : "right");
var activeBanner1 = 100;
if($direction1 == "right"){
    $(".inactive_banner").css("left","100%").show();
    activeBanner1 = -100;
    if($(".active_banner").next().length < 1){
        $(".banner_wrapper").eq(0).animate({"left":0+"%","opacity":1}, 500,function(){
            $(this).addClass("active_banner").removeClass("inactive_banner");
        });
    }else{
        $(".active_banner").next().animate({"left":0+"%","opacity":1}, 500,function(){
            $(this).addClass("active_banner").removeClass("inactive_banner");
        });
    }
 }else{
    $(".inactive_banner").css("left","-100%").show().fadeTo(250, 0);
    if($(".active_banner").prev().length < 1){
        $(".banner_wrapper").eq($(".banner_wrapper").length-  1).animate({"left":0+"%","opacity":1}, 500,function(){
            $(this).addClass("active_banner").removeClass("inactive_banner");
        });
    }else{
        $(".active_banner").prev().animate({"left":0+"%","opacity":1}, 500,function(){
            $(this).addClass("active_banner").removeClass("inactive_banner");
        });
    }
}
$(".active_banner").animate({"left":activeBanner1+"%","opacity":0}, 500,function(){
    $(this).addClass("inactive_banner").removeClass("active_banner");
});
});

我的HTML

<div class="slider-wrapper">
<div class="banner_wrapper active_banner" style="display: block; left: 0%; opacity: 1;">
    <img class="bgwidth" src="http://s25.postimg.org/keaisiflb/mini_brown_fairy.jpg" />
</div>   

<div class="banner_wrapper inactive_banner" style="left: 100%; opacity: 0;">
    <img class="bgwidth" src="http://s25.postimg.org/xwhf4srqn/mini_blue_fairy.jpg" />
</div>      

<a class="left-arrow nav_arrows" href="javascript:void(0);">
    <img src="http://s25.postimg.org/3uhfk0for/left_arrow.png" />
</a>      

<a class="right-arrow nav_arrows" href="javascript:void(0);">
    <img src="http://s25.postimg.org/gzwxq49kb/right_arrow.png" />
</a>

我的css

.banner_wrapper img {
 position: absolute; 
 }
.banner_wrapper .relative {
width: 100%;
height: 100%;
position: relative;
}
.bgwidth {
/*  width: 100%; */
}
.bgheight {
display: block;
height: 100%;
margin: 0 auto;
}

.right-arrow {
background: none repeat scroll 0 0 black;
position: absolute;
right: 9%;
top: 37%;
}

.right-arrow img{
position: relative;
}

.left-arrow {
background: none repeat scroll 0 0 black;
left: 8%;
position: absolute;
top: 37%;
z-index: 1;
}

.left-arrow img{
position: relative;
}

jsfiddle JSFIDDLE

更新：这是一个新链接CODEPEN

Answer 1

在访问您错过的下一个元素时，下一个元素可能是箭头本身。

因此，要选择作为横幅的下一个元素，请添加next（“。banner_wrapper”）

if ($direction1 == "right") {

        $(".inactive_banner").css("left", "100%").show();
        activeBanner1 = -100;
        if ($(".active_banner").next(".banner_wrapper").length < 1) {

请参阅工作小提琴：http://jsfiddle.net/0vrd5ody/4/

滑块无法正常工作

1 个答案: