当导航栏被点击时图像幻灯片消失

Question

我正在尝试在此 google 页面顶部制作滑块的副本：https://www.google.com/doodles

如果有人可以复制带有条形的图像滑块，那就太好了！我自己尝试过，但无法弄清楚。如果有帮助，这是我的尝试！

JAVASCRIPT：

 <script>
        var imgArray = [
            'images/img1.gif',
            'images/img2.gif',
            'images/img3.jpg',
        'images/img4.jpg'],
            curIndex = 0;
        imgDuration = 3000;

        function slideShow() {
            document.getElementById('slider').className += "fadeOut";
            setTimeout(function () {
                document.getElementById('slider').src = imgArray[curIndex];
                document.getElementById('slider').className = "";
            }, 500);
            curIndex++;
            if (curIndex == imgArray.length) { curIndex = 0; }
        }

    </script>

HTML：

            <img class="slidershow" id="slider" src="images/img1.gif" onmouseover="slideShow()">

            <div id="navigation">
                <label for="r1" class="bar" id="bar1"></label>
                <label for="r2" class="bar" id="bar2"></label>
                <label for="r3" class="bar" id="bar3"></label>
                <label for="r4" class="bar" id="bar4"></label>
            </div>

        </div>

CSS： --> 老实说，我写了太多的 CSS 以至于我不知道哪些是相关的，所以我可能遗漏了一些。需要清理一下 - 提前道歉

.nav_links {
    list-style: none;
}

    .nav_links li {
        display: inline-block;
        padding: 0px 20px;
    }

        .nav_links li a {
            color: #009cdc;
            transition: all 0.3s ease 0s;
        }

        .nav_links li:hover a {
            color: #2772ff;
        }
#top-content {
    display: block;
}


latest-nav li#latest-nav-1 {
    background-color: #fa4842;
}

#latest-nav li.off {
    border-top: 15px solid #fff;
}

#latest-nav li.off {
    height: 5px;
    opacity: 0.35;
}

#latest-nav li {
    cursor: pointer;
    float: left;
    height: 5px;
    transition: opacity 0.15s ease,height 0.15s ease,border-top 0.15s ease;
    -moz-transition: opacity 0.15s ease,height 0.15s ease,border-top 0.15s ease;
    -webkit-transition: opacity 0.15s ease,height 0.15s ease,border-top 0.15s ease;
    width: 16.6%;
}



.slidershow {
    height: 400px;
    overflow: hidden;
}

.middle {
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translate(-50%,-50%);
}

#navigation {
    position: absolute;
    bottom: 35px;
    left: 60%;
    transform: translateX(-50%);
    display: flex;
}

.bar {
    border-top: 15px solid #fff;
    width: 200px;
    opacity: 0.35;
    height: 5px;
    cursor: pointer;
    transition: 0.4s;
}


.slides {
    width: 500%;
    height: 100%;
    display: flex;
    margin-top: 30px;
}

.slide {
    width: 20%;
    transition: 0.6s;
}

    .slide img {
        display: block;
        margin: auto;
        max-height: 250px;
        max-width: 600px;
        width: auto;
    }

latest .container img {
    display: block;
    margin: auto;
    max-height: 250px;
    max-width: 600px;
}

#bar1 {
    background-color: #3875fc;
}

#bar2 {
    background-color: #ff8809;
}

#bar3 {
    background-color: #19be29;
}

#bar4 {
    background-color: #fa4842;
}

非常感谢！

Answer 1

我总是很高兴看到新人花时间学习。首先，干得好！不幸的是，我不是一个很好的老师，但我整理了一个你正在使用的滑块的小例子。您可以查看clicking here。

基本上是这样的：

1. HTML 分为两个部分：滑块和导航栏。
2. 默认情况下，我隐藏所有幻灯片，对它们应用display: none。它们仅在我添加其他课程时可见。
3. 通过javascript检测悬停方法。每当导航栏项悬停在上面时，您都会检测到它的位置（我添加了一个名为 data-position 的数据属性来找出它的位置）并显示对应的滑块。

所以，如果导航栏的数据位置为 2，我知道我必须展示第二张幻灯片。为此，我使用.slider .slider-item:nth-child(2)。

正如我所提到的，我并不擅长解释，但我希望这对你有所帮助。继续学习，不要放弃！

HTML：

<div class="wrapper">
    <div class="slider">
    <div class="slider-item slider-item--visible">
        hello item 1
    </div>
    <div class="slider-item">
        hello item 2
    </div>
    <div class="slider-item">
        hello item 3
    </div>
</div>
<nav class="navbar">
    <span class="navbar-item navbar-item--selected" data-position="1"></span>
    <span class="navbar-item" data-position="2"></span>
    <span class="navbar-item" data-position="3"></span>
</nav>
</div>

CSS

.wrapper{
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    display:  block;
}

/* Slider */
.slider{
    max-width: 100%;
    width: 100%;
}

.slider-item{
    display: none;
}
.slider-item--visible{
    display: block;
}

/* Navbar */
.navbar{
    max-width: 100%;
    display: flex;
    align-items: flex-end;
    height: 8px;
}
.navbar-item{
    max-width: 33.3%;
    width: 100%;
    display: block;
    height: 5px;
    cursor: pointer;
    opacity: .5;
    transition: all .32s ease;
}

.navbar-item--selected{
    height: 8px;
    opacity: 1;
}

/* Meaningless styles (colors) */ 
.navbar-item:nth-child(1){
    background: salmon;
}

.navbar-item:nth-child(2){
    background: lightblue;
}

.navbar-item:nth-child(3){
    background: #19be29;
}

Javascript

const $navbars = document.querySelectorAll(`.navbar-item`);


function removeSelected(){
    const $selected = document.querySelectorAll(`.navbar-item--selected, .slider-item--visible`);
    
    if (!$selected){
        return;
    }
    
    for (let each of $selected){
        each.classList.remove("navbar-item--selected");
        each.classList.remove("slider-item--visible");
    }
    
}

for (let each of $navbars){
    each.addEventListener("mouseover", function(){
        
        removeSelected();
        
        const position = each.getAttribute("data-position");
        const $item = document.querySelector(`.slider .slider-item:nth-child(${position})`)
        
        each.classList.add("navbar-item--selected")
        $item.classList.add("slider-item--visible");
    });
}