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

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

ただいまの
回答率

90.53%

  • JavaScript

    19879questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    11122questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    7977questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    7273questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

JavaScriptのクラス構文 constructorにHTMLエレメントを定義できる?

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 115

Naotimu

score 1

課題でプラグインなしでスライダーを作っています。
コードはできているのですが、今のコードをクラス構文に書き直す課題です。

constructorにhtmlエレメントを定義したいのですが、
その場合の引き数をどう定義して良いのか?
メソッドの中にどう書くべきか?
そもそも、constructorにhtmlエレメントを定義するのがダメなのか?

色々試して、consoleにエラーは出ないものの起動もしません。
(同じコードでクラス構文を使わなければ動きます。)
ネットでも同じ例が見つけられなくて、こちらで再び質問しました。
どうぞよろしくお願いします。

let slideNumber = $('.slide').length;
let slideLarge = $('.slide').width();
let slideContentsLarge = slideNumber * slideLarge;
slideNumber = 0;

class Slider {
  constructor(slide, slideContainer, contents, animationSpeed, interval){
  this.slide = document.getElementById('slider');
  this.slideContainer = document.getElementsByClassName('slide-container');
  this.contents = document.getElementsByClassName('slide');
  this.animationSpeed = animationSpeed;
  this.interval = interval;
} //constructor


  initSlide(){

  $(this.contents).css('width', slideLarge);
  $(this.slideContainer).css({
    width: slideContentsLarge,
    marginLeft: -slideLarge
  });

  // On insère la dernière slide au début de la Div.slide-container
  $('.slide:last-child').prependTo($(this.slideContainer));

  function moveGauche(){
    $(this.contents).animate({'left': slideLarge}, this.animationSpeed, function(){
      $('.slide:last-child').prependTo($(this.slideContainer));
      $(this.slideContainer).css('left', '');
    });
  }
  //next
  function moveDroite(){
    slideNumber++;
    $(this.slideContainer).animate({'left': -slideLarge}, this.animationSpeed, function(){
    $('.slide:first-child').appendTo($(this.slideContainer));
    $(this.slideContainer).css('left', '');
  });

}
setInterval(moveDroite, this.interval);
} //initSlide()

} //class Slider

const slider = new Slider('slide', 'slideContainer', 'contents', 300, 5000);
slider.initSlide();
<body>
    <div class="container-fluid">
      <section class="row" id="slider">
       <div class="col-md-12 slide-container">
         <div class="col-md-12 slide" id="slide06"></div>         
         <div class="col-md-12 slide" id="slide01"></div>
         <div class="col-md-12 slide" id="slide02"></div>
         <div class="col-md-12 slide" id="slide03"></div>
         <div class="col-md-12 slide" id="slide04"></div>
         <div class="col-md-12 slide" id="slide05"></div>
      </div>
      <div class="slider-navi">
        <a href="#" class="arrow next"><i class="fas fa-arrow-right"></i></a>
        <a href="#" class="arrow prev"><i class="fas fa-arrow-left"></i></a>
      </div>
      <div class="pagination"></div>
    </section>
#slider {
  height: 500px;
  width: 85%;
  position: relative;
  margin: auto;
  box-shadow: 0 0 8px #404040;
}

.slide-view {
  /*position: relative;*/
  overflow: hidden;
  height: 500px;
  width: 100%;
}

.slide-container {
  width: 600%;
  height: 100%;
  display: flex;
  position: absolute;
  left: 0;
}

.slide{
  position: relative;
  width: 100%;
  height: 500px;
  color: #fff;
  /*float: left;*/
}

.slide a {
  display: block;
}

.slide a:hover {
  color: #600;
}

#slide01 {
  background: linear-gradient(45deg, rgba(24, 24, 24, 0.9) 10%, rgba(255, 255, 255, 0.1) 55%),
              url(images/bike-414278_1920.jpg) no-repeat 0px -120px;
}

#slide01 .text-container {
  color: #fff;
  top: 20%;
  left: 50px;
}

#slide01 .text-container > h2 {
  font-size: 3em;
  font-family: 'latobold', Arial, sans-serif;
}

#slide01 .text-container > h1 {
  font-size: 1.5em;
  font-family: 'latoregular', Arial, sans-serif;
  line-height: 1.5em;
}

/* slide 02 */
#slide02 {
  background: linear-gradient(rgba(22, 129, 134, 0.7), rgba(22, 129, 134, 0.7)),
  url(images/bike-414278_1920.jpg);
}

