質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.99%

jsのJQueryのプラグのニュースティッカー動作についての質問です。

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 1,926

UekiKouji

score 115

いつもお世話になります。ニュースティッカーの拡張について助言お願いします。

http://black-flag.net/jquery/20121114-4332.html

https://github.com/miraoto/jquery.simpleTicker.js

の2点のサイトをもとに上下にスライドするようにしたいと思っています。
以下のjQueryのプラグを呼び込みliの記事をスライド上下にさせます。
現状このjQueryのプラグ1行分の記事しかスライドできません。
このプラグを拡張し、3行分をスライドさせるようにしたいです。
◆HTML

<div class="ticker" rel="fade">
<ul>
<li><a href="#1">【News1】このテキストはNewsTicker用のダミーテキスト[1]です。</a></li>
<li><a href="#2">【News2】このテキストはNewsTicker用のダミーテキスト[2]です。</a></li>
<li><a href="#3">【News3】このテキストはNewsTicker用のダミーテキスト[3]です。</a></li>
<li><a href="#4">【News4】このテキストはNewsTicker用のダミーテキスト[4]です。</a></li>
<li><a href="#5">【News5】このテキストはNewsTicker用のダミーテキスト[5]です。</a></li>
</ul>
</div><!--/.ticker-->

◆jquery.simpleTicker.css

.ticker {
  margin: 0 auto;
  padding: 10px;
  width: 600px;
  text-align: left;
  border: #ccc 1px solid;
  position: relative;
  overflow: hidden;
  background-color:#ffffff;
}

.ticker ul {
  width: 100%;
  position: relative;
}

.ticker ul li {
  width: 100%;
  display: none;
}


◆jquery.simpleTicker.js

(function($) {
  $.simpleTicker =function(element, options) {
    var defaults = {
      speed : 1000,
      delay : 3000,
      easing : 'swing',
      effectType : 'slide'
    }

    var param = {
      'ul' : '',
      'li' : '',
      'initList' : '',
      'ulWidth'  : '',
      'liHeight' : '',
      'tickerHook' : 'tickerHook',
      'effect' : {}
    }

    var plugin = this;
        plugin.settings = {}

    var $element = $(element),
        element = element;

    plugin.init = function() {
      plugin.settings = $.extend({}, defaults, options);
      param.ul = element.children('ul');
      param.li = element.find('li');
      param.initList = element.find('li:first');
      param.ulWidth  = param.ul.width();
      param.liHeight = param.li.height();

      element.css({height:(param.liHeight)});
      param.li.css({top:'0',left:'0',position:'absolute'});

      //dispatch
      switch (plugin.settings.effectType) {
        case 'fade':
          plugin.effect.fade();
          break;
        case 'roll':
          plugin.effect.roll();
          break;
        case 'slide':
          plugin.effect.slide();
          break;
      }
      plugin.effect.exec();
    }

    plugin.effect = {};

    plugin.effect.exec = function() {
      param.initList.css(param.effect.init.css)
                    .animate(param.effect.init.animate,plugin.settings.speed,plugin.settings.easing)
                    .addClass(param.tickerHook);
      setInterval(function(){
        element.find('.' + param.tickerHook)
               .animate(param.effect.start.animate,plugin.settings.speed,plugin.settings.easing)
               .next()
               .css(param.effect.next.css)
               .animate(param.effect.next.animate,plugin.settings.speed,plugin.settings.easing)
               .addClass(param.tickerHook)
               .end()
               .appendTo(param.ul)
               .css(param.effect.end.css)
               .removeClass(param.tickerHook);
      },plugin.settings.delay);
    }

    plugin.effect.fade = function() {
      param.effect = {
        'init' : {
          'css' : {display:'block',opacity:'0'},
          'animate' : {opacity:'1',zIndex:'98'}
        },
        'start' : {
          'animate' : {opacity:'0'}
        },
        'next' : {
          'css' : {display:'block',opacity:'0',zIndex:'99'},
          'animate' : {opacity:'1'}
        },
        'end' : {
          'css' : {display:'none',zIndex:'98'}
        }
      }
    }

    plugin.effect.roll = function() {
      param.effect = {
        'init' : {
          'css' : {top:'3em',display:'block',opacity:'0'},
          'animate' : {top:'0',opacity:'1',zIndex:'98'}
        },
        'start' : {
          'animate' : {top:'-3em',opacity:'0'}
        },
        'next' : {
          'css' : {top:'3em',display:'block',opacity:'0',zIndex:'99'},
          'animate' : {top:'0',opacity:'1'}
        },
        'end' : {
          'css' : {zIndex:'98'}
        }
      }
    }


    plugin.effect.slide = function() {
      param.effect = {
        'init' : {
          'css' : {left:(200),display:'block',opacity:'0'},
          'animate' : {left:'0',opacity:'1',zIndex:'98'}
        },
        'start' : {
          'animate' : {left:(-(200)),opacity:'0'}
        },
        'next' : {
          'css' : {left:(param.ulWidth),display:'block',opacity:'0',zIndex:'99'},
          'animate' : {left:'0',opacity:'1'}
        },
        'end' : {
          'css' : {zIndex:'98'}
        }
      }
    }

    plugin.init();
  }

  $.fn.simpleTicker = function(options) {
    return this.each(function() {
      if (undefined == $(this).data('simpleTicker')) {
        var plugin = new $.simpleTiecker(this, options);
        $(this).data('simpleTicker', plugin);
      }
    });
  }
})(jQuery);

