学习笔记之大图轮播加圆点
大图轮播(下面带圆点,可点击,可自动循环):
样式style里:
1 *{ margin:0px auto; padding:0px;} 2 #t1{width:100%; height:350px;} 3 .t2{display:none;} 4 #q1{width:200px;height:20px;} 5 .q2{ 6 float:left; 7 width: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"; }