Erstellen eines 360-Grad-Produktvorschau-Schiebereglers in Winkel js

Question

Ich möchte eine 360-Grad-Produktvorschau mit vielen Bildern erstellen, indem ich die Drehung mit Berührungsereignissen kontrolliere. Ich habe dies von jquery Plugin erstellt, aber ich brauche das von angular js. Bitte legen nahe, jede Annäherung dieses Code-Schnipsel Winkel js.My JQuery-Code erstellen

var ab=[ 
 
" https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0001.png", 
 
" https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0001.png", 
 
" https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0002.png", 
 
" https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0003.png", 
 
" https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0004.png", 
 
" https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0005.png", 
 
" https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0006.png", 
 
" https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0007.png", 
 
" https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0008.png", 
 
" https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0009.png", 
 
" https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0010.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0010.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0011.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0012.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0013.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0014.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0015.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0016.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0017.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0018.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0019.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0020.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0021.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0022.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0023.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0024.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0025.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0026.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0027.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0028.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0029.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0030.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0031.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0032.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0033.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0034.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0035.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0036.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0037.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0038.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0039.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0040.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0041.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0042.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0043.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0044.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0045.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0046.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0047.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0048.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0049.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0050.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0051.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0052.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0053.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0054.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0055.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0056.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0057.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0058.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0059.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0060.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0061.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0062.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0063.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0064.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0065.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0066.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0067.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0068.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0069.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0070.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0071.png","https://s.tmocache.com/content/dam/tmo/en-p/cell-phones/lg-g5/silver/spin/lg-g5-silver.spin.0072.png"]; 
 
$("#mySpriteSpin").spritespin({ 
 
    // path to the source images. 
 
    source: ab, 
 
    width : 500, // width in pixels of the window/frame 
 
    height : 500, // height in pixels of the window/frame 
 
    sense: -1, 
 
    frame: 1, 
 
    animate: false 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<script src="http://spritespin.ginie.eu/spritespin.js"></script> 
 
<div id='mySpriteSpin'/>

Answer 1

Sie dieses github link