Javascript 我想创建一个脚本，使用光标在圆上移动图像？

我想创建一个脚本jQuery来使用光标在圆上移动图像

代码：

html:

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

---

谢谢

代码中的问题是触摸移动和图像旋转之间的偏移

html:

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

---

你有任何jquery或javascript代码给我们看吗？没有，因为我创建的所有代码都没有work@SaiDev然后显示非工作代码。我们在这里帮助修复损坏的代码，而不仅仅是应要求编写代码。谢谢我修改了这篇文章的海报完整代码

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

</div>

    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);
})})

 .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}