あらかじめ合体させた画像を背景に指定し、そのポジションをずらす方法を取られては?
参考サイトのDEMOにそのような記述がありました。
javascript
1 $ ( "#animateField" ) . children ( "p" ) . css ( "background-position" , - 120 * i + "px" ) ;
あとは、最初だけ要素を追加していき、あとは表示/非表示を切り替えるとか。
(※コードの一部は他の回答を参考にしてます)
javascript
1 < ! doctype html >
2 < html >
3
4 < head >
5 < meta charset = "UTF-8" >
6 < style >
7 . none { display : none ; }
8 < / style >
9 < / head >
10
11 < body >
12 < div id = "imageContainer" >
13 < ! -- img要素のテンプレート -- >
14 < img id = "" src = "https://placehold.jp/ff0000/00ffff/100x100.png?text=0" alt = "error" >
15 < / div >
16 < script type = "text/javascript" language = "javascript" >
17 ( function ( ) {
18 // 非表示クラスの名前
19 const noneDisplayClass = 'none' ;
20
21 // img要素のテンプレートを削除します
22 let imageTemaplate = document . querySelector ( '#imageContainer > img' ) ;
23 imageTemaplate . remove ( ) ;
24
25 // 繰り返し処理を開始します
26 let states = {
27 url : imageTemaplate . src . replace ( / =\d / , '=' ) ,
28 imageContainer : document . getElementById ( 'imageContainer' ) ,
29 imageTemaplate ,
30 imageNum : 5 ,
31 prevIndex : 0 ,
32 crntIndex : 0 ,
33 } ;
34 nextImage ( states ) ;
35 setInterval ( ( ) => nextImage ( states ) , 1000 * 1 , true ) ;
36
37 // 次のイメージに切り替えます
38 function nextImage ( states ) {
39 let { url , imageContainer , imageTemaplate , imageNum , prevIndex , crntIndex } = states ;
40 let images = imageContainer . children ;
41 let isConainerFulled = ( images . length == imageNum ) ;
42
43 // 次の画像を非表示で配置します
44 if ( ! isConainerFulled ) {
45 let newImage = imageTemaplate . cloneNode ( true ) ;
46 newImage . src = newImage . alt = ( url + crntIndex ) ;
47 newImage . classList . add ( noneDisplayClass ) ;
48 imageContainer . appendChild ( newImage ) ;
49 }
50
51 // 画像を切り替えます
52 images [ prevIndex ] . classList . add ( noneDisplayClass ) ;
53 images [ crntIndex ] . classList . remove ( noneDisplayClass ) ;
54
55 // 画像のインデックスを更新します
56 states . prevIndex = crntIndex ;
57 states . crntIndex = ( ( crntIndex + 1 ) == states . imageNum ) ? 0 : ( crntIndex + 1 ) ;
58 }
59 } ( ) ) ;
60 < / script >
61 < / body >
62
63 < / html >