{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 别忘想泡老子 的问题《Image slider (cycle-loop) onmouseover image-thumbn》','https://www.manongdao.com/q-1252012.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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.
Sorry for not including images here. When I do mouseover on thumbnail I want it to show the image slider in the #imgbig instead of the same pic.
It will show an image (cycle) slider matching the pic of the same thumbnail in different angles either from an array of image loop or images from the folder.
Like an image showcase, showing the thumbnail image in different angles inside the #imgbig when the thumbnail is onmouseover and goes back to default image onmouseout.
For now I have added an image slider with matching images with the first thumbnail and the slider in its #imgbig is working too.
But I am not to keep the slider in stop position till I mouseover the image. It starts playing as soon I load the page and it gets faster in loop when I mouseover the image and keeps getting faster in loop.
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>
i fixed it myself..