360度产品展示

非常简单，引用jQuery库jquery.angle.js即可，缺点是拖拽时由于图片未预加载，会出现瞬间闪白问题，且在手机端只能朝着一个方向旋转，可能需慎用。图片素材取自apple，代码如下：

HTML

<div class="angle-view" id="angle-view">
    <ul>
        <li><img src="https://www.apple.com/105/media/us/airpods-pro/2019/1299e2f5_9206_4470_b28e_08307a42f19b/anim/sequence/medium/02-head-bob-turn/0100.jpg" /></li>
        <li><img src="https://www.apple.com/105/media/us/airpods-pro/2019/1299e2f5_9206_4470_b28e_08307a42f19b/anim/sequence/medium/02-head-bob-turn/0101.jpg" /></li>
        <li><img src="https://www.apple.com/105/media/us/airpods-pro/2019/1299e2f5_9206_4470_b28e_08307a42f19b/anim/sequence/medium/02-head-bob-turn/0102.jpg" /></li>
        <li><img src="https://www.apple.com/105/media/us/airpods-pro/2019/1299e2f5_9206_4470_b28e_08307a42f19b/anim/sequence/medium/02-head-bob-turn/0103.jpg" /></li>
        ...
        <li><img src="https://www.apple.com/105/media/us/airpods-pro/2019/1299e2f5_9206_4470_b28e_08307a42f19b/anim/sequence/medium/02-head-bob-turn/0131.jpg" /></li>
    </ul>
</div>

JavaScript

$(document).ready(function () {
    $('#angle-view').angle({
        speed: 20,
        drag:true
    });
});