轮播图动画效果实现-CSDN博客

本文链接：https://blog.csdn.net/ElephantBoy/article/details/52080455

本文介绍了一种使用HTML和JavaScript实现轮播图的方法。通过调整样式和脚本，可以轻松地为网站添加图片轮播功能。文章详细解释了轮播图的工作原理，并提供了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!Doctype html>
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta name="descirption" content="">
<meta name="keywrods" content="">
<style>
*{margin:0px;padding:0px;}
.banner{overflow:hidden;width:500px;height:300px;margin:100px auto;position:relative;}
.banner .b_image{width:1000%;height:100%;position:absolute;left:0px;border:1px solid red;}
.banner .b_image li{list-style:none;float:left;}
.banner .b_desc{position:absolute;bottom:10px;width:160px;left:50%;margin-left:-80px;}
.banner .b_desc li{list-style:none;float:left;margin-left:8px;width:30px;text-align:center;background:white;color:black;border-radius:10px;cursor:pointer;}
.banner .b_desc .on{background:gray;color:white;}
</style>
</head>
<body>
<div class="banner" id="banner">
<ul class="b_image" id="b_image">
<li>
<img src="images/1.png" alt="" width="500px" height="300px">
</li>
<li>
<img src="images/2.png" alt="" width="500px" height="300px">
</li>
<li>
<img src="images/3.png" alt="" width="500px" height="300px">
</li>
<li>
<img src="images/4.png" alt="" width="500px" height="300px">
</li>
</ul>
<ul class="b_desc" id="b_desc">
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script type="text/javascript" src="js/animate.js"></script>
<script type="text/javascript">
var banner=document.getElementById("banner");
var b_image=document.getElementById("b_image");
var b_images=document.getElementById("b_image").children;
var b_descs=document.getElementById("b_desc").children;
var width=b_images[0].offsetWidth;
var timer=null;
var index=0;
var cindex=0;
var len=b_images.length;
var test=0;
function play(){
clearInterval(timer);
timer=setInterval(function(){
if(index==0)
{
cindex=0;
b_images[0].style.position="static";
b_image.style.left=0;
}
if(index>=len-1)
{
index=0;
b_images[0].style.position="relative";
b_images[0].style.left=(width*len)+"px";

}else
{
index++;
}
cindex++;
animate(b_image,{left:-width*cindex},100);
b_descs[index].className="on";
siblings(b_descs[index],function(){
this.className="";
});
},2000);
}
play();
for(var i=0;i<b_descs.length;i++)
{
b_descs[i].index=i;
b_descs[i].οnclick=function(){
index=this.index;
cindex=this.index;
this.className="on";
siblings(this,function(){
this.className="";
});
animate(b_image,{left:-width*this.index},100);
}
}

function siblings(obj,fn){
var all=obj.parentNode.children;
for(var i=0;i<all.length;i++)
{
if(obj!=all[i])
{
fn.call(all[i]);
}
}
}

</script>
</body>
</html>

js之无缝轮播