jQuery中的简单滑块只在切换后显示前两张图片

Question

我知道这个问题已经被问过很多次了，但我似乎没有找到适合我的和正确的解决方案。我正在尝试创建简单的滑块。当我点击一张图片时，另一张会显示。这里是一个codepen与代码

最终我实际上想创建一个类似于函数的旋转木马，这将循环通过我的项目调用.animate({scrollLeft}) ...但我陷入循环实现以及。但婴儿的步骤，对吧？

编辑：问题是我只拨动，然后再第二张照片出来的4

感谢您的帮助球员。

下面是代码：

的index.html

<div class=container> 
    <img class='isActive' src="http://placehold.it/350x150"> 
    <img class='isHidden' src="http://placehold.it/350x150"> 
    <img class='isHidden' src="http://placehold.it/350x150"> 
    <img class='isHidden'src="http://placehold.it/350x150"> 
</div> 

index.scss

html { 
    box-sizing: border-box; 
} 

*, 
*:before, 
*:after { 
    box-sizing: inherit; 
} 

body { 
    background: black; 
} 

.container { 
// display: inline-flex; 
} 

.slide { 

} 

.isActive { 
    visibility: visible; 
} 

.isHidden { 
visibility: hidden; 
} 

index.js

$(function() { 
    var allImgItems = $('img'); 
    var items = $('.container').find(allImgItems); 

    toggleVisibility = function(item) {  
    item.toggleClass('isHidden'); 
    item.next().removeClass('isHidden').addClass('isActive'); 
// item.next().removeClass('isHidden').animate({ scrollLeft: 200 + 'px'}, '500', 'swing', function() {console.log('Animation completed') }); 
    console.log(item); 
    } 

    toggleItem = function() { 
    var item = $('img:first').click(function() { // [QUESTION]The problem is here I think, since I'm just passing the first obj and not the list? 
     toggleVisibility(item); 
    }) 
    } 
    toggleItem(); 
}) 

Answer 1

您可以通过event.currentTarget参数来点击函数来获取当前的DOM元素。 而不是从下一个元素中移除隐藏类.isHidden，但将相同的类添加到该元素。

如果您单击滑块的最后一个元素，请返回到第一个图像并执行您需要的操作。 检查工作代码：codePen

$(function() { 
 

 

 
    var allImgItems = $('img'); 
 
    var items = $('.container').find(allImgItems); 
 

 
    allImgItems.click(function(event, index) { 
 

 
    var item = $(event.currentTarget) 
 
    item.addClass('isHidden'); 
 
    item.next("img").removeClass('isHidden').addClass('isActive'); 
 
    item.next().removeClass('isHidden').animate({ 
 
     scrollLeft: 200 + 'px' 
 
    }, '500', 'swing', function() { 
 
     console.log('Animation completed') 
 
    }); 
 

 
    if ($(this).is(':last-child')) { 
 
     allImgItems.first("img").removeClass('isHidden').addClass('isActive'); 
 
    } 
 

 
    }); 
 
})

html { 
 
    box-sizing: border-box; 
 
} 
 
*, 
 
*:before, 
 
*:after { 
 
    box-sizing: inherit; 
 
} 
 
body { 
 
    background: black; 
 
} 
 
.container { 
 
    display: inline-flex; 
 
} 
 
.slide {} .isActive { 
 
    visibility: visible; 
 
} 
 
.isHidden { 
 
    visibility: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class=container> 
 
    <img class='isActive' src="https://placehold.it/150x150"> 
 
    <img class='isHidden' src="https://placehold.it/150x150"> 
 
    <img class='isHidden' src="https://placehold.it/150x150"> 
 
</div>