标签：轮播
月底了，转瞬第四周的学习也开始了，剩下的十三周里，只求尽力做到好。今天学习了轮播的制作，也是另一门语言的接触，虽然都是一些代码的编写，可是为什么总感觉这会动的轮播感觉很是高大上，哈哈哈。还是来回忆一下今天的内容吧。
首先，做轮播图关键是先要吧轮播的布局做好，在body中创建div，以一大包含三小形式并将大div居中在页面：
<!-- 布局 -->
<div id="container">
<div id="left" class="roll" onclick="changes()"></div>
<div id="center" class="roll" </div>
<div id="right" class="roll" onclick="change()"></div>
</div>
创建好布局之后我们便开始创建轮播了：
我们在使用scrip标签，然后第一步要通过getElementById找到要设置的对象，然后我们可以得到imgDiv样式的background属性，并赋予它变量，在通过改变图片链接的number实现地址的切换，方法如下：
<script>
var imgDiv = document.getElementById("center")
var imgBg = imgDiv.style;
var number = 1;
function change(){
if(number > 5){
number = 1 ;
}
imgBg.background = ‘url(./image/‘+number+‘.jpg)no-repeat‘;
number ++ ;
}
function changes(){
var numbers = 5 ;
if(numbers < 1){
numbers = 5 ;
}
imgBg.background = ‘url(./image/‘+number+‘.jpg)no-repeat‘;
number -- ;
}
设置鼠标放在图片上便停止播放，离开便运行，需要设置onmouseover和onmouseout事件，时期打开关闭计时器setInterval便可达到想要的效果，两边的div也可以设置onclick事件来达到切换轮播的效果。
var clearTime = setInterval(change,2000);
function clearT(){
clearInterval(clearTime)
}
function openT(){
clearTime = setInterval(change,2000);
}
</script>
当然这种方法局限于图片的链接需要统一，但是能够实现效果的方法还是可采用的。
另一种方法是将图片链接构成一个数组，通过shift、push，pop、unshift实现对数组顺序的改变，只索取数组中第一的下标为0的元素作为图片地址，便可达到对图片的轮播。
首先还是要先做好布局：
<div id="main">
<div id="left" class="button" ">
</div>
<div id="img">
</div>
<div id="right" class="button" ">
</div>
</div>
接下来在script中创建数组，设置数组中元素的变化：
<script>
var imgBg = document.getElementById("img");
var a = ["url(./image/1.jpg)","url(./image/2.jpg)","url(./image/3.jpg)","url(./image/4.jpg)",
"url(./image/5.jpg)"]
function toLeft(){
var b = a.shift();
a.push(b);
imgBg.style.background =a[0];
}
setInterval(toLeft,2000);
function toRight(){
var b = a.pop();
a.unshift(b);
imgBg.style.background =a[0];
}
</script>
通过对数组中元素的循环切换便达到轮播效果。
最后介绍了bootstrap，以我的理解，这是一种快速创建编码的框架，相当于一种通用的骨架，通过快速的将骨架植入，根据需要进行微调，然后在添加内容丰富骨架，以此实现更高效的工作，熟练掌握bootstrap是很有必要的，今天只是初步的认识，感触不是很深刻，期待更多接触后带来惊喜。
标签：轮播
原文地址：http://12266619.blog.51cto.com/12256619/1877956
