焦点图下面的索引小圆环
从很多焦点轮播图中我们都可以看到下面的显示相应图片的索引小圆环。
淘宝：
魅族：
其他：
当然还可以直接用图片来制作小圆环。
每一个的切换效果是用jQuery做的。需要先引入一个jQuery文件。
切换效果就是这行代码：
1 <script> 2 $(function(){ 3 $('.banner-circle li').click(function(){ 4 $(this).addClass('selected').siblings().removeClass('selected'); 5 }); 6 }); 7 </script>
首先是淘宝的。
html:
1 <ul class="banner-circle"> 2 <li class="selected"><a href="#"></a></li> 3 <li><a href="#"></a></li> 4 <li><a href="#"></a></li> 5 <li><a href="#"></a></li> 6 <li><a href="#"></a></li> 7 <li><a href="#"></a></li> 8 </ul>
css:
1 <style> 2 *{ 3 padding:0; 4 margin:0; 5 } 6 body{ 7 background:rgba(0,0,0,.6); 8 } 9 .banner-circle{ 10 position:absolute; 11 left:500px; 12 top:300px; 13 height:13px; 14 text-align:center; 15 font-size:0; 16 border-radius:10px; 17 background:rgba(255,255,255,.3); 18 } 19 .banner-circle li{ 20 border-radius:10px; /*这句可以不要*/ 21 margin:2px; 22 display:inline-block; 23 vertival-align:middle; 24 zoom:1; /*兼容IE*/ 25 list-style:none; 26 } 27 .banner-circle li a{ 28 display:block; 29 padding-top:9px; /*相当高度为9px*/ 30 width:9px; 31 height:0; 32 border-radius:50%; 33 background:#B7B7B7; 34 overflow:hidden; 35 } 36 .banner-circle li.selected a{ 37 background:#f40; 38 } 39 40 /*给段落一个样式*/ 41 p{ 42 height:30px; 43 width:60%; 44 padding:20px; 45 background:white; 46 margin:10px auto; 47 line-height:120%; 48 border-radius:5px; 49 } 50 </style>
然后是魅族：
html:
1 <ul class="bullet"> 2 <li></li> 3 <li class="on"></li> 4 <li></li> 5 <li></li> 6 </ul>
css:
1 <style> 2 *{padding:0;margin:0;list-style:none;} 3 body{ 4 background:#333; 5 } 6 .bullet{ 7 position:absolute; 8 left:50%; 9 margin-left:-74px; 10 top:200px; 11 } 12 .bullet li{ 13 float:left; 14 width:20px; 15 height:20px; 16 margin-left:15px; 17 border-radius:50%; 18 background:transparent; 19 border:1px solid #fff; 20 cursor:pointer; 21 } 22 .bullet li.on{ 23 background:#fff; 24 } 25 </style>
然后是其他：
html：
1 <div id="buttons"> 2 <span class="on"></span> 3 <span></span> 4 <span></span> 5 <span></span> 6 <span></span> 7 </div>
css:
1 <style> 2 *{ 3 padding:0; 4 margin:0; 5 } 6 body{ 7 background:#989898;; 8 } 9 #buttons{ 10 width:100px; 11 height:10px; 12 position:absolute; 13 top:200px; 14 left:400px; 15 } 16 #buttons span{ 17 float:left; 18 cursor:pointer; 19 width:10px; 20 height:10px; 21 border-radius:50%; 22 margin-right:5px; 23 background:#333; 24 border:1px solid #fff; 25 } 26 #buttons span.on{ 27 /* background:orangered;*/ /*橘红色*/ 28 background:#FF4500; 29 } 30 </style>
具体的布局样式就是这样的哦。
