Javascript 循环浏览图像，直到将鼠标悬停在jquery上

我希望图像可以单独循环，比如说每2秒更改一次图像，但是当相关链接悬停时，可以切换到正确的图像。以下是我迄今为止所取得的成就。现在，我在hover上看到了这些图像，但我不知道如何让它们循环

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

---

您的HTML中有一些损坏的图像链接。但这应该可以做到：

var-imageIndex=0；
var周期计时器；
setPeriodicTimer（）；
函数setPeriodicTimer（）
{
periodicTimer=setTimeout（函数（）{
$（'img'）.addClass（'hidden'）.css（'opacity'，'0'）；
console.log（'imageIndex:'+imageIndex）；
开关（图像索引）
{
案例0：
$（'#first'）.removeClass（'hidden'）.css（'opacity'，'1'）；
打破
案例1：
$（“#秒”）.removeClass（'hidden'）.css（'opacity'，'1'）；
打破
案例2：
$（'third'）.removeClass（'hidden'）.css（'opacity'，'1'）；
打破
案例3：
$（“#第四”）.removeClass（'hidden'）.css（'opacity'，'1'）；
打破
案例4：
$（'fifth'）.removeClass（'hidden'）.css（'opacity'，'1'）；
打破
案例5：
$（'sixth'）.removeClass（'hidden'）.css（'opacity'，'1'）；
打破
案例6：
$（'seven'）.removeClass（'hidden'）.css（'opacity'，'1'）；
打破
}
imageIndex++；
如果（图像索引>6）
imageIndex=0；
setPeriodicTimer（）；
}, 2000);
}
美元（“#一”）。在({
鼠标悬停：函数（）{
clearTimeout（periodicTimer）；
imageIndex=0；
$（'img'）.addClass（'hidden'）.css（'opacity'，'0'）；
定时器=设置超时（函数（）{
$（“#first”）.removeClass（'hidden'）.css（'opacity'，'1'）；
}, 300);
},
mouseout:函数（）{
setPeriodicTimer（）；
清除超时（计时器）；
$（“#第一”）.css({
“不透明度”：“0”
}).addClass（“隐藏”）；
}
});
美元（“#2”）。在({
鼠标悬停：函数（）{
clearTimeout（periodicTimer）；
imageIndex=1；
$（'img'）.addClass（'hidden'）.css（'opacity'，'0'）；
定时器=设置超时（函数（）{
$（“#秒”）.removeClass（'hidden'）.css（'opacity'，'1'）；
}, 300);
},
mouseout:函数（）{
setPeriodicTimer（）；
清除超时（计时器）；
$（“#秒”）.css({
“不透明度”：“0”
}).addClass（“隐藏”）；
}
});
美元（“#三”）。在({
鼠标悬停：函数（）{
clearTimeout（periodicTimer）；
imageIndex=2；
$（'img'）.addClass（'hidden'）.css（'opacity'，'0'）；
定时器=设置超时（函数（）{
$（“#third”）.removeClass（'hidden'）.css（'opacity'，'1'）；
}, 300);
},
mouseout:函数（）{
setPeriodicTimer（）；
清除超时（计时器）；
$（“#第三”）.css({
“不透明度”：“0”
}).addClass（“隐藏”）；
}
});
美元（“#四”）。在({
鼠标悬停：函数（）{
clearTimeout（periodicTimer）；
成像指数=3；
$（'img'）.addClass（'hidden'）.css（'opacity'，'0'）；
定时器=设置超时（函数（）{
$（“#第四”）.removeClass（'hidden'）.css（'opacity'，'1'）；
}, 300);
},
mouseout:函数（）{
setPeriodicTimer（）；
清除超时（计时器）；
$（“#第四”）.css({
“不透明度”：“0”
}).addClass（“隐藏”）；
}
});
美元（“#五”）。在({
鼠标悬停：函数（）{
clearTimeout（periodicTimer）；
成像指数=4；
$（'img'）.addClass（'hidden'）.css（'opacity'，'0'）；
定时器=设置超时（函数（）{
$（“#fifth”）.removeClass（'hidden'）.css（'opacity'，'1'）；
}, 300);
},
mouseout:函数（）{
setPeriodicTimer（）；
清除超时（计时器）；
$（“#第五”）.css({
“不透明度”：“0”
}).addClass（“隐藏”）；
}
});
美元（“#六”）。在({
鼠标悬停：函数（）{
clearTimeout（periodicTimer）；
成像指数=5；
$（'img'）.addClass（'hidden'）.css（'opacity'，'0'）；
定时器=设置超时（函数（）{
$（“#第六”）.removeClass（'hidden'）.css（'opacity'，'1'）；
}, 300);
},
mouseout:函数（）{
setPeriodicTimer（）；
清除超时（计时器）；
$（“#第六”）.css({
“不透明度”：“0”
}).addClass（“隐藏”）；
}
});
美元（“#七”）。在({
鼠标悬停：函数（）{
clearTimeout（periodicTimer）；
成像指数=6；
$（'img'）.addClass（'hidden'）.css（'opacity'，'0'）；
定时器=设置超时（函数（）{
$（“第七”）.removeClass（'hidden'）.css（'opacity'，'1'）；
}, 300);
},
mouseout:函数（）{
setPeriodicTimer（）；
清除超时（计时器）；
$（“#第七”）.css({
“不透明度”：“0”
}).addClass（“隐藏”）；
}
});
.box{
位置：相对位置；
显示：内联块；
高度：15px；
线高：15px；
文本对齐：居中；
过渡：.3s；
光标：指针；
利润底部：4倍；
右边距：3倍；
垫底：7px
}
.形象{
宽度：100%；
z指数：-1
}
.图像img{
保证金：自动；
位置：绝对位置；
排名：0；
左：10%；
底部：0；
右：0；
宽度：55%；
过渡：放松；
z指数：-1
}
.隐藏{
不透明度：1
}





























