轮播图

一．用函数做动态图。

它是可以自己循环播放。

 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="http://www.mamicode.com/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;

}

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

                         2016年11月29日   周二

本文出自 “12244270” 博客，请务必保留此出处http://12254270.blog.51cto.com/12244270/1878035

javascript