#slide02 .text-container,
#slide03 .text-container,
#slide04 .text-container,
#slide05 .text-container,
#slide06 .text-container
{
  margin: 80px auto auto auto;
  text-align: center;
  width:70%;
}

#slide02 .text-container{
  margin: 120px auto auto auto;
}

#slide02 .text-container > h2{
  font-size: 2.8em;
  margin-bottom: 0.6em;
}

#slide02 .text-container > p{
  font-size: 1.4em;
  line-height: 1.5em;
  font-family: 'latoregular', sans-serif;
}

#slide03 .text-container > h3,
#slide04 .text-container > h3,
#slide05 .text-container > h3,
#slide06 .text-container > h3 {
  font-size: 1.8em;
  line-height: 1.5em;
  font-family: 'latoregular', sans-serif;
}

#slide03 .text-container > p,
#slide04 .text-container > p,
#slide05 .text-container > p,
#slide06 .text-container > p {
  font-size: 1.2em;
  border: 1px solid #fff;
  padding: 5px 3px;
  margin: 5% auto;
}

#slide03 .text-container > img,
#slide04 .text-container > img,
#slide05 .text-container > img,
#slide06 .text-container > img {
  width: 20%;
  margin-bottom: 0;
}


#slide03 {
  background: linear-gradient(rgba(119, 178, 82, 0.8), rgba(119, 178, 82, 0.8)),
  url(images/bike-414278_1920.jpg);
}

#slide04 {
  background:
  linear-gradient(rgba(245, 166, 31, 0.8), rgba(245, 166, 31, 0.8)),
  url(images/bike-414278_1920.jpg);
}

#slide05 {
  background:
  linear-gradient(rgba(22, 142, 149, 0.8), rgba(22, 142, 149, 0.8)),
  url(images/bike-414278_1920.jpg);
}

#slide06 {
  background:
  linear-gradient(rgba(142, 119, 182, 0.8), rgba(142, 119, 182, 0.8)),
  url(images/bike-414278_1920.jpg);
}

.slider-navi a,
.pagination a {
  overflow: hidden;
}

.slider-navi a.disabled{
  display: none;
}


.arrow {
  z-index: 10;
  cursor: pointer;
  position: absolute;
  top: 45%;
  color: #FFF;
  font-size: 1.2em;
}

.arrow i {
  color: #D75254;
  border: solid 1px #D75254;
  padding: 7px;
}

.arrow i:hover{
  border: solid 1px rgba(255, 255, 255, 0.7);
  background: rgba(64, 64, 64, 0.5);
  color: rgba(215,84,82,0.7);
}

.next {
 position: absolute;
 right: -70px;
}

.prev {
  position: absolute;
  left: -70px;
}

.pagination {
    position: absolute;
    bottom: 30px;
    left: 45%;
    width: 200px;
    z-index: 30;
}

.pagination a {
    float: left;
    margin: 5px 5px 0;
    width: 11px;
    height: 11px;
    border-radius: 5px;
    background: rgba(238, 238, 238, 0.8);
    vertical-align: middle;
}

.pagination a.active{
   cursor: default;
   background: rgba(215,84,82,1);
}

.pagination a.active:before{
   margin-left: -130px;
}

追記:クラス定義を修正したjavascriptコードとクラス名を変更したのでHTMLファイルも再度掲載します。

let slideNumber = $('.contents').length;
let slideLarge = $('.contents').width();
let slideContentsLarge = slideNumber * slideLarge;

console.log(slideNumber);
console.log(slideLarge);
console.log(slideContentsLarge);

slideNumber = 0;

class Slider {
  constructor(slider, slidecontainer, contents, animationSpeed, interval){
  this.slide = $("#"+slider);
  this.slideContainer = $("."+slidecontainer);
  this.contents = $("."+contents);
  this.animationSpeed = animationSpeed;
  this.interval = interval;
} //constructor

 check(){
  console.log($(this.slide).length);
  console.log($(this.slideContainer).length);
  console.log($(this.contents).length);
};

  initSlide(){
  $(this.contents).css('width', slideLarge);
  $(this.slideContainer).css({
    width: slideContentsLarge,
    marginLeft: -slideLarge
  });

  // On insère la dernière slide au début de la Div.slide-container
  $('.contents:last-child').prependTo($(this.slideContainer));
//prev
  function moveGauche(){
    slideNumber--;
    $(this.slideContainer).animate({'left': slideLarge}, this.animationSpeed, function(){
      $('.contents:last-child').prependTo($(this.slideContainer));
    $(this.slideContainer).css('left', '');
    });
  }
  //next
  function moveDroite(){
    slideNumber++;
    $(this.slideContainer).animate({'left': -slideLarge}, this.animationSpeed, function(){
    $('.contents:first-child').appendTo($(this.slideContainer));
    $(this.slideContainer).css('left', '');
  });

}
setInterval(moveDroite, this.interval);
} //initSlide()

} //class Slider
window.addEventListener('DOMContentLoaded', function(e){
  const sliderA = new Slider('slider', 'slidecontainer', 'contents', 300, 5000);
  sliderA.initSlide();
  sliderA.check();
});
<section class="row" id="slider">
 <div class="col-md-12 slide-view">
  <div class="col-md-12 slidecontainer">

   <div class="col-md-12 contents" id="slide01"></div>
   <div class="col-md-12 contents" id="slide02"></div>
   <div class="col-md-12 contents" id="slide03"></div>
   <div class="col-md-12 contents" id="slide04"></div>
   <div class="col-md-12 contents" id="slide05"></div>
   <div class="col-md-12 contents" id="slide06"></div>

  </div> <!--slidecontainer-->
 </div> <!--slide-view-->
</section>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2019/04/15 18:08

    HTMLも質問文に追記されてはいかがでしょう。

    キャンセル

  • Naotimu

    2019/04/15 18:16

    了解です!

    キャンセル

回答 3

+3

class Slider {
constructor(slide, slideContainer, contents, animationSpeed, interval){
this.slide = document.getElementById('slider');
this.slideContainer = document.getElementsByClassName('slide-container');
this.contents = document.getElementsByClassName('slide');
this.animationSpeed = animationSpeed;
this.interval = interval;
}

コンストラクタに渡した変数を無視してスタティックにgetElementByIdしています
ちなみに宣言時点ですでにそのidを持ったHTMLElementがあるなら拾えるでしょうし
これからつくるならdocument.createElementでHTML要素を作った上で
idを付加してあげてください

sample

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
class Slider {
  constructor(slide, slideContainer, contents, animationSpeed, interval){
    this.slide = $("#"+slide);
    this.slideContainer = $("."+slideContainer);
    this.contents = $("."+contents);
    this.animationSpeed = animationSpeed;
    this.interval = interval;
  }
  check(){
    console.log($(this.slide).length);
    console.log($(this.slideContainer).length);
    console.log($(this.contents).length);
  }
}  
window.addEventListener('DOMContentLoaded', function(e){
  const s = new Slider('slider', 'slide-container', 'slide', 300, 5000);
  s.check();
});
</script>

<body>
    <div class="container-fluid">
      <section class="row" id="slider">
       <div class="col-md-12 slide-container">
         <div class="col-md-12 slide" id="slide06"></div>         
         <div class="col-md-12 slide" id="slide01"></div>
         <div class="col-md-12 slide" id="slide02"></div>
         <div class="col-md-12 slide" id="slide03"></div>
         <div class="col-md-12 slide" id="slide04"></div>
         <div class="col-md-12 slide" id="slide05"></div>
      </div>
      <div class="slider-navi">
        <a href="#" class="arrow next"><i class="fas fa-arrow-right"></i></a>
        <a href="#" class="arrow prev"><i class="fas fa-arrow-left"></i></a>
      </div>
      <div class="pagination"></div>
    </section>

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/04/15 18:29

    回答ありがとうございます。
    すみません、「コンストラクタに渡した変数を無視してスタティックにgetElementByIdしている」という意味が分かりませんでした。初心者なもので、噛み砕いで説明いただいてもいいでしょうか?

    constructorの引数と変数の名前が違うという意味ですか?
    それは私も気になっていて、でも、変数の値、例えば
    this.slideContainer = document.getElementsByClassName('slide-container');において
    引数をslide-containerにするとエラーが出ました。

    ちなみに、idとclassを持ったエレメントはHTMLに定義されています。
    HTMLコードとCSSコードも追記しました。

    キャンセル

  • 2019/04/15 18:47 編集

    new Slider('slide', 'slideContainer', 'contents', 300, 5000);

    引数の順番に'slide', 'slideContainer', 'contents'という文字列と 300, 5000という数値を渡しています
    これがコンストラクタでslide, slideContainer, contents, animationSpeed, intervalの各変数に
    'slide', 'slideContainer', 'contents', 300, 5000が渡っています。

    コンストラクタ内では
    this.slide = document.getElementById('slider');
    としていますが'slider'というスタティックな文字列リテラルを渡しているので
    さきほど受け取っsliderという変数がなんにも役になっていません

    同じような名前でクラスの名称も、変数も、文字列も使いまわしているので
    ご自身で何がなんだかわからなくなっているのでしょう、きっと

    とりあえずsampleつけておきました。
    jQueryオブジェクトが渡せているのがわかるでしょう。
    HTMLCollectionやNodeList、HTMLElementなどでも同様に処理できるはずです

    キャンセル

  • 2019/04/15 22:37

    回答とサンプルありがとうございました。
    納得です。
    jQueryオブジェクト、consoleで正しく表示されました。

    なのに、まだスライドが動きません。
    同じコードでクラスを使わないと動くのになぜ???

    もう一回見直します。

    キャンセル

  • 2019/04/16 11:25

    jQueryオブジェクト(もしくはDOM)がつかめているならあとは
    スライダーの実装の問題では?
    想定するスライダーとはどういう仕様なのか提示したほうがよいでしょうね

    キャンセル

  • 2019/04/16 16:46 編集

    スライダーは6枚のスライドをCSSで横1列に並べ、スライド幅の分だけ五秒毎に左にスライドさせるタイプです。
    スライド一枚の幅を設定し、右に進む場合、左にその分だけずらす、同時に一番前のスライド(.contents:first-child)を横いちで並べたスライド帯の一番後ろに回しています。これをsetIntervalで五秒毎に動くように設定。
    左に進む場合は、その逆で(.contents:last-child)をスライド帯の一番前に回しています。
    この後に、左右へ進むボタンの設定もありますが、割愛します。

    クラスを使わない書き方だと正常に動くということは、クラスの書き方が間違っているのでしょうか?

    キャンセル

  • 2019/04/16 16:50

    コードをつけたかったんですが、コメント欄にはダメなんですね。。。

    キャンセル

  • 2019/04/16 16:52 編集

    コードを書くなら元の質問に追記するか、どうしても見にくくなる懸念があるなら
    そうことわった上で、自分の質問に回答としてつけてください

    キャンセル

  • 2019/04/16 17:35

    了解です。質問に追記しました。
    もしお時間があれば、どうぞよろしくお願いします。

    キャンセル

check解決した方法

0

とうとう解決できました。

JQueryを使った場合、constructorで定義した要素、例えばthis.slideをそのままメソッドの中に入れても読み込めないことが原因でした。
メソッドの中で、要素this.slideを変数に置き換えて代入すると作動しました。
bindメソッドを使ってもこの問題は解決するらしいですが、そのやり方はまだ分かりません。(その方が良いらしいですが)

この問題はJQueryでは確実に、Javascriptでもコードの内容には起こるそうです。
何にしろ、たくさん考えて、色々試して、とても勉強になりました。

回答いただいたyambejpさん、ありがとうございました。
後の方の助けになればと、コード貼っときます。
※HTMLは変更してないので割愛します。

let slideNumber = $('.contents').length;
let slideLarge = $('.contents').width();
let slideContentsLarge = slideNumber * slideLarge;

slideNumber = 0;

class Slider {
  constructor(slider, slidecontainer, contents, speed, interval){
  this.slide = $("#"+slider);
  this.slideContainer = $("."+slidecontainer);
  this.contents = $("."+contents);
  this.speed = speed;
  this.interval = interval;
} 

