Question

我已经在#imgbig viewer中预览了一个简单的缩略图展示。我将鼠标悬停在图片框中显示的缩略图上。我有五种不同的缩略图。

很抱歉这里不包含图片。当我在缩略图上进行鼠标悬停时，我希望它在#imgbig中显示图像滑块而不是相同的图片。

它将显示一个图像（周期）滑块，该图像（周期）滑块与图像循环数组或文件夹中的图像以不同角度匹配相同缩略图的图片。

像图片展示一样，当缩略图在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>

Answer 1

我自己修好了..

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>

图像滑块（循环循环）onmouseover image-thumbnail，在JavaScript

1 个答案: