左にスライドした時に他の要素が一瞬チラついてしまうのを無くしたい

html
1
2    <div id="slide">
3      <ul class="">
4        <li>a</li>
5        <li>b</li>
6        <li>c</li>
7      </ul>
8    </div>
9    <buttn id="pre">左</buttn>
10    <buttn id="next">右</buttn>

css
1
2#slide {
3  overflow: hidden;
4  position: relative;
5  height: 500px;
6
7}
8
9ul {
10  position: absolute;
11  width: 3000px
12}
13
14ul li {
15  width: 1000px;
16  background: #777;
17  height: 500px;
18  float: left;
19  li
20
21
22#slide {
23  overflow: hidden;
24  position: relative;
25  height: 500px;
26
27}
28
29ul {
30  position: absolute;
31  width: 3000px
32}
33
34ul li {
35  width: 1000px;
36  background: #777;
37  height: 500px;
38  float: left;
39  li
40

js
1
2  <script>
3    'use strict';
4    $(function() {
5      var dir = -1;
6      var intervar = 3000;
7      var duration = 700;
8      var timer;
9
10
11      $('#slide ul').prepend($('#slide li:last-child'));
12      $('#slide ul').css('left', -1000);
13      timer = setIntervar(slideTimer, intervar);
14
15      function slideTimer() {
16
17        if (dir == -1) {
18          $('#slide ul').animate({
19            'left': '-=1000px'
20          }, duration, function() {
21            $(this).append($('#slide li:first-child'));
22            $(this).css('left', -1000);
23
24          });
25        } else {
26
27          $('#slide ul').animate({
28            'left': '+=1000px'
29          }, duration, function() {
30            $(this).prepend($('#slide li:last-child'));
31            $(this).css('left', -1000);
32            dir = -1;
33          });
34
35        }
36
37
38      }
39
40      $('#pre').click(function() {
41        dir = 1;
42
43        clearInterval(timer);
44        timer = setInterval(slideTimer, interval);
45
46        slideTimer();
47      });
48
49      $('#next').click(function() {
50        dir = -1;
51
52
53        clearInterval(timer);
54        timer = setInterval(slideTimer, interval);
55
56        slideTimer();
57      });
58
59
60    });

スライド領域の左側に他の要素がちらつく原因は何でしょうか。
エラーメッセージも特に出ていないので何を直せば良いかわからない状態です。
ちなみに右にスライドした時はちらつかないです。

行動規範の内容に同意します

回答1件

ベストアンサー

スライド領域の左側に他の要素がちらつく

とのことですが、実際には左右どちらに移動をしても、li要素はそのたびに移動しているので、
右側は画面に映っていないだけです。

では、なぜ左側がちらつくのか？ですがおそらくはul要素にブラウザのデフォルトCSSのpadding-leftが適用されて、
下位要素のliが左によることで、発生しているものと思われます。

以下対応事例です。
CSSのコメント部を確認してみてください。

動くサンプル-CODEPEN

html
1<div id="slide">
2  <ul>
3    <li><img src="http://placehold.jp/24/660000/ffffff/1000x500.png"></li>
4    <li><img src="http://placehold.jp/24/006600/ffffff/1000x500.png"></li>
5    <li><img src="http://placehold.jp/24/000066/ffffff/1000x500.png"></li>
6  </ul>
7</div>
8
9<button class="slideBtn" id="pre">左</button>
10<button class="slideBtn" id="next">右</button>

css
1#slide {
2  overflow: hidden;
3  position: relative;
4  height: 500px;
5  width: 1000px; /*スライドショーの幅決め*/
6}
7
8ul {
9  padding-left: 0; /*デフォルトCSSを上書き*/
10  position: absolute;
11  width: 3000px;
12}
13
14ul li {
15  list-style-type: none; /*リスト先頭のマーク非表示*/
16  width: 1000px;
17  background: #777;
18  height: 500px;
19  float: left;
20}

javascript
1//見通しが悪かったので、各部統合しています
2$(function() {
3  var dir = true; //bool型に変更
4  var interval = 3000;
5  var slideWidth = 1000; //変数追加
6  var duration = 700;
7  var timer;
8
9  //li移動処理を関数化
10  function move_li($this) {
11    if (dir) {
12      $this.prepend($("#slide li:last-child"));
13    } else {
14      $this.append($("#slide li:first-child"));
15    }
16    $this.css("left", slideWidth * -1);
17    dir = false;
18  }
19
20  //初期化
21  move_li($("#slide ul"));
22  timer = setInterval(slideTimer, interval);
23
24  //アニメーション
25  function slideTimer() {
26    let opt = (dir ? "+" : "-") + "=" + slideWidth + "px";
27    $("#slide ul").animate({ left: opt }, duration, function() {
28      $(".slideBtn").prop("disabled", false); //ボタン連続クリックの回避
29      move_li($(this));
30    });
31  }
32
33  //ボタン処理統合
34  $(".slideBtn").click(function() {
35    $(".slideBtn").prop("disabled", true); //ボタン連続クリックの回避
36    dir = $(this).hasClass("pre");
37    clearInterval(timer);
38    timer = setInterval(slideTimer, interval);
39    slideTimer();
40  });
41});