怎样实现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

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

vue组件制作专题 - （mpvue专用）在mpvue中纯自己写css实现简单左右轮播
在mpvue中纯自己写css实现简单左右轮播 CSDN:jcLee95 邮箱:291148484@163.com 项目中,在src目录下的components目录下新建一个新文件并重命名为jcmv-c ...
怎样实现banner自动播放html,纯css实现轮播图banner自动轮换效果
话不多说直接上代码 * { margin: 0; padding: 0; } .container { margin:300px auto; height: 400px; width: 1146px ...
【用HTML+CSS实现简单的轮播图片效果】
本文主要从两种方式上实现轮播图片效果方法一 ***================================================================== 本方法为渐变轮 ...
html如何实现图片轮流播放,纯css如何实现图片轮播
纯css如何实现图片轮播发布时间:2020-07-29 10:23:33 来源:亿速云阅读:119 作者:Leah 纯css如何实现图片轮播?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希 ...
基于css和js的轮播效果图实现
基于css和js的轮播效果图实现第一篇:效果图 1.先啥也不说直接上效果图第二篇:详细讲解 1. 建立容器 #box 给其设置相关属性(注意:overflow:hidden;) 2. Box ...
html+css+js 实现图片轮播效果
html+css+js 实现图片轮播效果图片轮播效果: 会自动向左 || 向右切换图片能手动点击按钮切换图片多用于商品展览等等 --首先我们创建一个盒子进行展览,然后一个< ul> ...
轮播图实现html,html、css、js实现轮播图
2017-03-13 今天把轮播图的知识1过了一下,写了一个比较简单的轮播图,给大家参考一下. 查看具体的效果点击这个链接 : http://gjhnstxu.me/%E8%BD%AE%E6%92%A ...
使用HTML+CSS制作网易云轮播
使用HTML和CSS制作网易云轮播今天现来说说使用CSS的动画技术来实现轮播.现看看效果图这里是八张图片渐入渐出的效果轮播. html代码: <!DOCTYPE html&g ...
怎样实现banner自动播放html,纯CSS3实现banner图片自动轮播效果方式总结
自动轮播: 实现切换图片,图片循环播放:鼠标悬停某张图片, 则暂停切换.css 方法一.opacity控制透明度实现轮播效果依照需求咱们选择用CSS3的animation动画进行实现:transit ...

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

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

最新文章

热门文章