カーソルを使って画像を円上に移動するためのスクリプトを作成したいですか？

Question

カーソルを使用して円上の画像を移動するスクリプト（jQuery）を作成したいですか？

コード：

HTML：

<div id="carousel"> 
     <div class="slide"></div> 
    </div> 

CSS：

#carousel{border: dashed 1px;border-radius: 50%;background:linear-gradient(transparent 49%, black 49%, black 51%, transparent 51%), rgba(0,0,255,.3) linear-gradient(90deg,transparent 49%, black 49%, black 51%, transparent 51%);width: 250px;height: 250px;margin:auto;position: relative;}.slide{width: 50px;height: 50px}     
#carousel .slide{background-size: 100% 100% !important} 
#carousel .slide:nth-child(1){position: absolute;top:100px; left:225px; background: url(https://4.bp.blogspot.com/-n7ysjpiiIuk/WTv5FyumGSI/AAAAAAAAADU/RynLbNdpYDUv8Bx4DJ_iczeXmqXfOrf_wCLcB/s1600/1.png) no-repeat;} 

https://jsfiddle.net/SaidDev/wp8j66gg/

おかげ

Answer 1

コードに問題

<div id="carousel"> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div> </div> 

JS：

angles = [0,90,180,270];direction='n'; 
var animate=function() 
{ 
    for (var i = 0; i <= 3; i++) 
    { 

     if(direction=='n'){angles[i]+=1;} 
     else if(direction=='p'){angles[i]-=1;} 
     an=-angles[i];   
     ang='rotate('+angles[i]+'deg) translate(125px) rotate('+an+'deg)'; 
     $(".slide").eq(i).css({"transform":ang}); 
    } 
} 
animate(); 


$(function() { 
var dragging = false, 
    target_wp, 
    o_x, o_y, h_x, h_y, last_angle,index; 
$('.slide').on("touchstart",function (e) { 
    index=$(this).index(); 
    h_x = e.touches[0].pageX; 
    h_y = e.touches[0].pageY; 
    e.preventDefault(); 
    e.stopPropagation(); 
    dragging = true; 
    target_wp = $(e.target).closest('#carousel'); 
    if (!target_wp.data("origin")) target_wp.data("origin", { 
     left: target_wp.offset().left, 
     top: target_wp.offset().top 
    }); 
    o_x = target_wp.data("origin").left; 
    o_y = target_wp.data("origin").top; 

    last_angle = target_wp.data("last_angle") || 0; 
}) 

$('.slide').on("touchmove",function (e) { 
    if (dragging) { 
     s_x = e.touches[0].pageX, 
      s_y = e.touches[0].pageY; 
     if (s_x !== o_x && s_y !== o_y) { 
      var s_rad = Math.atan2(s_y - o_y, s_x - o_x); 

      s_rad -= Math.atan2(h_y - o_y, h_x - o_x); 
      s_rad += last_angle; // relative to the last one 
      var degree = (s_rad * (360/(2 * Math.PI))); 
      $("h3").text("last_angle"+degree+" | angles["+index+"] : "+angles[index]); 

      for (var i = 0; i <= 3; i++) 
       { 
        var d=angles[i]+degree+10;   
        an=-d;   
        ang='rotate('+d+'deg) translate(125px) rotate('+an+'deg)'; 
        $(".slide").eq(i).css({"transform":ang}); 
       } 
     } 
    } 
}) 

$('.slide').on('touchend',function (e) { 
    dragging = false 



    var s_rad = Math.atan2(s_y - o_y, s_x - o_x); 
    s_rad -= Math.atan2(h_y - o_y, h_x - o_x); 
    s_rad += last_angle; 
    target_wp.data("last_angle", s_rad); 
})}) 

CSS：

.container{margin:auto;margin-top:6%}  #carousel{border: dashed 1px;border-radius: 50%;background:linear-gradient(transparent 49%, black 49%, black 51%, transparent 51%), rgba(0,0,255,.3) linear-gradient(90deg,transparent 49%, black 49%, black 51%, transparent 51%);width: 250px;height: 250px;margin:auto;position: relative;} 
    #carousel .slide:nth-child(1){position: absolute;top:100px; left:100px; background: url(https://4.bp.blogspot.com/-n7ysjpiiIuk/WTv5FyumGSI/AAAAAAAAADU/RynLbNdpYDUv8Bx4DJ_iczeXmqXfOrf_wCLcB/s1600/1.png) no-repeat;} 
#carousel .slide:nth-child(2){position: absolute;top:100px; left:100px;background: url(https://2.bp.blogspot.com/-yXT0EHQgQNc/WTv5GJJ9fQI/AAAAAAAAADY/WetEBLET9xwTIWFfBXzfeP4PlfFPDTPEwCLcB/s1600/2.png) no-repeat;} 
#carousel .slide:nth-child(3){position: absolute;top:100px; left:100px;background: url(https://2.bp.blogspot.com/-feSPwYuIwCA/WTv5Fo0tn9I/AAAAAAAAADQ/ce9avMyBLBoyPlK5AfRRoVOisi3QPDQLACLcB/s1600/3.png) no-repeat;} 
#carousel .slide:nth-child(4){position: absolute;top:100px; left:100px;background: url(https://3.bp.blogspot.com/-MlzvVekSEqc/WTv5Gl7f1_I/AAAAAAAAADc/Ugmt-pCOo0wq1su8cC3-8N7MyX48indggCLcB/s1600/4.png) no-repeat;} 
#carousel .slide{background-size: 100% 100% !important} 

オフセットHTML

タッチの動きと画像の回転の間であります

https://jsfiddle.net/SaidDev/nLf5v43x/1/