javascript - 循环浏览图像直到悬停 jquery

Question

我希望图像单独循环，例如每 2 秒更改一次图像，但当关联的链接悬停时切换到正确的图像。以下是我到目前为止所取得的成果。现在，我得到了悬停时显示的图像，但我不知道如何让它们循环。

$("#one").on({
mouseover: function () {
    timer = setTimeout(function () {
        $("#first").removeClass('hidden').css('opacity', '1');
    }, 300);
},
mouseout: function () {
    clearTimeout(timer);
    $("#first").css({
        'opacity': '0'
    }).addClass('hidden');
}
});

https://jsfiddle.net/enwed7b9/1/

Answer 1

您的 HTML 中有一些损坏的图像链接。但这应该可以解决问题: https://jsfiddle.net/pengyanb/st47yxqb/6/

var imageIndex = 0;
var periodicTimer;
setPeriodicTimer();

function setPeriodicTimer()
{
    periodicTimer = setTimeout(function(){
        $('img').addClass('hidden').css('opacity', '0');
        console.log('imageIndex: '+imageIndex);
		switch(imageIndex)
        {
            case 0:
                $('#first').removeClass('hidden').css('opacity', '1');
                break;
           case 1:
                $('#second').removeClass('hidden').css('opacity', '1');
                break;
           case 2:
                $('#third').removeClass('hidden').css('opacity', '1');
                break;       
           case 3:
                $('#fourth').removeClass('hidden').css('opacity', '1');
                break;
   
           case 4:
                $('#fifth').removeClass('hidden').css('opacity', '1');
                break;
           case 5:
                $('#sixth').removeClass('hidden').css('opacity', '1');
                break;
           case 6:
                $('#seventh').removeClass('hidden').css('opacity', '1');
                break;
        }
        imageIndex++;
        if(imageIndex > 6)
            imageIndex = 0;
        setPeriodicTimer();
	}, 2000);
}

$("#one").on({
    mouseover: function () {
        clearTimeout(periodicTimer);
        imageIndex = 0;
        $('img').addClass('hidden').css('opacity', '0');
        timer = setTimeout(function () {
            $("#first").removeClass('hidden').css('opacity', '1');
        }, 300);
    },
    mouseout: function () {
        setPeriodicTimer();
        clearTimeout(timer);
        $("#first").css({
            'opacity': '0'
        }).addClass('hidden');
    }
});
$("#two").on({
    mouseover: function () {
        clearTimeout(periodicTimer);
        imageIndex = 1;
        $('img').addClass('hidden').css('opacity', '0');
        timer = setTimeout(function () {
            $("#second").removeClass('hidden').css('opacity', '1');
        }, 300);
    },
    mouseout: function () {
        setPeriodicTimer();
        clearTimeout(timer);
        $("#second").css({
            'opacity': '0'
        }).addClass('hidden');
    }
});
$("#three").on({
    mouseover: function () {
        clearTimeout(periodicTimer);
        imageIndex = 2;
        $('img').addClass('hidden').css('opacity', '0');
        timer = setTimeout(function () {
            $("#third").removeClass('hidden').css('opacity', '1');
        }, 300);
    },
    mouseout: function () {
        setPeriodicTimer();
        clearTimeout(timer);
        $("#third").css({
            'opacity': '0'
        }).addClass('hidden');
    }
});
$("#four").on({
    mouseover: function () {
        clearTimeout(periodicTimer);
        imageIndex = 3;
        $('img').addClass('hidden').css('opacity', '0');
        timer = setTimeout(function () {
            $("#fourth").removeClass('hidden').css('opacity', '1');
        }, 300);
    },
    mouseout: function () {
        setPeriodicTimer();
        clearTimeout(timer);
        $("#fourth").css({
            'opacity': '0'
        }).addClass('hidden');
    }
});
$("#five").on({
    mouseover: function () {
        clearTimeout(periodicTimer);
        imageIndex = 4;
        $('img').addClass('hidden').css('opacity', '0');
        timer = setTimeout(function () {
            $("#fifth").removeClass('hidden').css('opacity', '1');
        }, 300);
    },
    mouseout: function () {
        setPeriodicTimer();
        clearTimeout(timer);
        
        $("#fifth").css({
            'opacity': '0'
        }).addClass('hidden');
    }
});
$("#six").on({
    mouseover: function () {
        clearTimeout(periodicTimer);
        imageIndex = 5;
        $('img').addClass('hidden').css('opacity', '0');
        timer = setTimeout(function () {
            $("#sixth").removeClass('hidden').css('opacity', '1');
        }, 300);
    },
    mouseout: function () {
        setPeriodicTimer();
        clearTimeout(timer);
        $("#sixth").css({
            'opacity': '0'
        }).addClass('hidden');
    }
});
$("#seven").on({
    mouseover: function () {
        clearTimeout(periodicTimer);
        imageIndex = 6;
        $('img').addClass('hidden').css('opacity', '0');
        timer = setTimeout(function () {
            $("#seventh").removeClass('hidden').css('opacity', '1');
        }, 300);
    },
    mouseout: function () {
        setPeriodicTimer();
        clearTimeout(timer);
        $("#seventh").css({
            'opacity': '0'
        }).addClass('hidden');
    }
});

