轮播图

 

一.用函数做动态图。

它是可以自己循环播放。

 1.先布局,设一个大的div,再设四个小的div,分别设置它的样式。

 

1.      明确目标;动态改变id="center"这个div的背景

                            找到id="centr"这个div  

                            varimgDiv= document.getElementById('center')

                            alert(imgDiv)

 

                   2.      得到imgDiv的样式(style)里面的background属性

                           imgDiv.style.background= 'url(./imgs/1.jpg)';

 

                   3.      每隔两秒钟弹出"我很好"

                           functionsay(){

                                    alert("我很好")

                                    }

                    setInterval(控制的函数,时间) //可以一直弹出图片,打开网页开始算时间。

                    setInterval(say,2000);

                    setTimeout();只弹出一次。

 

                   4.写变化函数

                    function change(){

                           imgDiv.background= 'url(./imgs/1.jpg)'

                    }

                    setInterval(change,2000)

 

/*清除定时器函数

                     var clearTime = setInterval(change,2000);

                          functionclearT(){

                                    clearInterval(clearTime);

                          }*/




二.用数组(array)做轮播动态图,这个比上面的好理解简单易懂。用鼠标点击图片循环。

1.<script>

         varimg = document.getElementById('center');

         Var a =

['url(./imgs/1.jpg)','url(./imgs/2.jpg)','url(./imgs/3.jpg)','url(./imgs/4.jpg)','url(./imgs/5.jpg)'];

                 functiontoLeft(){

                            varb = a.shift()

                            a.push(b);

                            img.style.background= a[0];

                   }

                   functiontoRight(){

                            varb = a.pop();

                            a.unshift(b);

                            img.style.background= a[0];

                   }

         </script>

 

2.设置js样式

</body>

<!-- 引入js文件,通常放在页尾

         <scriptsrc="./array.js"></script> -->

</html>

 

 

3.<!--bootstrap里面,最大div里面的设置<div></div>边框自己有边距,不会紧挨着。(bootstrap它依赖于jquery.js )

4. 

两个网站

         bootstrap前端框架的网站  里的自适应

         AmaziUI (适合手机版)

 




轮播里设置小圆点。

#center{

         width:400px;

         height:300px;

         background:pink;

         position:relative;

}

#sc{

         width:100px;

         height:20px;

         margin:0 auto;

         /*position: absolute;

         top:270px;

         left:150px; */

}

.small{

         width:20px;

         height:20px;

         background:black;

         border-radius:10px;

         opacity:0.5;

         float:left;

         margin-right:5px;

}

 

    头一次觉得时间不够用了,学的东西吧太多,脑子又不够用啊。

 

                         20161129   周二