/*整体去除内外边距*/ * { margin:0; padding:0; } /*取消列表的图标内容*/ ul { list-style:none; } /*对整体部分的控制,浏览图片的窗口*/ .banner { width:500px; height:300px; border:2px solid #ccc; margin:100px auto; position:relative; overflow:hidden; } /*图片的初步设置后面的动态内容会在js中实现*/ .img { width:1024px; height:512px; position:absolute; top:0; left:0; } /*让没长图片向左浮动*/ .img li { float:left; } /*圆点承载部分的设计*/ .num { position:absolute; bottom:10px; width:100%; text-align:center; font-size:0; } /*圆点设计*/ .num li { width:10px; height:10px; background:rgba(0,0,0,0.5); border-radius:100%; display:inline-block; margin:0 5px; cursor:pointer; } /*按钮部分初始不可见*/ .btn { display:none; } /*按钮形状设计*/ .btn span { display:block; width:50px; height:100px; background:rgba(0,0,0,0.6); color:#fff; font-size:40px; line-height:100px; text-align:center; cursor:pointer; } /*上一个设计*/ .btn .prev { position:absolute; left:0; top:50%; margin-top:-50px; } /*下一个设计*/ .btn .next { position:absolute; right:0; top:50%; margin-top:-50px; } /*对按妞动态呈现的变换进行类选择器的设计为js代码部分进行铺垫*/ .num .active { background-color:#fff; } .hide { display:none; }
更新时间:2022-07-22 00:06:05
轮播图就是一种网站在介绍自己的主打产品或重要信息的传播方式。说的简单点就是将承载着重要信息的几张图片,在网页的某一部位进行轮流的呈现,从而做到让浏览者很快的了解到网站想要表达的主要信息。例如:淘宝,京东,等大型的购物平台。以及各种新闻网站的头版头条都是用这种方式呈现的重要信息。
二、轮播图的设计思想
轮播图的实现方式:例如:有5张轮播的图片,每张图片的宽度为1024px、高度为512px.那么轮播的窗口大小就应该为一张图片的尺寸,即为:1024×512。之后将这5张图片0px水平相接组成一张宽度为:5120px,高度依然为:512px。最后将这张合成后的大图每次向左移动1024px即可实现轮播图。