JS定时器

js 定时器有以下两个方法：

setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
setTimeout()：在指定的毫秒数后调用函数或计算表达式。

利用JS定时器与CSS3，JS逻辑语句来写一个轮播台：

轮播代码比较核心 先贴上：

function zidong(){
            for(var j=0;j<ys.length;j++)
            {
                var zindex=parseInt(ys[j].style.zIndex);
                zindex-=1;
                if(zindex<0)
                {
                    zindex=5;
                }
                ys[j].style.zIndex=zindex;
                if(zindex==5){
                    ys[j].style.left=500+'px';
                    ys[j].style.top=400+'px';
                    ys[j].style.transform = "scale(1)";
                }
                if(zindex==4){
                    ys[j].style.left=0+'px';
                    ys[j].style.top=330+'px';
                    ys[j].style.transform = "scale(0.8)";
                }
                if(zindex==3){
                    ys[j].style.left=0+'px';
                    ys[j].style.top=30+'px';
                    ys[j].style.transform = "scale(0.7)";
                }
                if(zindex==2){
                    ys[j].style.left=500+'px';
                    ys[j].style.top=0+'px';
                    ys[j].style.transform = "scale(0.6)";
                }if(zindex==1){
                ys[j].style.left=1000+'px';
                ys[j].style.top=30+'px';
                ys[j].style.transform = "scale(0.7)";
            }
                if(zindex==0){
                    ys[j].style.left=1000+'px';
                    ys[j].style.top=330+'px';
                    ys[j].style.transform = "scale(0.8)";
                }
            }

以一个for循环来改变在当前页面的图片； 每个zindex值所代表的框都不同 根据不同的zindex值可以把不同的属性赋予不通的轮播图片

定时器代码：window.setInterval("zidong()",2000);

点击左右箭头会进行下一张或上一张的切换 主要是通过if else语句实现； 然后根据左右的不同来控制for循环是向左或者向右

动画效果写在了行内； 变化后的效果通过JS写在了行内 然后加一个transition：all；就可以了。

理想中的状态应该是悬浮不会自动切换图片了。。 但是我写不出来。。 日后来添加吧

上图

image.png