我制作了一个简单的缩略图展示，可以在 #imgbig 查看器中预览。我将鼠标悬停在缩略图上，它会显示在图像框中。我有五个不同的缩略图。
抱歉，这里没有包含图片。当我将鼠标悬停在缩略图上时，我希望它显示 #imgbig 中的图像 slider 而不是同一张图片。
它将显示一个图像(循环) slider ，与图像循环数组或文件夹中的图像中不同 Angular 相同缩略图的图片相匹配。
就像图像展示一样，当缩略图在鼠标悬停时在 #imgbig 内以不同 Angular 显示缩略图图像，并在鼠标移出时返回默认图像。
现在，我添加了一个图像 slider ，其中包含与第一个缩略图相匹配的图像，并且 #imgbig 中的 slider 也正在工作。
但是我不会将 slider 保持在停止位置，直到我将鼠标悬停在图像上。当我加载页面时它就开始播放，当我将鼠标悬停在图像上时，它的循环速度会变得更快，并且循环速度会越来越快。
var i = 1;
function slider() {
var imgg = document.getElementById("imgbig");
imgg.src = "https://loremflickr.com/320/240?random=" + i;
i++;
if (i > 10) {
i = 1;
}
}
function timer()
{
setInt = setInterval(slider,1000);
}
function slideroff()
{
i=1;
clearInterval(setInt);
var imgg=document.getElementById("imgbig");
imgg.src = "http://placehold.it/400x400";
}.imgboxdiv {
width: 1000px;
margin: 0 auto;
text-align: center;
}
.imageshowcase {
width: 400px;
height: 400px;
background-color: ;
margin-bottom: 20px;
}
.imageshowcase img {
width: 400px;
height: 400px;
border: 3px solid red;
}
.imgparameter {
width: 150px;
height: 150px;
border: 3px solid red;
}
*
{
margin:0 auto;
padding:0;
box-sizing:border-box;
}
body
{
margin:0 auto;
padding:0;
background-color:slategrey;
}<!DOCTYPE html>
<html>
<head>
<title> Title </title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="imgboxdiv">
<h1>Image slider start on mouseover thumbnail</h1>
<div class="imageshowcase" id="imgshwcase">
<img src="http://placehold.it/400x400" id="imgbig">
</div>
<img src="https://loremflickr.com/320/240?random=1" onmouseover="slider()" id="img1" class="imgparameter">
</div>
</body>
</html>最佳答案
我自己修好了..
var i = 1;
var setInt;
function slider()
{
var imgg=document.getElementById("imgbig");
imgg.src = "https://loremflickr.com/320/240?random=" + i ;
i++;
if(i>5)
{
i=1;
}
}
function timer()
{
setInt = setInterval(slider,2000);
}
function slideroff()
{
i=1;
clearInterval(setInt);
var imgg=document.getElementById("imgbig");
imgg.src = "http://placehold.it/400x400";
}*
{
margin:0 auto;
padding:0;
box-sizing:border-box;
}
body
{
margin:0 auto;
padding:0;
background-color:slategrey;
}
.imgboxdiv
{
width:1000px;
margin:0 auto;
text-align:center;
}
.imageshowcase
{
width:400px;
height:400px;
background-color:;
margin-bottom:20px;
}
.imageshowcase img
{
width:400px;
height:400px;
border:3px solid red;
}
.imgparameter
{
width:150px;
height:150px;
border:3px solid red;
}<!DOCTYPE html>
<html>
<head>
<title> Title </title>
</head>
<body>
<div class="imgboxdiv" >
<h1>Image slider start on mouseover thumbnail</h1>
<div class="imageshowcase" id="imgshwcase">
<img src="http://placehold.it/400x400" id="imgbig">
</div>
<img src="https://loremflickr.com/320/240?random=1" onmouseover="timer()" onmouseout="slideroff()" id="img1" class="imgparameter">
</div>
</body>
</html>关于javascript - JavaScript 中鼠标悬停在图像缩略图上时图像 slider (循环)，鼠标移开时停止，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48304932/