月底了,转瞬第四周的学习也开始了,剩下的十三周里,只求尽力做到好。今天学习了轮播的制作,也是另一门语言的接触,虽然都是一些代码的编写,可是为什么总感觉这会动的轮播感觉很是高大上,哈哈哈。还是来回忆一下今天的内容吧。


  首先,做轮播图关键是先要吧轮播的布局做好,在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是很有必要的,今天只是初步的认识,感触不是很深刻,期待更多接触后带来惊喜。