<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生Js产品图片360度展示</title>
<style type="text/css">
*{margin: 0;padding: 0}
h1{background-color: #666;color: #fff;text-align: center;margin:10px;}
#content{margin:10px;border: 5px solid #666;text-align: center;}
</style>
</head>
<body>
<h1>鼠标左键点击图片-并左右移动</h1>
<div id="content">
<img id="car" src="https://images0.cnblogs.com/blog/150659/201307/30094341-d352147c67e844c18c302810804efea0.gif" />
</div>
<script type="text/javascript">
var _CalF = {
$ : function(object){//选择器
if(object === undefined ) return;
var getArr = function(name,tagName,attr){
var tagName = tagName || '*',
eles = document.getElementsByTagName(tagName),
clas = (typeof document.body.style.maxHeight === "undefined") ? "className" : "class";//ie6
attr = attr || clas,
Arr = [];
for(var i=0;i<eles.length;i++){
if(eles[i].getAttribute(attr)==name){
Arr.push(eles[i]);
}
}
return Arr;
};
if(object.indexOf('#') === 0){ //#id
return document.getElementById(object.substring(1));
}else if(object.indexOf('.') === 0){ //.class
return getArr(object.substring(1));
}else if(object.match(/=/g)){ //attr=name
return getArr(object.substring(object.search(/=/g)+1),null,object.substring(0,object.search(/=/g)));
}else if(object.match(/./g)){ //tagName.className
return getArr(object.split('.')[1],object.split('.')[0]);
}
},
addHandler:function(node, type, handler){
node.addEventListener ? node.addEventListener(type, handler, false) : node.attachEvent('on'+ type, handler);
}
};
function show360(){
this.init.apply(this, arguments);
}
show360.prototype = {
init:function(id,src){
var divId = "#"+id,
div = _CalF.$(divId);
this.div = div;
this.src = src;
this.xDown; //鼠标按下x的值
this.isDown = false;
this.i = 1;
this.moved;
this.time;
this.loadImg();
this.addEvent();
},
setImgSrc : function(i){
var img = this.div.getElementsByTagName("img")[0];
img.setAttribute('src',this.src+i+'.png');
},
loadImg : function(){ //加载图片
var that = this,
num = 1,
imgs =[];
for(var i=1; i<37; i++){
imgs[i] = new Image;
imgs[i].src = that.src + i + '.png';
imgs[i].onload = function(){
num++;
if(num==37) that.setImgSrc(1);
}
}
},
addEvent : function(){
var that = this,
div = that.div;
_CalF.addHandler(div,"mousedown",function(event){
var event = window.event || event;
if(event.button == 0 ||event.button==1){ //鼠标左键chrome=0 ie=1
(!window.ActiveXObject) ? event.preventDefault() : event.returnValue = false; //取消默认行为
that.xDown = event.clientX;
that.isDown = true;
}else if(event.button == 2){
alert("请用鼠标左键!");
}
});
_CalF.addHandler(div,"mousemove",function(event){
var event = window.event || event,
x = event.clientX;
(!window.ActiveXObject) ? event.preventDefault() : event.returnValue = false; //取消默认行为
if(that.isDown && (typeof that.time !== undefined)){
that.time = setTimeout(function(){
that.moved = x - that.xDown;
if(that.moved>15){
that.i++;
if(that.i>36) that.i=1;
}else if(that.moved<-15){
that.i--;
if(that.i<1) that.i=36;
}else{
return;
}
that.setImgSrc(that.i)
that.xDown = x;
},50);
}
});
_CalF.addHandler(div,"mouseup",function(){
that.isDown = false;
});
}
}
var car = new show360("content","http://sandbox.runjs.cn/uploads/rs/369/vuy2vmwn/car_");
</script>
</body>
</html>
来源：https://www.cnblogs.com/dtdxrk/p/3204916.html
修改适配移动端
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生Js产品图片360度展示</title>
<style type="text/css">
*{margin: 0;padding: 0}
html,body{width: 100%;height: 100%;}
#content{border: 1px solid #666;text-align: center;width: 96%;height: 100%;position: relative;}
#content img{width: 100%;height: 100%;display: block;}
#content ::after{position: absolute;left: 0;top: 0; width: 100%;height: 100%;content: '';}
</style>
</head>
<body>
<div id="content">
<img id="car" src="images/view-1.png" />
</div>
<script type="text/javascript">
var _CalF = {
$ : function(object){//选择器
if(object === undefined ) return;
var getArr = function(name,tagName,attr){
var tagName = tagName || '*',
eles = document.getElementsByTagName(tagName),
clas = (typeof document.body.style.maxHeight === "undefined") ? "className" : "class";//ie6
attr = attr || clas,
Arr = [];
for(var i=0;i<eles.length;i++){
if(eles[i].getAttribute(attr)==name){
Arr.push(eles[i]);
}
}
return Arr;
};
if(object.indexOf('#') === 0){ //#id
return document.getElementById(object.substring(1));
}else if(object.indexOf('.') === 0){ //.class
return getArr(object.substring(1));
}else if(object.match(/=/g)){ //attr=name
return getArr(object.substring(object.search(/=/g)+1),null,object.substring(0,object.search(/=/g)));
}else if(object.match(/./g)){ //tagName.className
return getArr(object.split('.')[1],object.split('.')[0]);
}
},
addHandler:function(node, type, handler){
node.addEventListener ? node.addEventListener(type, handler, false) : node.attachEvent('on'+ type, handler);
}
};
function show360(){
this.init.apply(this, arguments);
}
show360.prototype = {
init:function(id,src,numEnd){
var divId = "#"+id,
div = _CalF.$(divId);
this.div = div;
this.src = src;
this.xDown; //鼠标按下x的值
this.isDown = false;
this.i = 1;
this.moved;
this.time;
this.loadImg(numEnd);
this.addEvent(numEnd);
},
setImgSrc : function(i){
var img = this.div.getElementsByTagName("img")[0];
img.setAttribute('src',this.src+i+'.png');
},
loadImg : function(numEnd){ //加载图片
var that = this,
num = 1,
imgs =[];
for(var i=1; i<numEnd; i++){
imgs[i] = new Image;
imgs[i].src = that.src + i + '.png';
imgs[i].onload = function(){
num++;
if(num==numEnd) that.setImgSrc(1);
}
}
},
addEvent : function(numEnd){
var that = this,
div = that.div;
_CalF.addHandler(div,"mousedown",viewStart);
_CalF.addHandler(div,"touchstart",viewStart);
function viewStart(event) {
var event = event.targetTouches ? event.targetTouches[0] : event;
that.xDown = event.clientX;
that.isDown = true;
}
_CalF.addHandler(div,"mousemove",viewMove);
_CalF.addHandler(div,"touchmove",viewMove);
function viewMove(event){
var event = event.targetTouches ? event.targetTouches[0] : event;
var x = event.clientX;
if(that.isDown && (typeof that.time !== undefined)){
that.time = setTimeout(function(){
that.moved = x - that.xDown;
if(that.moved>15){
that.i++;
if(that.i>numEnd) that.i=1;
}else if(that.moved<-15){
that.i--;
if(that.i<1) that.i=numEnd;
}else{
return;
}
that.setImgSrc(that.i)
that.xDown = x;
},50);
}
}
_CalF.addHandler(div,"mouseup",viewEnd);
_CalF.addHandler(div,"mouseleave",viewEnd);
_CalF.addHandler(div,"touchend",viewEnd);
function viewEnd(event){
that.isDown = false;
}
}
}
var car = new show360("content","images/view-", 361);
</script>
</body>
</html>
Comments | NOTHING