Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Плавное появление блока. (https://javascript.ru/forum/jquery/69470-plavnoe-poyavlenie-bloka.html)

maxg5 26.06.2017 13:28
Плавное появление блока.
 
Всем доброго времени суток!
На сайте есть такой блок с анимацией:

Мне нужно сделать тоже самое на этом сайте
Дело в том что на сайте - примере используются табы и селектор выбрать можно по tab1, tab2 т.д.
А у меня на сайте есть четыре блока .the_time.
Как это можно реализовать?
У меня вот что получается:
$('.the_time').hover(
function(){$( '.bgc' ).fadeIn( "slow", function() {
      });
	},
function(){$( '.bgc' ).fadeOut( "slow", function() {
    
  });
  
});

Здесь анимация должна срабатывать при наведении.
А вот как сделать что бы как на сайте примере, что бы автоматом менялись картинки, не совсем понял. Может использовать для этого delay?

рони 26.06.2017 14:38
maxg5,
https://javascript.ru/forum/jquery/6...ggleclass.html

maxg5 26.06.2017 17:45
рони,
Спасибо.
Не совсем понял как применить Ваш код из той темы к моему сайту.
У меня код должен быть такой как я понял:
$(function() {
    var parent = $(".gg"),
        title = $(".the_time", 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)
        }
    }
    parent.mouseleave(function() {
        show(false)
    })
});

Но как мне вывести для каждого слайда свои картинки, ведь у меня табов на сайте нет? У меня простой вывод записей из WordPress. Код такой:
<div class="gg">					
<?php
$my_posts = get_posts('numberposts=4&category=5&orderby=date');
foreach ($my_posts as $post) :
setup_postdata($post); ?>
<p class="p1"><a href="<?php the_permalink(); ?>">
<div class="the_time">
<span class="date_news"><?php the_time ('d.m.Y'); ?></span>
<span class="aa"><?php the_title(); ?></span></a></p>
</div>
<?php endforeach; ?> 
</div>

рони 26.06.2017 19:21
Цитата:
Сообщение от maxg5
Код такой:
а можно окончательный html? минимальный, но без php

maxg5 26.06.2017 19:37
рони,
Вот код со страницы сайта при заходе:
<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"><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>

рони 26.06.2017 20:14
maxg5,
а картинки то где? переменная content ...
автопрокрутка через 3 сек.
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .the_time.active{
    background-color: #FF00FF;
  }

  </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),
        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"><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>


</body>
</html>

maxg5 26.06.2017 21:56
рони,
Я добавил картинку, но не работает.
<script>
$(function() {
    var parent = $(".gg"),
        title = $(".the_time", parent),
        content = $(".p1 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(".p1 img").eq(i).addClass(".p1 img");
        if (!hold) {
            i = ++i % len;
            timer = window.setTimeout(show, 3E3)
        }
    }
    show();
    parent.mouseleave(function() {
        show(false)
    })
});
</script>

рони 26.06.2017 22:31
Цитата:
Сообщение от maxg5
Я добавил картинку,
куда?
content = $(".p1 img", parent), это правильно???
строка 18 что за ... код?
добавьте ваши картинки в html выше

maxg5 26.06.2017 22:41
рони,
С картинками такой код HTML
<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="imaage"><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/"><img width="1200" height="1600" src="http://mosoblvoop.com/wp-content/uploads/2017/06/n1_1-1200x1600.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" srcset="http://mosoblvoop.com/wp-content/uploads/2017/06/n1_1-1200x1600.jpg 1200w, http://mosoblvoop.com/wp-content/uploads/2017/06/n1_1-225x300.jpg 225w, http://mosoblvoop.com/wp-content/uploads/2017/06/n1_1-768x1024.jpg 768w, http://mosoblvoop.com/wp-content/uploads/2017/06/n1_1.jpg 1224w" sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 88vw, 1200px"></a></div><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><div class="the_time"><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="imaage"><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/"><img width="1200" height="1600" src="http://mosoblvoop.com/wp-content/uploads/2017/06/n1_1-1200x1600.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" srcset="http://mosoblvoop.com/wp-content/uploads/2017/06/n1_1-1200x1600.jpg 1200w, http://mosoblvoop.com/wp-content/uploads/2017/06/n1_1-225x300.jpg 225w, http://mosoblvoop.com/wp-content/uploads/2017/06/n1_1-768x1024.jpg 768w, http://mosoblvoop.com/wp-content/uploads/2017/06/n1_1.jpg 1224w" sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 88vw, 1200px"></a></div><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><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="imaage"><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/"><img width="1200" height="800" src="http://mosoblvoop.com/wp-content/uploads/2017/06/n2_20-1200x800.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" srcset="http://mosoblvoop.com/wp-content/uploads/2017/06/n2_20-1200x800.jpg 1200w, http://mosoblvoop.com/wp-content/uploads/2017/06/n2_20-300x200.jpg 300w, http://mosoblvoop.com/wp-content/uploads/2017/06/n2_20-768x512.jpg 768w, http://mosoblvoop.com/wp-content/uploads/2017/06/n2_20-1024x682.jpg 1024w" sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 88vw, 1200px"></a></div><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><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="imaage"><a href="http://mosoblvoop.com/2017/04/03/136/"><img width="1200" height="800" src="http://mosoblvoop.com/wp-content/uploads/2017/06/n2_20-1200x800.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" srcset="http://mosoblvoop.com/wp-content/uploads/2017/06/n2_20-1200x800.jpg 1200w, http://mosoblvoop.com/wp-content/uploads/2017/06/n2_20-300x200.jpg 300w, http://mosoblvoop.com/wp-content/uploads/2017/06/n2_20-768x512.jpg 768w, http://mosoblvoop.com/wp-content/uploads/2017/06/n2_20-1024x682.jpg 1024w" sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 88vw, 1200px"></a></div><a href="http://mosoblvoop.com/2017/04/03/136/">
</a><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>

рони 26.06.2017 22:44
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>

рони 26.06.2017 22:58
Цитата:
Сообщение от maxg5
С картинками такой код HTML
 
$(function() {
    var parent = $(".gg"),
        title = $(".the_time", parent),
        content = $(".imaage 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.hide().eq(i).show();
        if (!hold) {
            i = ++i % len;
            timer = window.setTimeout(show, 3E3)
        }
    }
    show();
    parent.mouseleave(function() {
        show(false)
    })
});

maxg5 26.06.2017 23:12
рони,
Все работает.
Спасибо!


Часовой пояс GMT +3, время: 16:06.