<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>test</title>
<style>
*{margin:0;padding:0;}
#div1{
margin: 20px;
overflow: hidden;
height: 300px;
border: 1px solid;
position: relative;
}
#div1 img{
width: 400px;
height: 300px;
position: absolute;
border: 3px solid #fff;
}
</style>
</head>
<body>
<div id="div1">
<img src="京东/1.jpg" alt="">
<img src="京东/2.jpg" alt="">
<img src="京东/3.jpg" alt="">
<img src="京东/4.jpg" alt="">
</div>
</body>
<script>
var oDiv=document.querySelector('#div1');
var OImg=document.getElementsByTagName('img');
var distance= 150;
var imgWidth=OImg[0].clientWidth;
var movedis=imgWidth-distance;
var timer=0;
oDiv.style.width=imgWidth+(OImg.length-1)*distance+'px';
//给每个图定位距离
function set() {
for (var i = 1; i < OImg.length; i++) {
OImg[i].style.left=imgWidth+(i-1)*distance+'px';
}
}
set();
//鼠标移入
for(var i=1;i<OImg.length;i++){
//若无return，当页面加载至js时，for循环第一次，oImg[0].onmouseover=function(){...},此时{}里的代码未执行，i仍是i;
//一直到最后，for循环中的i=4，跳出循环，页面加载完成，随后鼠标移入任意img，触发事件，每一个oImg[i]绑定的function(){...}里i都是4。
//因此用return跳出，并以匿名函数执行，以参数赋值给i
OImg[i].onmouseover=(function(i){
return function(){
for(var j=1;j<OImg.length;j++){
if(j<=i){
moveTo(OImg[j],imgWidth+(j-1)*distance-movedis);
}else{
moveTo(OImg[j],imgWidth+(j-1)*distance);
}
}
}
})(i)
}
OImg[0].onmouseover=function(){
for(var i=1;i<OImg.length;i++){
moveTo(OImg[i],imgWidth+(i-1)*distance);
}
}
//移动算法
function moveTo(obj,aim){
if(obj.timer){clearInterval(obj.timer);}
var curr=parseFloat(getStyle(obj,'left'));
var dis=Math.abs(aim-curr);
var symbol=(aim-curr)/dis;
var cover=0;
var stepLength=dis/25;
var step=function(){
if(cover+stepLength<dis){
obj.style.left=parseFloat(getStyle(obj,'left'))+stepLength*symbol+'px';
cover+=stepLength;
}else{
obj.style.left=aim+'px';
clearInterval(obj.timer);
}
}
obj.timer=setInterval(step,20);
}
function getStyle(elem,cssname){
if(window.getComputedStyle){
return window.getComputedStyle(elem)[cssname];
}else{
return elem.currentStyle[cssname];
}
}
</script>
<html>
