欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 >

js实现图片轮播效果

发布时间：2025/4/9 51 豆豆
生活随笔 收集整理的这篇文章主要介绍了 js实现图片轮播效果 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

感觉这一周学的东西中，本菜鸡觉得轮播效果是最炫酷的哈哈哈。

要好好的纪念下这个东西，以后忘了再来这边看看！超赞，

当自己做出这个效果的时候，很有成就感的(ノω<。)ノ))☆.。

<!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);
}
}
//开始调用
setTimeout(imgMove,200);
</script>
</body>
</html>

转载于:https://www.cnblogs.com/zhubaixue/p/6539262.html

总结

以上是生活随笔为你收集整理的js实现图片轮播效果的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。