12 슬라이드

1
<div id="content">
2
  <h3>Slideshow</h3>
3
  <ul id="crossfade">
4
    <li>
5
      <a href="#"><img src="http://qwerew.cafe24.com/images/1.jpg" alt="" /></a>
6
      <p>1번</p>
7
    </li>
8
    <li>
9
      <a href="#"><img src="http://qwerew.cafe24.com/images/2.jpg" alt="" /></a>
10
      <p>2번</p>
11
    </li>
12
    <li>
13
      <a href="#"><img src="http://qwerew.cafe24.com/images/3.jpg" alt="" /></a>
14
      <p>3번</p>
15
    </li>
16
  </ul>
17
</div>

1
#crossfade {
2
  position: relative;
3
  margin: auto;
4
  padding: 0;
5
  list-style-type: none;
6
  width: 600px;
7
  height: 400px;
8
  overflow: hidden;
9
}
10

11
#crossfade li {
12
  position: absolute;
13
  width: 600px;
14
  height: 400px;
15
}
16

17
#crossfade p {
18
  position: absolute;
19
  bottom: 0;
20
  padding: 20px;
21
  color: #fff;
22
  background: #000;
23
  background-color: rgba(0, 0, 0, 0.6);
24
  margin: 0;
25
  left: 0;
26
  right: 0;
27
}

1
const slide = $('#crossfade li');
2

3
// 정렬
4
slide.each((i, o) => {
5
  $(o).css('left', i * 100 + '%');
6
});
7

8
let idx = 0;
9

10
// 무한루프를 위한 setInterval
11
setInterval(() => {
12
  slide
13
    .eq(idx)
14
    .stop()
15
    .animate({ left: -100 + '%' }, 1000, function () {
16
      $(this).css('left', (slide.length - 1) * 100 + '%');
17
    });
18
  idx++;
19
  if (idx > slide.length - 1) {
20
    idx = 0;
21
  }
22
  slide
23
    .eq(idx)
24
    .stop()
25
    .animate({ left: 0 + '%' }, 1000);
26
}, 3000); // 3초마다 반복

1
    const slide = $('#crossfade li');
2
    let current = 0;
3
    // 정렬
4
    slide.each((i, o) => {
5
      $(o).css('left', i * 100 + '%');
6
    });
7

8
    setInterval(function () {
9
      var prev = slide.eq(current);
10
      move(prev, 0, '-100%');
11
      current++;
12
      if (current == slide.length) {
13
        current = 0;
14
      }
15
      var next = slide.eq(current);
16
      move(next, '100%', '0%');
17
    }, 3000);
18

19
    function move(tg, start, end) {
20
      tg.css('left', start).stop().animate({ left: end }, 1000);
21
    }