图片播放(相册效果) - CSS实现

date (10/10/19)

在线演示地址：
http://zjq123.com/demo/showPic1.html

开始整理有关图片显示的doc，发现有好多关于图片显示的，开始一个一个整理，下面这个图片播放效果主要用到了css的相关知识，主要用js控制css相关属性，(和百度Hi中团队页面中 团队图片的轮播很像，但是他那种应该不是用这种原理实现的) 用到的一些知识：

部分代码:
css code:
#imgBox{
overflow: scroll;//隐藏了div的 滚动条
}
#imginner {width: 300%;}
#d1 {float: left;}//利用float,实现div的自动漂浮

#showBig img {
border: 2px solid #F2F2F2;width:450px;//固定图片宽度
}

js code:
原理：
实际上是2个一样的div，实现,第2个div给人以从头开始显示的感觉

function Marquee(){
//当外层div滚动宽度超过d1的宽度时从头开始显示，即将d1显示完了，最核心的原理就在这里
if(d1.offsetWidth==imgBox.scrollLeft)
imgBox.scrollLeft=0;
else{
imgBox.scrollLeft++;
}
}
var imgInter=setInterval(Marquee,speed);
var showBig = document.getElementById('showBig');
var images = document.images;
for(var i in images){ //绑定 图片点击事件
 images[i].οnclick=function() { 
 showBig.innerHTML=this.outerHTML;
 }; 
} 
imgBox.οnmοusemοve=function(){clearInterval(imgInter);}
imgBox.οnmοuseοut=function(){imgInter=setInterval(Marquee,speed)};