當導航欄被點擊時影像幻燈片會消失

我正在嘗試在此 google 頁面頂部制作滑塊的副本：https : //www.google.com/doodles

如果有人可以制作帶有條形的影像滑塊的副本，那就太好了！我自己嘗試過，但無法弄清楚。如果有幫助，這是我的嘗試！

爪哇腳本：

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

非常感謝！

uj5u.com熱心網友回復：

我總是很高興看到新人花時間學習。首先，干得好！不幸的是，我不是一個很好的老師，但我整理了一個你正在研究的滑塊的小例子。你可以點擊這里查看。

基本上正在發生的事情是：

1. HTML 分為兩部分：滑塊和導航欄。
2. 我默認隱藏所有幻燈片，將 adisplay: 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");
    });
}

標籤：javascript html 查询 css 用户界面

上一篇：閃亮的標題影像似乎未格式化

下一篇：Tkinter-如何動態調整漸變框架的大小？