<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<script src="jquery-3.2.1.js"></script>
<div class="wrap" data-wrap="1" onmouseover="slide.next(this)" onmouseout="slide.out()">
<div class="item_img active" style="background: green" data-slide="1">
<img src="img/Desert.jpg" alt="">
</div>
<div class="item_img" style="background: red" data-slide="2">
<img src="img/Chrysanthemum.jpg" alt="">
</div>
<div class="item_img" style="background: blue" data-slide="3">
<img src="img/Hydrangeas.jpg" alt="">
</div>
<div class="item_img" style="background: yellow" data-slide="4">
<img src="img/Jellyfish.jpg" alt="">
</div>
</div>
<div class="wrap" data-wrap="1" onmouseover="slide.next(this)" onmouseout="slide.out()">
<div class="item_img active" style="background: green" data-slide="1">
<img src="img/Desert.jpg" alt="">
</div>
<div class="item_img" style="background: red" data-slide="2">
<img src="img/Chrysanthemum.jpg" alt="">
</div>
<div class="item_img" style="background: blue" data-slide="3">
<img src="img/Hydrangeas.jpg" alt="">
</div>
<div class="item_img" style="background: yellow" data-slide="4">
<img src="img/Jellyfish.jpg" alt="">
</div>
</div>
<div class="wrap" data-wrap="1" onmouseover="slide.next(this)" onmouseout="slide.out()">
<div class="item_img active" style="background: green" data-slide="1">
<img src="img/Desert.jpg" alt="">
</div>
<div class="item_img" style="background: red" data-slide="2">
<img src="img/Chrysanthemum.jpg" alt="">
</div>
<div class="item_img" style="background: blue" data-slide="3">
<img src="img/Hydrangeas.jpg" alt="">
</div>
<div class="item_img" style="background: yellow" data-slide="4">
<img src="img/Jellyfish.jpg" alt="">
</div>
</div>
<style type="text/css">
.wrap
{
width: 100px;
height: 100px;
border: 5px solid black;
display: inline-block;
}
.item_img{
width: 100%;
height: 100%;
display: none;
}
.item_img.active
{
display: block;
}
img
{
object-fit: contain;
width: 100%;
}
</style>
<script type="text/javascript">
var slide =
{
count:0,
slide:0,
idT:0,
ins:false,
next:function(instants)
{
this.ins = $(instants);
this.count = $(instants).find(".item_img").length;
this.slide = $(instants).find(".active").data("slide");
if(this.count > 1)
this.idT = setTimeout("slide.nextSlide()",1000);
if(this.count == this.slide)
{
this.stop();
this.next(this.ins);
return false;
}
},
nextSlide:function()
{
$(this.ins).find(".active").removeClass("active").next().addClass("active");
this.next(this.ins);
return false;
},
stop:function()
{
$(this.ins).find(".item_img").removeClass("active");
$(this.ins).find(".item_img").eq(0).addClass("active");
},
out:function()
{
// $(this.ins).find(".item_img").removeClass("active");
// $(this.ins).find(".item_img").eq(0).addClass("active");
clearTimeout(this.idT);
return false;
}
}
</script>
</body>
</html>
не работает
