Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Помогите с ротатором банеров (https://javascript.ru/forum/misc/68705-pomogite-s-rotatorom-banerov.html)

Romrius 04.05.2017 09:32

Помогите с ротатором банеров
 
Ситуация такая есть js код для прокручивания баннеров если ставлю один блок с баннерами все работает как часы, а если два то второй блок пропадает после первого баннера, пробовал в index.html подгрузить баннеры через javascript страницей html в разные блоки, начинают вываливаться по нескольку баннерных картинок. Собственно мне и нужно в index.html баннеры брать с другой страницы. Вот как бы сам код, помогите разобраться в чем проблема:
Код:

<html>
<head>
        <title></title>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript">
                $(document).ready(function(){
               
                        // получаем массив блоков с нужными нам изображени¤ми
                        var banners = $("#adBanner00 div").toArray();
                       
                        // класс с параметрами
                        settings = function() {
                                this.banners = banners;              // массив блоков с изображени¤ми
                                this.sum        = this.banners.length;  // количество блоков с изображени¤ми
                                this.timeIn  = 1000;                // врем¤ дл¤ по¤влени¤
                                this.timeOut = 1000;                // врем¤ дл¤ скрыти¤
                                this.timeView= 2000;                // тайм-аут дл¤ показа
                        }
                       
                        var obj = new settings();
                        if (obj.sum < 1) {
                                $("#adBanner00").html("<p>DO NOT IMAGES</p>");                       
                        }
                        else {
                               
                                // скрываем все изображени¤ блока #adBanner00
                                $("#adBanner00 div").css({
                                        "display":"none"
                                });
                               
                                // создаем блок дл¤ показа с индикатором загрузки дл¤ эффектного начала
                                $("#adBanner00").prepend("<div id='adBanner00_view'></div>");
                               
                                // запускаем функцию показа
                                view (0);
                        }

                       
                        function view (num){
                                // инициализируем экземпл¤р класса settings()
                                var obj = new settings();
                                // если показали все изображени¤, показываем их снова
                                if (num >= obj.sum) num = 0;
                               
                                var interval = setInterval (function(){
                                        // очистка блока показа
                                        $("#adBanner00_view *").remove();
                                       
                                        // копи¤ изображени¤ в блок показа
                                        $(obj.banners[num]).clone().prependTo("#adBanner00_view");
                                       
                                        // показ изображени¤
                                        $("#adBanner00_view div").fadeIn(obj.timeIn);
                                       
                                        clearInterval(interval);
                                        num++;
                                },obj.timeIn);
                               
                                // скрытие изображени¤
                                $("#adBanner00_view div").fadeOut(obj.timeOut);
                               
                                // снова запускаем сами себ¤ если изображений больше одного
                                if (obj.sum > 1) setTimeout(function(){view(num)},obj.timeIn+obj.timeOut+obj.timeView);
                        }
                });       
        </script>

                <script type="text/javascript">
                        $(document).ready(function(){
               
                        // получаем массив блоков с нужными нам изображени¤ми
                        var banners01 = $("#adBanner01 div").toArray();
                       
                        // класс с параметрами
                        settings = function() {
                                this.banners01 = banners01;            // массив блоков с изображени¤ми
                                this.sum        = this.banners01.length;  // количество блоков с изображени¤ми
                                this.timeIn  = 1000;                // врем¤ дл¤ по¤влени¤
                                this.timeOut = 1000;                // врем¤ дл¤ скрыти¤
                                this.timeView= 2000;                // тайм-аут дл¤ показа
                        }
                       
                        var obj = new settings();
                        if (obj.sum < 1) {
                                $("#adBanner01").html("<p>DO NOT IMAGES</p>");                       
                        }
                        else {
                               
                                // скрываем все изображени¤ блока #adBanner01
                                $("#adBanner01 div").css({
                                        "display":"none"
                                });
                               
                                // создаем блок дл¤ показа с индикатором загрузки дл¤ эффектного начала
                                $("#adBanner01").prepend("<div id='adBanner01_view'></div>");
                               
                                // запускаем функцию показа
                                view (0);
                        }

                       
                        function view (num){
                                // инициализируем экземпл¤р класса settings()
                                var obj = new settings();
                                // если показали все изображени¤, показываем их снова
                                if (num >= obj.sum) num = 0;
                               
                                var interval = setInterval (function(){
                                        // очистка блока показа
                                        $("#adBanner01_view *").remove();
                                       
                                        // копи¤ изображени¤ в блок показа
                                        $(obj.banners01[num]).clone().prependTo("#adBanner01_view");
                                       
                                        // показ изображени¤
                                        $("#adBanner01_view div").fadeIn(obj.timeIn);
                                       
                                        clearInterval(interval);
                                        num++;
                                },obj.timeIn);
                               
                                // скрытие изображени¤
                                $("#adBanner01_view div").fadeOut(obj.timeOut);
                               
                                // снова запускаем сами себ¤ если изображений больше одного
                                if (obj.sum > 1) setTimeout(function(){view(num)},obj.timeIn+obj.timeOut+obj.timeView);
                        }
                });       
                </script>
       
</head>
<body>
<div id="adBanner01">
                <div>
                        <img src="img/4.jpg" title="4" />
                </div>
                <div>
                        <img src="img/5.jpg" title="5" />
                </div>
        </div>

<div id="adBanner00">
                <div>
                        <img src="img/1.jpg" title="1" />
                </div>
                <div>
                        <img src="img/2.jpg" title="2" />
                </div>
                <div>
                        <img src="img/3.jpg" title="3" />
                </div>
        </div>
</body>
</html>


рони 04.05.2017 09:45

Romrius,
http://javascript.ru/forum/misc/2949...tml#post447465

Romrius 04.05.2017 09:55

Цитата:

Сообщение от рони (Сообщение 451572)

рони Спасибо!!
Если есть еще у кого нибудь мысли буду рад услышать!
Так же хотелось бы узнать где у меня ошибка.

рони 04.05.2017 10:03

Цитата:

Сообщение от Romrius
Так же хотелось бы узнать где у меня ошибка.

если блоков несколько, то нужен цикл по блокам
$(function() {
      $(".adBanner").each(function(indx, el){
            var banners = $("div", el).toArray();
            //....

            });
});

Romrius 04.05.2017 10:54

рони
Я так понимаю второй js я удаляю за место:
$(document).ready(function(){

			var banners = $("#adBanner00 div").toArray();

ставлю:

$(function() {
      $(".adBanner").each(function(indx, el){
            var banners = $("div", el).toArray();
            //....
            });
});

и потом просто перечисляю название блоков #adBanner00, #adBanner01 так?

рони 04.05.2017 11:13

Цитата:

Сообщение от Romrius
перечисляю название блоков

присвойте блокам одинаковый класс

Romrius 04.05.2017 11:38

рони Если не сложно можешь дать рабочий js
что то у меня все равно не работает. Просто вывалились все картинки и все.

рони 04.05.2017 14:43

Romrius,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
    $(".banner").each(function(indx, el) {
        var banners = $("div", el).toArray();
        var settings = function() {
            this.banners = banners;
            this.sum = this.banners.length;
            this.timeIn = 1000;
            this.timeOut = 1000;
            this.timeView = 2000
        };
        var obj = new settings;
        if (obj.sum < 1) $(el).html("<p>DO NOT IMAGES</p>");
        else {
            $("div", el).css({
                "display": "none"
            });
            var adBanner = $("<div></div>").prependTo(el),
                num = 0;
            view()
        }

        function view() {
            $(obj.banners[num]).clone().prependTo(adBanner).fadeIn(obj.timeIn, function() {
                $(this).delay(obj.timeView).fadeOut(obj.timeOut,
                    function() {
                        $(this).remove();
                        num = ++num % obj.sum;
                        view()
                    })
            })
        }
    })
});
  </script>
</head>


<body>
<div  class="banner">
    <div>
      <img src="http://img-fotki.yandex.ru/get/5640/35900228.10c/0_7388e_3ab59b4a_XL.jpeg.jpg" title="4" />
    </div>
    <div>
      <img src="http://1.bp.blogspot.com/-aleHkBUuqOI/VY0HrCytsXI/AAAAAAAAq1g/f2emGtdqdWo/s640/2015-06-05_0145.jpg" title="5" />
    </div>
  </div>

<div class="banner">
    <div>
      <img src="http://static.mnogonado.net/images/img.php?w=250&l=%2Fstore%2Fimage%2F800x600_qdv_57108c999ba0b1775c4bfe263023fb6a_1474795-404.png" title="1" />
    </div>
    <div>
      <img src="http://rugirlz.com/pics/hv_dp20088034.jpg" title="2" />
    </div>
    <div>
      <img src="https://im1-tub-ru.yandex.net/i?id=34d38102784fbb45657d73def5d2178f-l&n=13" title="3" />
    </div>
  </div>

</body>
</html>

Romrius 04.05.2017 15:14

рони еще раз от души, спасибо!
Пойду разбираться, и учить матчасть )))


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