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

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/