js轮播图透明度切换（带上下页和底部圆点切换）

本篇文章主要介绍了js轮播图透明度切换（带上下页和底部圆点切换）的实例。具有很好的参考价值。下面跟着小编一起来看下吧

效果图：

代码如下：

    *{ margin:0; padding:0; border:none; } li{ list-style: none; } #box{ height:340px; width:790px; position: relative; margin:100px auto; } #box #list1{ height:340px; width:790px; } #box #list1 li{ font-size: 80px; line-height: 340px; text-align: center; height:340px; width:790px; position: absolute; left:0; top:0; opacity: 0; filter: alpha(opacity=0); } #box #list1 li img{ height:340px; width:790px; } #shang,#xia{ height:80px; width:50px; color:#212121; background: #ccc; font-size: 60px; font-weight: bold; line-height: 80px; text-align: center; position: absolute; top:130px; opacity: 0.8; filter: alpha(opacity=80); cursor: pointer; } #shang{ left:0; } #xia{ right:0; } #box #list2{ height:20px; width:195px; position: absolute; left:297px; bottom:25px; opacity: 0.8; filter: alpha(opacity=80); } #box #list2 li{ height:20px; width:20px; background: #ccc; border-radius: 50%; float: left; margin-right:5px; cursor: pointer; } #box #list2 li.active{ background: black; }   
 
1
2
3
4
5
6
7
8
 
  

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持本站!

以上就是js轮播图透明度切换（带上下页和底部圆点切换）的详细内容，更多请关注本站其它相关文章！