HTML学习之轮播图

　　这可以说是一种非常简单的实现轮播图的方法了，由于时间仓促所以没写自动轮播部分。简单说一下原理吧，就是把所有图片堆叠在一个盒子里，设置所有图片的透明度为0，这样就把所有图片都隐藏了，第一张图片除外（第一张透明度设为1），当要切换到某张图片时，在把该图片的透明度设为1，而其他的图片透明度设为0，这样就实现了简单的轮播啦。

代码：

 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8" />
     <title>淡入淡出轮播图</title>
 <!-- css样式 -->
     <style type="text/css">
         /*清除边距*/
         div,ul,li{
             margin: 0;
             padding: 0;
         }

         /*首先准备一个放图片的容器*/
         .container{
             width: 500px;
             height: 280px;
             position: relative;
             top: 100px;
             left: 30%;
             /*border: 1px solid #ccc;*/
         }

         /*图片样式*/
         .container img{
             position: absolute;        /*把所有图片放在同一个位置*/
             width: 100%;
             transition-duration: 1s;    /*设置过渡时间*/
             opacity: 0;                /*把所有图片变透明*/
         }
         /*图片显示开关*/
         .container img.on{
             opacity: 1;                /*用于显示图片*/
         }

         /*左右按钮 按钮用图片更好点,这里为了简便就用大于小于号*/
         .left, .right{
             position: absolute;
             top: 30%;
             width: 60px;
             height: 100px;
             line-height: 100px;
             background-color: #666;
             opacity: 0.5;
             text-align: center;
             font-size: 60px;
             color: #ccc;
             display: none;    /*先隐藏按钮*/
             cursor: pointer;    /*设置鼠标悬停时的样式*/
         }
         .left{
             left: 0;
         }
         .right{
             right: 0;
         }
         .container:hover .left, .container:hover .right{
             display: block;            /*鼠标悬停才容器范围内时显示按钮*/
         }
         .left:hover, .right:hover{
             color: #fff;
         }

         /*焦点*/
         .container ul{
             position: absolute;
             bottom: 0;
             max-width: 500px;
             padding: 5px 200px;
         }
         .container ul li{
             list-style: none;
             float: left;
             width: 10px;
             height: 10px;
             border-radius: 50%;
             margin-left: 10px;
             background-color: #ccc;
             cursor: pointer;
         }
         .container ul li.active{
             background-color: #fff;        /*焦点激活时的样式*/
         }

     </style>
 </head>
 <body>
     <div class="container">
         <!-- 图片 -->
         <!-- 先把第一张图片显示出来 -->
         <img class="on" src="img/1.jpg" />
         <img src="img/2.jpg" />
         <img src="img/3.jpg" />
         <img src="img/4.jpg" />
         <img src="img/5.jpg" />

         <!-- 左右按钮 -->
         <div class="left">&lt;</div>
         <div class="right">&gt;</div>

         <!-- 焦点 -->
         <ul>
             <li class="active"></li>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
         </ul>
     </div>

 <!-- js部分 -->
     <script type="text/javascript">
         //1、找到container下的所有img标签,li标签,左右按钮
         var aImgs = document.querySelectorAll('.container img');
         var aLis = document.querySelectorAll('.container li');
         var btnLeft = document.querySelector('.container .left');
         var btnRight = document.querySelector('.container .right');

         // //检验是否找到
         // console.log(aImgs);
         // console.log(aLis);
         // console.log(btnLeft);
         // console.log(btnRight);

         //点击事件
         //点击按钮图片切换
         var index = 0;        //当前图片下标
         var lastIndex = 0;
         btnRight.onclick = function(){
             //记录上一张图片的下标
             lastIndex = index;
             //清除上一张图片的样式
             aImgs[lastIndex].className = '';
             aLis[lastIndex].className = '';

             index++;
             index %= aImgs.length;    //实现周期性变化
             //设置当前图片的样式
             aImgs[index].className = 'on';
             aLis[index].className = 'active';
         }
         //左边按钮类似
         btnLeft.onclick = function(){
             //记录上一张图片的下标
             lastIndex = index;
             //清除上一张图片的样式
             aImgs[lastIndex].className = '';
             aLis[lastIndex].className = '';

             index--;
             if (index < 0) {
                 index = aImgs.length - 1;
             }
             //设置当前图片的样式
             aImgs[index].className = 'on';
             aLis[index].className = 'active';
         }
     </script>
 </body>
 </html>