maxg5,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.the_time.active{
background-color: #FF00FF;
}
.content{
position: relative;
height: 200px;
width: 300px
}
.content img{
height: 200px;
width: 300px;
opacity: 0;
transition: opacity .3s ease-in-out;
position: absolute;
}
.content img.active{
opacity: 1;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var parent = $(".gg"),
title = $(".the_time", parent),
content = $(".content img", parent),
i = 0,
len = title.length,
timer;
title.each(function(indx, element) {
$(this).mouseenter(function() {
i = indx;
show(true)
})
});
function show(hold) {
window.clearTimeout(timer);
title.removeClass("active").eq(i).addClass("active");
content.removeClass("active").eq(i).addClass("active");
if (!hold) {
i = ++i % len;
timer = window.setTimeout(show, 3E3)
}
}
show();
parent.mouseleave(function() {
show(false)
})
});
</script>
</head>
<body>
<div class="gg">
<p class="p1"><a href="http://mosoblvoop.com/2017/06/26/%d0%bd%d0%b0%d1%83%d1%87%d0%bd%d0%be-%d0%bf%d1%80%d0%b0%d0%ba%d1%82%d0%b8%d1%87%d0%b5%d1%81%d0%ba%d0%be%d0%b9-%d0%ba%d0%be%d0%bd%d1%84%d0%b5%d1%80%d0%b5%d0%bd%d1%86%d0%b8%d0%b8-%d1%81%d0%be/">
</a></p><div class="the_time active"><a href="http://mosoblvoop.com/2017/06/26/%d0%bd%d0%b0%d1%83%d1%87%d0%bd%d0%be-%d0%bf%d1%80%d0%b0%d0%ba%d1%82%d0%b8%d1%87%d0%b5%d1%81%d0%ba%d0%be%d0%b9-%d0%ba%d0%be%d0%bd%d1%84%d0%b5%d1%80%d0%b5%d0%bd%d1%86%d0%b8%d0%b8-%d1%81%d0%be/">
<span class="date_news">26.06.2017</span>
<span class="aa">Научно-практической конференции: «Сотрудничество органов законодательной, исполнительной власти и общественности в решении экологических проблем Подмосковья»</span></a><p></p>
</div>
<p class="p1"><a href="http://mosoblvoop.com/2017/06/05/%d0%ba%d1%80%d1%83%d0%b3%d0%bb%d1%8b%d0%b9-%d1%81%d1%82%d0%be%d0%bb-%d0%b2-%d0%b3%d0%be%d1%80%d0%be%d0%b4%d1%81%d0%ba%d0%be%d0%bc-%d0%be%d0%ba%d1%80%d1%83%d0%b3%d0%b5-%d0%bb%d0%be%d0%b1%d0%bd%d1%8f/">
</a></p><div class="the_time"><a href="http://mosoblvoop.com/2017/06/05/%d0%ba%d1%80%d1%83%d0%b3%d0%bb%d1%8b%d0%b9-%d1%81%d1%82%d0%be%d0%bb-%d0%b2-%d0%b3%d0%be%d1%80%d0%be%d0%b4%d1%81%d0%ba%d0%be%d0%bc-%d0%be%d0%ba%d1%80%d1%83%d0%b3%d0%b5-%d0%bb%d0%be%d0%b1%d0%bd%d1%8f/">
<span class="date_news">05.06.2017</span>
<span class="aa">Круглый стол «Взаимодействие органов исполнительной, законодательной власти и общественности в решении экологических проблем городского округа Лобня»</span></a><p></p>
</div>
<p class="p1"><a href="http://mosoblvoop.com/2017/05/19/%d1%84%d0%be%d1%80%d1%83%d0%bc-%d1%8d%d0%ba%d0%be%d0%bb%d0%be%d0%b3%d0%b8%d1%87%d0%b5%d1%81%d0%ba%d0%b8%d1%85-%d0%bd%d0%b5%d0%ba%d0%be%d0%bc%d0%bc%d0%b5%d1%80%d1%87%d0%b5%d1%81%d0%ba%d0%b8%d1%85/">
</a></p><div class="the_time"><a href="http://mosoblvoop.com/2017/05/19/%d1%84%d0%be%d1%80%d1%83%d0%bc-%d1%8d%d0%ba%d0%be%d0%bb%d0%be%d0%b3%d0%b8%d1%87%d0%b5%d1%81%d0%ba%d0%b8%d1%85-%d0%bd%d0%b5%d0%ba%d0%be%d0%bc%d0%bc%d0%b5%d1%80%d1%87%d0%b5%d1%81%d0%ba%d0%b8%d1%85/">
<span class="date_news">19.05.2017</span>
<span class="aa">Форум экологических некоммерческих организаций в посольстве Франции</span></a><p></p>
</div>
<p class="p1"><a href="http://mosoblvoop.com/2017/04/03/136/">
</a></p><div class="the_time"><a href="http://mosoblvoop.com/2017/04/03/136/">
<span class="date_news">03.04.2017</span>
<span class="aa">Круглый стол «Взаимодействие органов исполнительной, законодательной власти и общественности в решении экологических проблем Ногинского муниципального района»</span></a><p></p>
</div>
<div class="content">
<img src="http://www.wagazin.com/wp-content/uploads/2016/03/x-men.jpg" alt="" class="active">
<img src="http://kinobeats.ru/_ld/8/866.jpg" alt="">
<img src="http://whiteindia.ru/wp-content/uploads/2016/11/X-Men-Sentinels-Main.jpg" alt="">
<img src="http://new.newsoboz.org/static/img/b/e/berry_3_620x330.jpg" alt="">
</div>
</div>
</body>
</html>