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

Posted 2023-03-25

【中文标题】当导航栏被点击时图像幻灯片消失

【英文标题】：Image slides that fades when navbar is hit

【发布时间】：2021-11-29 20:06:27

【问题描述】：

我正在尝试在此 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;

非常感谢！

【参考方案1】：

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

基本上是这样的：

html 分为两个部分：滑块和导航栏。 默认情况下，我隐藏所有幻灯片，对它们应用display: none。它们仅在我添加其他课程时可见。 通过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");
    );

【讨论】：

代码在 codepen 中工作，但我无法将其集成到 HTML 文件中......有什么想法吗？我已经看到我可能需要将它包装在一个文档就绪函数中，但不确定这是否正确？我已按如下方式链接到 jquery：<head> <script src="jquery-3.6.0.min.js"></script> <script src="java.js"></script> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> <script type="text/javascript"> </script>