标签：
---恢复内容开始---
这两天在顶顶大人的指导下，利用jquery框架做了一个动态切换的小页面。最终效果图：
这么萌萌哒的图片让我觉得一直在测试也没那么累。实现功能如下：
1.打开页面时，自动切换，切换顺序为123212...这样
2.当用户鼠标放在三个按钮中的某一个时，会停留，不再切换；当鼠标移开后，继续执行自动切换。
码代码的过程：
关键是设置一个父元素，使其高度小于子元素。这样才会出现滚动条啦。要记住把父元素的overflow属性设置为hidden哦，不然又滚动条什么的影响美观。我之前就是设置为auto，顶顶大人指导+1。在子元素中的图片都设置float：left，当然别忘了清除浮动。
这些设置完就要设置左侧按钮了，如何让那三个按钮垂直居中，头疼了半天。最后还是百度了下，给父元素设置display属性，属性值为table;对子元素设置：
display:table-cell;
vertical-align:middle;
然后是把方方丑丑的按钮变为圆圆的，设置border-radius;我把值取它width的一半，就圆了。
简单的静态页面写完了，然后开始写js文件。说到这个，上一次让小顶大人查错，他非常认真地查了大半天，就是查不出错。然后原来我把script标签里的type属性写成type=“javascript/text” 小顶兄怒了...然后我记住了，以后不确定就不要写了。顶大人指导+2
为了实现它每隔一定时间自动切换，用到了window的方法，window.setInterval(参数1，参数2)，好吧这里又有个小错误，又把window写成windows，又是查错半天无果的节奏。
顶大人指导+3。先是在ready事件设置了一个数组 array[0,1,2,1]切换循环执行的顺序，设置了一个变量j=0。然后设置了一个interval函数令i=++j/4；(先加j是因为最开始是设置了第一个按钮是红的，所以执行开始是从第二个按钮开始的。即触发第二个btn。)顶顶大人让我去问问看后台的那个大神，也许他有更优雅的写法，他常说后台大神写的代码超优雅~最后调用了参数为i的scroll方法。scroll方法中1.首先是一个链式写法，被改写了。我写得太繁琐了。
$(".totbtn input").eq(array[i]).addClass(‘red‘).siblings().removeClass("red");
这几天看了些jquery的方法， 还是可以看懂这个链式结构的。这个链式结构实现的功能是将索引等于array[i]的按钮添加red类，而他的同辈元素将red类移除。
2.stop（1,1） 当不加上这行代码时，就出现了这样一个bug，鼠标放在按钮上时，不会停止动画。
3.用到了srollTop()函数设置动画效果。它的参数为array[i]*200 (图片高度是200）当i=0,array[i]也为0，此时显示前三分之一内容，即第一个按钮触发时显示的内容。当i=3时，array[i]=1,此时高度为200显示第二部分内容。原先直接设置i*200，所以当i=3时，就会出现错误。
在reay事件下直接设置int= window.setInterval(interval,1000);
对三个按钮设置mouseover（）分别调用scroll函数，并将其中参数分别设置为0,1,2。并设置clearInterval()实现当鼠标停留时，自动切换停止，并停留在当前内容。
在另外对这个三个按钮分别设置mouseout()函数。重置j值为当前class为red的索引值。然后重置int=window.setInterval（interval，1000）;调用interval函数，写入新获得的j值。(j值不再从0开始)
基本的jquery就在这里了。第一次发博，感觉写得不清不楚的，再接再厉吧。
---恢复内容结束---
标签：
原文地址：http://www.cnblogs.com/Hollyhouse/p/5390967.html
