js實現(xiàn)拖動圖片360旋轉(zhuǎn)效果，其實就是檢測鼠標位置，然后不停的切換圖片湿痢，可以用基于jQuery的插件3dEye.js.
參考了一下3dEye.js的源碼霍骄，不考慮兼容性的話台囱，可參照以下代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.car {
/* background-color: red; */
width: 1000px;
height: 447px;
background-image: url('images/1.png');
}
img {
display: none;
}
</style>
</head>
<body>
<div class='car' id='car'></div>
<ul>
<li>
<img src="images/1.png" alt="">
<img src="images/2.png" alt="">
<img src="images/3.png" alt="">
<img src="images/4.png" alt="">
<img src="images/5.png" alt="">
<img src="images/6.png" alt="">
<img src="images/7.png" alt="">
<img src="images/8.png" alt="">
<img src="images/9.png" alt="">
<img src="images/10.png" alt="">
<img src="images/11.png" alt="">
<img src="images/12.png" alt="">
<img src="images/13.png" alt="">
<img src="images/14.png" alt="">
<img src="images/15.png" alt="">
<img src="images/16.png" alt="">
<img src="images/17.png" alt="">
<img src="images/18.png" alt="">
<img src="images/19.png" alt="">
<img src="images/20.png" alt="">
<img src="images/21.png" alt="">
<img src="images/22.png" alt="">
<img src="images/23.png" alt="">
<img src="images/24.png" alt="">
<img src="images/25.png" alt="">
<img src="images/26.png" alt="">
<img src="images/27.png" alt="">
<img src="images/28.png" alt="">
<img src="images/29.png" alt="">
<img src="images/30.png" alt="">
<img src="images/31.png" alt="">
<img src="images/32.png" alt="">
<img src="images/33.png" alt="">
<img src="images/34.png" alt="">
<img src="images/35.png" alt="">
<img src="images/36.png" alt="">
<img src="images/37.png" alt="">
<img src="images/38.png" alt="">
<img src="images/39.png" alt="">
<img src="images/40.png" alt="">
<img src="images/41.png" alt="">
<img src="images/42.png" alt="">
<img src="images/43.png" alt="">
<img src="images/44.png" alt="">
<img src="images/45.png" alt="">
<img src="images/46.png" alt="">
<img src="images/47.png" alt="">
<img src="images/48.png" alt="">
<img src="images/49.png" alt="">
<img src="images/50.png" alt="">
<img src="images/51.png" alt="">
</li>
</ul>
<script>
var picNum = 1,
totalPicNum = 51; //圖片的總個數(shù)
var flag = false;
var prePosition = 0, //上一點的位置
nowPosition = 0; //當前點的位置
var offsetLeft = document.getElementById('car').offsetLeft;
window.onmousedown = function(){
flag = true;
}
window.onmouseup = function(){
flag = false;
// window.onmousemove = null;
}
window.onmousemove = function(e){
if(flag == true){
changePic(e.pageX-offsetLeft);
}else{
prePosition = e.pageX-offsetLeft
}
}
function changePic(nowPosition){
console.log(picNum,prePosition,nowPosition,prePosition - nowPosition)
if(prePosition - nowPosition > 25){
//25為一個自定義的值，當鼠標移動距離大于25px時读整，切換圖片
//切換圖片之后簿训，把當前位置賦值給上次的位置
prePosition = nowPosition;
//圖片個數(shù)小于1的時候，變成最后一張圖
picNum = --picNum < 1 ? totalPicNum:picNum;
document.getElementById('car').style.backgroundImage=`url(images/${picNum}.png)`
}else if(prePosition - nowPosition < -25){
prePosition = nowPosition;
//圖片個數(shù)大于最后一張圖的時候，變成第一張圖
picNum = ++picNum > totalPicNum?1:picNum;
document.getElementById('car').style.backgroundImage=`url(images/${picNum}.png)`
}
}
</script>
</body>
</html>