  initSlide(){

  let slide = this.slide;
  let container = this.slideContainer;
  let contents = this.contents;
  let speed = this.speed;

  $(contents).css('width', slideLarge);
  $(container).css({
    width: slideContentsLarge,
    marginLeft: -slideLarge
  });

  // 一番後ろのスライドをDiv.slide-containerの前にまわす
  $('.contents:last-child').prependTo($(container));

 //prev
  function moveGauche(){
    slideNumber--;
   $(container).animate({'left': slideLarge}, speed, function(){

  // 一番後ろのスライドをDiv.slide-containerの前にまわす
    $('.contents:last-child').prependTo($(container));

  // Div.slide-containerの位置を更新
    $(container).css('left', '');
    });
  }
  //next
  function moveDroite(){
    slideNumber++;
    $(container).animate({'left': -slideLarge}, speed, function(){

  // 一番前のスライドをDiv.slide-containerの後ろにまわす
    $('.contents:first-child').appendTo($(container));
    $(container).css('left', '');
  });

}
var demarrage = setInterval(moveDroite, this.interval);

// ボタン操作の設定
// prev
$('.arrow.prev').on('click', function(){
  moveGauche();
});

// next
$('.arrow.next').on('click', function(){
  moveDroite();
});

// キーボードの←、→での操作の設定
$('html').keydown(function(e){
  switch(e.which){
    case 37: // Key[←]
      moveGauche(e);
    break;

    case 39: // Key[→]
      moveDroite(e);
    break;
      }
  });

  //スライドにマウスが乗ると一旦停止、外れると再びスタート
  $(container).hover(
    function(){
      $(this).css('cursor','url(css/images/icon/pause.png), url(css/images/icon/pause.cur), pointer');
      clearInterval(demarrage);
    },
    function(){
      moveDroite();
    }
  );

} 

} 

window.addEventListener('DOMContentLoaded', function(e){
  const sliderA = new Slider('slider', 'slidecontainer', 'contents', 300, 5000);
  sliderA.initSlide();
});

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

とうとう解決しました。

JQueryを使った場合、constructorで設定した要素、例えばthis.slideを、メソッドの中にそのまま描いても(オブジェクトとして扱われて?ここ曖昧です。。。)、この要素を取得できないことが問題でした。
これらの要素をメソッド内で変数に入れて代入することで解決しました。
他にbindメソッドを使っても良いそう、むしろその方がいいそうですが、その書き方はまだ分かりません。

この問題はJQueryでは確実に、JavaScriptでもコードの内容によって起こるそうです。

後の方の為にコード貼っておきます。
回答いただいたyambejpさん、ありがとうございました。
色々調べて、試して、とても勉強になりました。
※HTMLは変更してないので割愛します。

let slideNumber = $('.contents').length;
let slideLarge = $('.contents').width();
let slideContentsLarge = slideNumber * slideLarge;

slideNumber = 0;

class Slider {
  constructor(slider, slidecontainer, contents, speed, interval){
  this.slide = $("#"+slider);
  this.slideContainer = $("."+slidecontainer);
  this.contents = $("."+contents);
  this.speed = speed;
  this.interval = interval;
} 

  initSlide(){

  let slide = this.slide;
  let container = this.slideContainer;
  let contents = this.contents;
  let speed = this.speed;

  $(contents).css('width', slideLarge);
  $(container).css({
    width: slideContentsLarge,
    marginLeft: -slideLarge
  });

  // 最後尾のスライドをDiv.slidecontainerの一番前にまわす
  $('.contents:last-child').prependTo($(container));
  //prev
  function moveGauche(){
    slideNumber--;
   $(container).animate({'left': slideLarge}, speed, function(){

    // 最後尾のスライドをDiv.slidecontainerの前にまわす
    $('.contents:last-child').prependTo($(container));

    //Div.slidecontainerの位置を更新
    $(container).css('left', '');
    });
  }
  //next
  function moveDroite(){
    slideNumber++;
    $(container).animate({'left': -slideLarge}, speed, function(){

    // 一番前のスライドをDiv.slidecontainerの後ろにまわす
    $('.contents:first-child').appendTo($(container));
    $(container).css('left', '');
  });

}
var demarrage = setInterval(moveDroite, this.interval);

// ボタン操作の設定
$('.arrow.prev').on('click', function(){
  moveGauche();
});

$('.arrow.next').on('click', function(){
  moveDroite();
});

// キーボード 矢印キー← →操作の設定
$('html').keydown(function(e){
  switch(e.which){
    case 37: // Key[←]
      moveGauche(e);
    break;

    case 39: // Key[→]
      moveDroite(e);
    break;
      }
  });

  //マウスがスライドに乗ったら一旦停止、外れたら再びスタート
  $(container).hover(
    function(){
      $(this).css('cursor','url(css/images/icon/pause.png), url(css/images/icon/pause.cur), pointer');
      clearInterval(demarrage);
    },
    function(){
      moveDroite();
    }
  );

} //initSlide()

} //class Slider

window.addEventListener('DOMContentLoaded', function(e){
  const sliderA = new Slider('slider', 'slidecontainer', 'contents', 300, 5000);
  sliderA.initSlide();
});

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

同じタグがついた質問を見る

  • JavaScript

    19879questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    11122questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    7977questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    7273questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。