创建2个盒子，一个盒子进行轮播图展示，一个盒子用来承载图片

CSS重置reset.css&normalize.css，在写页面时，由于html标签自带一些CSS属性，导致在调试样式的时候会出现各种奇怪的问题，为了大概率避免这些问题，在写CSS之前可以引用一下代码。

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}/*HTML5display-roleresetforolderbrowsers*/article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}

 autoMatic.css，通过创建动画，来实现图片的轮播，动画就是将一套CSS样式逐渐变化为另一套样式。在动画过程中，能够多次改变这套CSS样式。

/*自动轮播样式*/.banner-container{width:1200px;height:400px;/*轮播图居中*/margin:1remauto;/*隐藏超出展示容器的内容*/overflow:hidden;position:relative;}.banner-container.banner-img-container{width:6000px;height:400px;overflow:hidden;position:absolute;/*开启弹性盒，让图片横向排列*/display:flex;/*animation，@keyframes搭配使用run为自定义名称，10s时间*/animation:run10seaseinfinite;}.banner-container.banner-img-containerimg{width:1200px;height:100%;}/*动画关键帧*//*以百分比来规定改变发生的时间，或者通过关键词"from"和"to"，等价于0%和100%。0%是动画的开始时间，100%动画的结束时间。*/@keyframesrun{0%,10%{/*margin-left:0;*/transform:translateX(0);}20%,30%{/*margin-left:-1200px;;*/transform:translateX(-1200px);}40%,50%{/*margin-left:-2400px;*/transform:translateX(-2400px);}60%,70%{/*margin-left:-3600px;*/transform:translateX(-3600px);}80%,90%{/*margin-left:-4800px;*/transform:translateX(-4800px);}100%{/*margin-left:0;*/transform:translateX(0);}}

2.图片手动轮播

锚URL-指向页面中的锚，即指向图片存储路径

manual.css

到此这篇关于纯css实现图片轮播（自动手动）的文章就介绍到这了,更多相关css图片轮播内容请搜索巴适教程以前的文章或继续浏览下面的相关文章，希望大家以后多多支持巴适教程！