body { padding:0; margin:0; background:#253242; } body,html { height:100% } div,li,ul { padding:0; margin:0 } img { vertical-align:top; border:0 } li,ul { list-style:none; text-transform:capitalize } #banner { margin-bottom:-10px } #carousel { position:relative; z-index:2; height:250px; margin-top:20px; transform-style:preserve-3d; perspective:800px } #carousel img { position:absolute; left:50%; top:50%; width:504px; height:266px; margin-left:-252px; margin-top:-133px; transition:transform .5s ease-in-out; box-shadow:8px 8px 20px rgba(0,0,0,.2); cursor:pointer } #bannerNav { position:relative; margin-top:20px; height:10px; padding:10px 0; text-align:center } #bannerNav ul li { cursor:pointer; overflow:hidden; display:inline-block; width:14px; margin:0 2px } #bannerNav ul li a { margin:0 auto; display:block; width:6px; height:6px; vertical-align:top; border-radius:3px; background:#5e6671; font-size:0 } #bannerNav ul li.on a,#bannerNav ul li:hover a { background:#b4b7ba } #bannerNav ul li.on a { width:12px } @media only screen and (min-width:1920px) { #banner { margin-bottom:-15px } #carousel { height:360px } #carousel img { width:720px; height:380px; margin-left:-360px; margin-top:-190px } }
本幻灯片提供了两种尺寸,在分辨率大于或等于1920的时候,整个轮播会整体放大,小于1920尺寸的时候,就显示正常的轮播大小,开发者可自由组合
另:本demo目前只支持webkit内核浏览器,如果支持其他浏览器,请在CSS中将transform类的CSS3CSS3属性加上前缀