.box {
    position: relative;
    display: inline-block;
    height: 15px;
    line-height: 15px;
    text-align: center;
    transition: .3s;
    cursor: pointer;
    margin-bottom: 4px;
    margin-right: 3px;
    padding-bottom: 7px
}

.image {
    width: 100%;
    z-index: -1
}
.image img {
    margin: auto;
    position: absolute;
    top: 0;
    left: 10%;
    bottom: 0;
    right: 0;
    width: 55%;
    transition: ease-out .4s;
    z-index: -1
}
.hidden {
   
    opacity: 1
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="project-link-2">
    <li class="box" id="one"> <a class="project-link" href="#modal1"><span>Modurra Shelving</span>   </a>	
    </li>
    <br>
    <li class="box" id="two"> <a class="project-link" href="#modal2"><span>Kami Bicycle Helmet</span> </a>	
    </li>
    <br>
    <li class="box" id="three"> <a class="project-link" href="#modal3"><span>Revamping Language Learning</span> </a>	
    </li>
    <br>
    <li class="box" id="four"> <a class="project-link" href="#modal4"><span>Sports Innovation Challenge</span> </a>	
    </li>
    <br>
    <li class="box" id="five"> <a class="project-link" href="#modal5"><span>Lights Out</span></a> 
    </li>
    <br>
    <li class="box" id="six"> <a class="project-link" href="#modal6"><span>Maru Personal Speaker Design</span> </a>	
    </li>
    <br>
    <li class="box" id="seven"> <a class="project-link" href="#modal7"><span>A Few Casual Projects</span> </a>	
    </li>
</ul>
   
        
        
<div class="image">
    <img alt="" class="hidden" id="first" src="http://consequenceofsound.files.wordpress.com/2013/06/datside-ram.jpg">
</div>
<!-- Lights Out -->
<div class="image">
    <img alt="" class="hidden" id="second" src="http://tctechcrunch2011.files.wordpress.com/2012/03/random_house_logo.jpg">
</div>
<!-- Modurra -->
<div class="image">
    <img alt="" class="hidden" id="third" src="work/Wordpix/splash_word.jpg">
</div>
<!-- WordPix -->
<div class="image">
    <img alt="" class="hidden" id="fourth" src="work/Sports/splash_sports.jpg">
</div>
<!-- Luna -->
<div class="image">
    <img alt="" class="hidden" id="fifth" src="work/Lights Out/Lights-Out-Gif.gif">
</div>
<!-- Kami -->
<div class="image">
    <img alt="" class="hidden" id="sixth" src="work/Maru/splash_maru.jpg">
</div>
<!-- Misc -->
<div class="image">
    <img alt="" class="hidden" id="seventh" src="work/Misc/splash_comp.jpg">
</div>
</div>