圖片播放(相簿效果) – 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].onclick=function()
{ 
 showBig.innerHTML=this.outerHTML;
 }; 
} 
imgBox.onmousemove=function(){clearInterval(imgInter);}
imgBox.onmouseout=function(){imgInter=setInterval(Marquee,speed)};