学习笔记之大图轮播加圆点

大图轮播（下面带圆点，可点击，可自动循环）：

样式style里：

 1 *{ margin:0px auto; padding:0px;}
 2     #t1{100%; height:350px;}
 3     .t2{display:none;}
 4     #q1{200px;height:20px;}
 5     .q2{
 6         float:left;
 7         20px;
 8         height:20px;
 9         border-radius:50%;
10         border:1px solid #3FF;
11         background-color:#FC9;
12         margin-left:10px;
13         position:relative;
14         top:-25px;
15         }

body中的图片

1 <div id="t1">
2 
3     <img class="t2" src="2fcb566ad2cf0e6454fefe7c691837aa.jpg" style="display:block;" width="100%" height="350px"><!--每一个img中都设置好宽和高，并且设置一个div，也设置好款和高，就会所有图片大小一致和有效控制他们-->
4     <img class="t2" src="2ff7c2a2bdaef1cbf5d33f0403cd7f8c.jpg" width="100%" height="350px">
5     <img class="t2" src="4e4d9740fad9b918bb7e354faef3ef78.jpg" width="100%" height="350px">
6     <img class="t2" src="4f222b9aa55f39094530fd35ac20f888.jpg" width="100%" height="350px">
7     <img class="t2" src="7c3e7788a4da522b617fd2774364138f.jpg" width="100%" height="350px">
8 
9 </div>

body中图片下方的点：

1 <div id="q1">
2     
3         <div class="q2" onclick="Fc('0')"></div>
4         <div class="q2" onclick="Fc('1')"></div>
5         <div class="q2" onclick="Fc('2')"></div>
6         <div class="q2" onclick="Fc('3')"></div>
7         <div class="q2" onclick="Fc('4')"></div>
8 
9     </div>

script中的函数：

//思路：先用间隔，调用函数。获取你想循环的图片的类名称加以定义，在function外，定义一个变量等于零（主要用它来做数组取值的i），在function里使每次加一，使获取图片的样式显示，循环图片的样式为不显示，如果a的长度大于图片长度，把0的值赋给a（循环重播）。

var a=0;//这个数不能放到函数里面，否则++没法增加。
    window.setInterval("Mt()",5000);
    function Mt()
    {
        var t2=document.getElementsByClassName("t2");
        a++;
        
        if(a>=t2.length)
        {
         a=0;
        }
        for(i=0;i<t2.length;i++)
        {
            t2[i].style.display="none";
        }
        t2[a].style.display="block";    
        
        //随图片自动改变原点的背景色
        var q2=document.getElementsByClassName("q2");
        for(var i=0;i<q2.length;i++)
        {
         q2[i].style.backgroundColor="#FC9";//这个地方的颜色是上面的背景色。
        }
         q2[a].style.backgroundColor="#3FF";//为什么用a呢？因为这样就使原点与图片联系起来了。
    }

function Fc(a)
    {    
        
        var q2=document.getElementsByClassName("q2");
        for(var i=0;i<q2.length;i++)     //点击圆点变背景色
        {
            q2[i].style.backgroundColor="#FC9";
        }
        q2[a].style.backgroundColor="#3FF";
        
        var t2=document.getElementsByClassName("t2");
        for(var e=0;e<t2.length;e++)          //点击圆点改图片
            {
            t2[e].style.display="none";
            }
        t2[a].style.display="block";
        
    }