我已经在#imgbig viewer中预览了一个简单的缩略图展示。我将鼠标悬停在图片框中显示的缩略图上。我有五种不同的缩略图。
很抱歉这里不包含图片。当我在缩略图上鼠标悬停时，我希望它在#imgbig中显示图像滑块而不是相同的图片。
它将显示一个图像（循环）滑块，该滑块与来自图像循环阵列或来自文件夹的图像的不同角度的相同缩略图的pic相匹配。
就像图像展示一样，当缩略图在onmouseover上时，在#imgbig内以不同角度显示缩略图图像并返回到默认图像onmouseout。
现在我添加了一个带有匹配图像的图像滑块，第一个缩略图和#imgbig中的滑块也正常工作。
但是我不会将滑块保持在停止位置，直到鼠标悬停在图像上。它会在我加载页面后立即开始播放，当我将图像鼠标悬停在循环中时，它会在循环中变得更快。
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>