这将每隔3秒循环到下一个图像
var autoCycle = true;
var i = 1;
var images = [
    $('#first'),
    $('#second'),
    $('#third'),
    $('#fourth'),
    $('#fifth'),
    $('#sixth'),
    $('#seventh')
];

images[0].removeClass('hidden').css('opacity', '1');

setInterval(function() {
    if(autoCycle) {
        images.forEach(function(img) {
            img.css({ 'opacity': '0' }).addClass('hidden');
        });

        var currImage = images[(i - 1) % images.length];
        var newImage = images[i % images.length];

        currImage.css({ 'opacity': '0' }).addClass('hidden');
        newImage.removeClass('hidden').css('opacity', '1');

        i++;
    }
}, 200);

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

<ul class="project-link-2">
    <li class="box" data-id="first"> <a class="project-link" href="#modal1"><span>Modurra Shelving</span>   </a>    
    </li>
    <br>
    <li class="box" data-id="second"> <a class="project-link" href="#modal2"><span>Kami Bicycle Helmet</span> </a>  
    </li>
    <br>
    <li class="box" data-id="third"> <a class="project-link" href="#modal3"><span>Revamping Language Learning</span> </a>   
    </li>
    <br>
    <li class="box" data-id="fourth"> <a class="project-link" href="#modal4"><span>Sports Innovation Challenge</span> </a>  
    </li>
    <br>
    <li class="box" data-id="fifth"> <a class="project-link" href="#modal5"><span>Lights Out</span></a> 
    </li>
    <br>
    <li class="box" data-id="sixth"> <a class="project-link" href="#modal6"><span>Maru Personal Speaker Design</span> </a>  
    </li>
    <br>
    <li class="box" data-id="seventh"> <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="http://www.independent.co.uk/incoming/article8465213.ece/alternates/w620/v2-cute-cat-picture.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>

var position = 0 / 1; // (divide by 1 to make sure it is int)
var myImgArr = $(".image img");
var count = myImgArr.length;
var timer;

$(function () {
    //on page load

    //show first pic
    $(myImgArr[0]).removeClass('hidden');
    timer = setInterval(setMySlider, 2000);
});

$(".project-link-2 li").mouseenter(function () {
    //stop the timer, reset all images
    clearInterval(timer);
    myImgArr.addClass('hidden');
    myID = '#' + $(this).attr('data-id');
    $(myID).removeClass('hidden');
}).mouseleave(function () {
    //add these 2 lines to hide the current ID:
    myID = '#' + $(this).attr('data-id');
    $(myID).addClass('hidden');
    //this line will show current img and continue cycle
    $(myImgArr[mod]).removeClass('hidden');
    timer = setInterval(setMySlider, 2000);
});

function setMySlider() {

    mod = ((position % count) / 1); //the current position from 0 to image count

    $(myImgArr[mod]).addClass('hidden');
     position++;
     mod = ((position % count) / 1)
    $(myImgArr[mod]).removeClass('hidden');

}