物件写真360度ビュー風ドラッグプレビュー

<div class="d10-13-11-panel">
          <div class="d10-13-11-view" id="d1787View"></div>
          <p class="d10-13-11-angle" id="d1787Angle">0°</p>
          <div class="d10-13-11-ring">
            <span class="d10-13-11-dot" id="d1787Dot"></span>
          </div>
          <p class="d10-13-11-hint">左右にドラッグして360°プレビュー</p>
        </div>

.d10-13-11{padding:16px}
        .d10-13-11-panel{width:100%;max-width:260px;text-align:center}
        .d10-13-11-view{width:100%;height:110px;border-radius:12px;background:linear-gradient(100deg,#c9d6e3,#8fa6bd);cursor:ew-resize;touch-action:pan-y}
        .d10-13-11-angle{margin:8px 0 4px;font-size:13px;font-weight:800;color:#1f2a37}
        .d10-13-11-ring{position:relative;width:52px;height:52px;margin:0 auto 6px;border-radius:50%;border:2px solid #e3e8ec}
        .d10-13-11-dot{position:absolute;top:-4px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#2f7fef;transform-origin:4px 30px}
        .d10-13-11-hint{margin:0;font-size:10.5px;color:#8a94a3}

(function(){
        var root=document.currentScript.closest('.item').querySelector('.d10-13-11');
        var view=root.querySelector('#d1787View');
        var angleTxt=root.querySelector('#d1787Angle');
        var dot=root.querySelector('#d1787Dot');
        var stops=[
          'linear-gradient(100deg,#c9d6e3,#8fa6bd)',
          'linear-gradient(100deg,#b7c6d9,#6f89a8)',
          'linear-gradient(100deg,#a9c9ff,#5a6b7a)',
          'linear-gradient(100deg,#8fa6bd,#c9d6e3)',
          'linear-gradient(100deg,#6f89a8,#b7c6d9)'
        ];
        var angle=0,startX=0,dragging=false;
        function render(){
          angleTxt.textContent=Math.round(angle)+'°';
          dot.style.transform='rotate('+angle+'deg)';
          var idx=Math.floor(((angle%360)+360)%360/72);
          view.style.background=stops[idx];
        }
        view.addEventListener('pointerdown',function(e){
          dragging=true;startX=e.clientX;
          try{view.setPointerCapture(e.pointerId);}catch(err){}
        });
        view.addEventListener('pointermove',function(e){
          if(!dragging)return;
          var dx=e.clientX-startX;
          startX=e.clientX;
          angle=(angle+dx*1.4+360)%360;
          render();
        });
        function stop(){dragging=false;}
        view.addEventListener('pointerup',stop);
        view.addEventListener('pointercancel',stop);
        render();
      })();