⽤html写轮播图先放代码和效果图再讲解
<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>轮播图</title>
<style>
#pp2{
width:9999px;
height:9999px;
animation:switch 15s infinite;
}
#pp2>img{
float:left;
}
#pp1{
width:820px;
height:340px;
overflow:hidden;
}
@keyframes switch{
0%{};
20%{transform:translateX(0px);}
40%{transform:translateX(-820px);}
60%{transform:translateX(-1640px);}
80%{transform:translateX(-2460px);}
100%{transform:translateX(-3280px);}
}
</style>
</head>
<body>
<div id="pp1">
<div id="pp2">
<img src="images/1.jpg"/>
<img src="images/2.jpg"/>
<img src="images/3.jpg"/>
<img src="images/4.jpg"/>
<img src="images/5.jpg"/>
</div>
</div>
</body>
</html>html如何设置图片滚动
为了缩⼩图⽚内存，效果图有抽帧，就⽐较卡，实际效果不卡
#pp2{
width:9999px;
height:9999px;
animation:switch 15s infinite;
}
这个宽⾼那么⼤，其实就是尽量设⼤⼀点，设成其他数值也可以，animation:switch 15s infinite表⽰这个gif时间⼀共是15秒
#pp2>img{
float:left;
}
这是表⽰图⽚在左边
#pp1{
width:820px;
height:340px;
overflow:hidden;
}
这宽⾼就是跟着图⽚的⼤⼩来写，overflow:hidden表⽰只显⽰⼀张图⽚在上⾯
@keyframes switch{
0%{};
20%{transform:translateX(0px);}
40%{transform:translateX(-820px);}
60%{transform:translateX(-1640px);}
80%{transform:translateX(-2460px);}
100%{transform:translateX(-3280px);}
}
没有设置时间的时候，五张图⽚其实是平铺在⽹页上的
这个对图⽚进⾏如何显⽰进⾏设置，我们⼀共有5张图⽚，假设时间⼀共是100%，分成五份，所以0%，20%等就是这么来的。
因为第⼀张就在最上⾯，所以我们0%不⽤设置任何东西，20%在0px就可以了。20%-40%时是第⼆张图⽚，所以我们的第⼀张图⽚就要往左移820px，以此类推。translateX是图⽚横向轮播，translateY是竖向轮播。
<div id="pp1">
<div id="pp2">
<img src="images/1.jpg"/>        <img src="images/2.jpg"/>        <img src="images/3.jpg"/>        <img src="images/4.jpg"/>        <img src="images/5.jpg"/>  </div>
</div>
就是那5张图⽚放进div⾥

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。