怎样实现banner自动播放html,HTML+CSS实现简单banner轮播（推荐PC端）

PC端banner如果没有跳转页面的要求，可以使用这个方法来实现简单展示banner的需求，减少页面的体积，浏览页面更加快速。

1.先写两个div,把需要轮播的图片放进去

　　　　

　　　　

　　　　

2.外层div规定一块区域,让图片在这片区域显示；内层div把需要显示的图片并排合成一张大图片；主要属性overflow，hidden值使超出范围的内容不显示.a{

position: absolute;

width: 480px;

height: 270px;

background-color: pink;

overflow: hidden;

}

.b{

position: absolute;

width: 1440px;

height: 100%;

}

.b img{

width: 480px;

height: 100%;

float: left;

}

3.使用animation创造一个动画，通过margin-left移动图片。.play{

animation: ma 10s 3s infinite;

}

@keyframes ma{

0%{

margin-left: 0px;

}

16%{

margin-left: -480px;

}

32%{

margin-left: -480px;

}

48%{

margin-left: -960px;

}

64%{

margin-left: -960px;

}

80%{

margin-left: 0px;

}

100%{

margin-left: 0px;

}

}

.play:hover{

animation-play-state: paused;

}

这个实现方法的整体思路是这样：

1. 创建一个div(规定宽高，设置超出隐藏，防止里面的div溢出)

2. div里面创建一个放图片的div(放图片，这个div不要设置超出隐藏，这个div宽度需要和总图片的宽度一致)

3. 然后利用CSS的动画，设置图片向那个方向移动，这个就可以说实现一个简单展示banner