标签：侯琴琴
轮播图
一．用函数做动态图。
它是可以自己循环播放。
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;
}
头一次觉得时间不够用了，学的东西吧太多，脑子又不够用啊。
2016年11月29日 周二
本文出自 “12244270” 博客，请务必保留此出处http://12254270.blog.51cto.com/12244270/1878035
标签：侯琴琴
原文地址：http://12254270.blog.51cto.com/12244270/1878035
