原理：滑动门，这里以图片进行实例，首先设定主盒子div的宽度和高度设定，并进行图片初始化位置的设定，然后将图片绑定事件，并设定要达到的效果
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./css/huadong.css">
<script src="./js/huadong.js"></script> </head>
<body>
<div class="container" Id="container" >
<img src="./img/1.jpg" alt="">
<img src="./img/2.jpg" alt="">
<img src="./img/3.jpg" alt="">
<img src="./img/4.jpg" alt="">
</div>
</body>
</html>
css代码：
*{
margin:;
padding:;
}
div{
position:relative;
border:1px solid #ccc;
margin:100px auto;
overflow: hidden;
width:600px;
height:300px;
}
img{
position:absolute;
left:;
border-left: 1px solid #CCC;
}
js代码（两种）：
1. 过程式实现方式：
window.onload = function(){
var obox = document.querySelector('div.container');
var aImgs = document.querySelectorAll('img');
var imgWidth = aImgs[0].offsetWidth;
var exposeWidth = 100;
var oboxWidth = imgWidth + exposeWidth*(aImgs.length-1);
var oboxHeight = aImgs[0].offsetHeight;
obox.style.width = oboxWidth + 'px';
obox.style.height = oboxHeight + 'px';
function set_position(){
for(var i=1;i<aImgs.length;i++){
aImgs[i].style.left = imgWidth + exposeWidth*(i-1) + 'px';
}
};
set_position();
var translate = imgWidth - exposeWidth;
// 添加自定义索引进行传递当前img 的索引
for(var i=0;i<aImgs.length;i++){
aImgs[i].index = i;
aImgs[i].onmouseover = function(){
set_position();
for(var j = 1;j<=this.index;j++){
aImgs[j].style.left = parseInt( aImgs[j].style.left,10) - translate + 'px';
}
}
}
// // 采用立即表达式的方式传递img的索引
// for(var i=0;i<aImgs.length;i++){
// (function(i){
// aImgs[i].onmouseover = function(){
// set_position();
// for(var j = 1;j<=i;j++){
// aImgs[j].style.left = parseInt( aImgs[j].style.left,10) - translate + 'px';
// }
// }
// }(i));
// }
// // 采用ES6 let 定义变量的方式传递当前索引
// for(let i=0;i<aImgs.length;i++){
// aImgs[i].onmouseover = function(){
// set_position();
// for(var j = 1;j<=i;j++){
// aImgs[j].style.left = parseInt( aImgs[j].style.left,10) - translate + 'px';
// }
// }
// }
}
2. 采用构造函数式实现方式：
window.onload = function(){
// 创建构造函数
function huadong(){
this.odiv = document.querySelector('div.container');
this.aImgs = document.querySelectorAll('img');
this.imgWidth = this.aImgs[0].offsetWidth;
this.exposeWidth = 100 ;
};
// 设置图片的 left值
huadong.prototype.set_position = function(){
for(var i = 1;i<this.aImgs.length;i++){
this.aImgs[i].style.left = this.imgWidth + this.exposeWidth*(i-1) + 'px';
}
};
// 初始化，即设定div的宽度，并调用函数设定图片的left
huadong.prototype.init = function(){
var DivWidth = this.imgWidth + this.exposeWidth*(this.aImgs.length-1);
var DivHeight = this.aImgs[0].offsetHeight;
this.odiv.style.width = DivWidth + 'px';
this.odiv.style.height = DivHeight + 'px';
this.set_position();
};
// 鼠标在图片上时的效果
huadong.prototype.xiaoguo = function(btn){
var translate = this.imgWidth - this.exposeWidth;
this.set_position();
for(var j = 1;j<=btn.index;j++){
this.aImgs[j].style.left = parseInt( this.aImgs[j].style.left,10) - translate + 'px';
}
};
// 绑定鼠标事件
huadong.prototype.bind = function(){
this.init();
var that = this;
for(var i=0;i<this.aImgs.length;i++){
this.aImgs[i].index = i;
this.aImgs[i].onmouseover = function(){
that.xiaoguo(this);
}
}
};
var Newdonghua = new huadong();
Newdonghua.bind();
}
运行结果，两种方法都有效，结果一样：