Image slider (cycle-loop) onmouseover image-thumbnail, stop on mouseout in JavaScript

前端未结

关注

 1  1791

I have made a simple thumbnail image showcase to preview in #imgbig viewer. I hover on thumbnail it shows it in the image box. I have five different thumbnails.

Sor

相关标签:

1条回答

广开言路

2021-01-07 12:05

i fixed it myself..

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>

0 讨论(0)