jquery實戰2：輪播圖和滑動導航效果
阿新 • • 發佈：2019-02-03
.banner{width:100%;height:450px;position:relative;z-index:0;}
.banner .b-img{width:100%;height:450px;position:absolute;left:0px;top:0px;}/**/
.banner .btn{width:100px;height:30px;position:absolute;bottom:0px;left:47%;z-index:2;}
.banner .btn ul{background:black;opacity:0.8;filter:alpha(opacity=80);display:inline-block;padding:1px 18px;border-radius:15px;}/*控制透明度，必須為塊級元素，此處適合用行內塊級元素。當然透明度也可以用rgba(0,0,0,.5)的顏色方案。padding用來撐開盒子變大些。*/
.banner .btn ul li{list-style:none;float:left;width:16px;height:16px;background:url('./images/1.png');margin:0 2px 0 2px;}
.banner .btn ul .on{background:url('images/2.png') no-repeat;}/*這裡為類名為On的li標籤作了單獨的樣式定義，是為了作為預設的選中的標籤，用的是黃色的原點背景圖片2.png，後面可用jquery對dom樹操作給選中的其他li標準新增此樣式，並移除未被選中的標籤的此樣式，即變為白色的背景圖片1.png.與上面的.banner .btn ul li｛｝定義的樣式一樣就是背景圖片不一樣，其他的其實是繼承了li的一些屬性值。*/
.banner .b-img{width:100%;height:450px;position:absolute;left:0px;top:0px;}/**/
.banner .btn{width:100px;height:30px;position:absolute;bottom:0px;left:47%;z-index:2;}
.banner .btn ul{background:black;opacity:0.8;filter:alpha(opacity=80);display:inline-block;padding:1px 18px;border-radius:15px;}/*控制透明度，必須為塊級元素，此處適合用行內塊級元素。當然透明度也可以用rgba(0,0,0,.5)的顏色方案。padding用來撐開盒子變大些。*/
.banner .btn ul li{list-style:none;float:left;width:16px;height:16px;background:url('./images/1.png');margin:0 2px 0 2px;}
.banner .btn ul .on{background:url('images/2.png') no-repeat;}/*這裡為類名為On的li標籤作了單獨的樣式定義，是為了作為預設的選中的標籤，用的是黃色的原點背景圖片2.png，後面可用jquery對dom樹操作給選中的其他li標準新增此樣式，並移除未被選中的標籤的此樣式，即變為白色的背景圖片1.png.與上面的.banner .btn ul li｛｝定義的樣式一樣就是背景圖片不一樣，其他的其實是繼承了li的一些屬性值。*/