3行分スライドさせるためには、以下の部分の2点のいずれかを変更すればできるとは、
思うのですが、どのように変更したらよいのかわかりません。
ご教授もしくは、アドバイスをいただけないでしょうか。
よろしくお願いします。
◆jquery.simpleTicker.js

param.initList = element.find('li:first'); // ここで1行分しか取得していないために1行分しかスライド                       // できない


◆jquery.simpleTicker.js

plugin.effect.roll = function() {
      param.effect = {
        'init' : {
          'css' : {top:'3em',display:'block',opacity:'0'},
          'animate' : {top:'0',opacity:'1',zIndex:'98'}
        },
        'start' : {
          'animate' : {top:'-3em',opacity:'0'}
        },
        'next' : {
          'css' : {top:'3em',display:'block',opacity:'0',zIndex:'99'},
          'animate' : {top:'0',opacity:'1'}
        },
        'end' : {
          'css' : {zIndex:'98'}
        }
      }
    }
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

0

リストを入れ子にして取得する単位を3つずつにすればいいと思います。

<!-- リストを3つずつ入れ子にする -->
<ul class='roll'>
    <li>
        <ul>
            <li><a href="#1">【News1】このテキストはNewsTicker用のダミーテキスト[1]です。</a></li>
            <li><a href="#2">【News2】このテキストはNewsTicker用のダミーテキスト[2]です。</a></li>
            <li><a href="#3">【News3】このテキストはNewsTicker用のダミーテキスト[3]です。</a></li>
        </ul>
    </li>
    <li>
        <ul>
            <li><a href="#4">【News4】このテキストはNewsTicker用のダミーテキスト[4]です。</a></li>
            <li><a href="#5">【News5】このテキストはNewsTicker用のダミーテキスト[5]です。</a></li>
            <li><a href="#6">【News5】このテキストはNewsTicker用のダミーテキスト[6]です。</a></li>
        </ul>
    </li>
</ul>
/* [css/common.css] */
.ticker ul li {
    width: 100%;
    display: none;
}.ticker ul.roll > li {
    width: 100%;
    display: none;
}
// 最初の方の2行
var $targetUl = $targetObj.children('ul');
var $targetLi = $targetObj.find('li');

↓

var $targetUl = $targetObj.children('ul.roll');
var $targetLi = $targetObj.find('ul.roll > li');

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/07 02:16

    あと、
    ul > li
    の解説は理解しました。
    丁寧に説明していただきありがとうございます。

    キャンセル

  • 2016/06/07 02:25

    list-styleがそのまま出てしまっているのでreset.cssを読み込んでいないんじゃないでしょうか?

    サンプルのhead内:

    <link rel="stylesheet" type="text/css" href="http://black-flag.net/data/css/reset.css">

    が該当箇所です。あとhtmlで一番外側のulにclass="roll"は指定しましたか?

    キャンセル

  • 2016/06/08 01:24

    ご回答ありがとうございます。ご指摘いただいた通りにしてみました。
    実際これでデバックすると、
    1と2を表示した。あと、3の状態になります。
    その後、1が消えて、2が点滅が続きます。
    (1,2,3の状態は以下に示しています。すいません。)

    私は、要素を指定しているので、1が表示されて、上に移動し消えて、2が表示され、上に移動して消えるという状態が続くと思うのですが、何が原因で想定した動きにならないでしょうか。すいません。ご教授をお願いできないでしょうか。よろしくお願いします。
    1
    ///
    【News1】このテキストはNewsTicker用のダミーテキスト[1]です。
    【News2】このテキストはNewsTicker用のダミーテキスト[2]です。
    【News3】このテキストはNewsTicker用のダミーテキスト[3]です。
    ///

    2
    ///
    【News4】このテキストはNewsTicker用のダミーテキスト[4]です。
    【News5】このテキストはNewsTicker用のダミーテキスト[5]です。
    【News5】このテキストはNewsTicker用のダミーテキスト[6]です。
    ///

    3
    ///
    【News1】このテキストはNewsTicker用のダミーテキスト[1]です。
    【News2】このテキストはNewsTicker用のダミーテキスト[2]です。
    【News3】このテキストはNewsTicker用のダミーテキスト[3]です。
    【News4】このテキストはNewsTicker用のダミーテキスト[4]です。
    【News5】このテキストはNewsTicker用のダミーテキスト[5]です。
    【News5】このテキストはNewsTicker用のダミーテキスト[6]です。
    ///

    キャンセル

0

任意の数ごとにliタグをulタグで囲うを参考に、jsFiddleのサンプルを作りました。
で、これまではliを動かしてられたと思いますが、これでulを動かせばイケるのではなかろうかと。

サンプルは、3つ毎にulで囲むと言うものです。別にulでなくてもdivで任意のクラスにしても良いかと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/08 01:33

    ありがとうございます。やってみます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.99%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる