js实现图片轮播效果
生活随笔
收集整理的這篇文章主要介紹了
js实现图片轮播效果
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
感覺這一周學(xué)的東西中，本菜雞覺得輪播效果是最炫酷的哈哈哈。
要好好的紀(jì)念下這個東西，以后忘了再來這邊看看！超贊，
當(dāng)自己做出這個效果的時候，很有成就感的(ノω<。)ノ))☆.。
<!DOCTYPE html><html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width: 192px;
height: 120px;
border: 1px solid gray;
margin: 0 auto;
overflow: hidden;
position: relative;
}
#div1 img{
position: absolute;
}
</style>
</head>
<body>
<div id="div1">
<img src="images/1.jpg" alt="" width="192"/>
<img src="images/3.jpg" alt="" width="192"/>
<img src="images/4.jpg" alt="" width="192"/>
</div>
<div id="div2">
</div>
<script>
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
var imgs=div1.getElementsByTagName("img");
window.οnlοad=function(){
for(var i=0;i<imgs.length;i++){
imgs[i].style.left=i*192+"px";
}
};
function imgMove(){
div2.innerHTML="";
var b1=false;
for(var i=0;i<imgs.length;i++){
imgs[i].style.left=imgs[i].offsetLeft-1+"px";
if(imgs[i].offsetLeft==0){
b1=true;
if(i==0){
imgs[imgs.length-1].style.left="384px";
}
else{
imgs[i-1].style.left="384px";
}
}
}
if(!b1){
setTimeout(imgMove,1);
}
else{
setTimeout(imgMove,3000);
}
}
//開始調(diào)用
setTimeout(imgMove,200);
</script>
</body>
</html>
轉(zhuǎn)載于:https://www.cnblogs.com/zhubaixue/p/6539262.html
總結(jié)
以上是生活随笔為你收集整理的js实现图片轮播效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 英文构词法 —— ant、ent 后缀
- 下一篇： Linux下搭建mpi集群（ubuntu