这是我在博客园看到的一篇关于JS的图片展示效果确实不错。js控制汽车360度图片展示，等等大家能想到的都可以去发挥。
在这里把代码贴给大家看，希望你能做出更好的效果来。难度不大。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>汽车360度图片展示</title>
<script id="jquery_183" type="text/javascript" class="library" src="http://sandbox.runjs.cn/js/sandbox/jquery/jquery-1.8.3.min.js"></script>
</head>
<body>
<div class="content">
<img id="car" src="http://sandbox.runjs.cn/uploads/rs/369/vuy2vmwn/car_1.png" />
</div>
<div class="tip">
请按下鼠标左右移动
</div>
</body>
</html>
<style>html{
background:#fff;
}
*{
margin: 0px;
padding: 0px;
}
.content{
position: fixed;
width: 765px;
height: 313px;
top: 50%;
left: 50%;
margin-left: -382px;
margin-top: -156px;
}
.tip{
position:fixed;
width:200px;
text-align:center;
left:50%;
margin-left:-100px;
margin-top:20px;
text-shadow:1px 1px 3px #333;
}</style>
<script>$(document).ready(function () {
var xDown, //鼠标按下x的值
i = 1,
isDown = false;
$(window).on('mousedown',function(e){
e.preventDefault();
xDown = e.clientX;
isDown = true;
}).on('mousemove',function(e){
e.preventDefault();
if(isDown){
//以鼠标移动十五个像素进行换图
var moved = e.clientX - xDown;
if (moved > 15) {
i ++;
if(i>36){
i=1;
}
} else if (moved < -15) {
i --;
if(i<1){
i = 36;
}
}else{
return;
}
setImgSrc(i);
xDown = e.clientX;
}
}).on('mouseup',function(){
isDown = false;
});
function setImgSrc(i) {
$("#car").attr('src', 'http://sandbox.runjs.cn/uploads/rs/369/vuy2vmwn/car_' + i + '.png');
}
});</script>
（完）
大家有什么问题或技术上的想法可以在此与大家分享，也可以加入前端爱好者QQ群(141999928)一起学习进步：
【幸凡前端技术交流群】
如果您觉得本文的内容对您的学习有所帮助，捐赠与共勉，支付宝(左)或微信(右)