Menu

原生js+setInterval定时器实现的轮播。

2016年8月20日 - php
/**
 * Created by Administrator on 16-8-3.
 */
var div1 = document.getElementById('limg');//左移动按钮对象
var div2 = document.getElementById('rimg');//右移动按钮对象
var blank = document.getElementById('two_e');//获取空白区域对象,鼠标停留在img上时,停止轮播

var two_li = document.getElementById("two_cli");//右下角的四个圆形按钮
   two_li.childNodes[1].style.backgroundColor='pink';//第一个按钮默认为粉红色

function buttonColor(indexId){//设置当前页面(ID为indexId)对应的按钮为红色,其他的为紫色
    for(var j=0;j<two_li.childNodes.length;j++){
        if(j==1||j==3||j==5||j==7){
            two_li.childNodes[j].style.backgroundColor='purple';
        }
    }
    //console.log(indexId*2+1);
    two_li.childNodes[indexId*2+1].style.backgroundColor='pink';
}

/*点击左右按钮切换图片*/
//图片从左移出
function fadeOut(emel,time,div){//emel表示img元素,time表示设置的时间,div表示左右按钮对象(可能是左,可能是右)
    var zIndexImgMax =parseInt(emel[0].style.zIndex);
    var indexId =0;
    var left = 0;
    for(var i=0;i<emel.length;i++){
           if(zIndexImgMax <= parseInt(emel[i].style.zIndex)){
               zIndexImgMax = parseInt(emel[i].style.zIndex);
               indexId = i;
           }
    }
   if(div.id =="limg") {
        var iTime = setInterval(function(){
            if(emel[indexId].style.left ==""){
                left =0;
            }
            if(left>=-1190){
                emel[indexId].style.left = left+"px";
                left-=10;
            }else {
                clearInterval(iTime);
                emel[indexId].style.left = "";
                for (var j = 0; j < emel.length; j++) {
                    if (j == indexId) {
                        emel[indexId].style.zIndex = "-" + emel.length;
                        continue;
                    }
                    emel[j].style.zIndex = parseInt(emel[j].style.zIndex) + 1;
                }
                if(indexId ==3){
                    indexId=0
                }else{
                    indexId+=1;
                }
                buttonColor(indexId);
            }
        },time/100);
    }else{
       var iTime = setInterval(function(){
           if(emel[indexId].style.left == ""){
               left =0;
           }
           if(left<=1190){
               emel[indexId].style.left = left+"px";
               left+=10;
           }else{
               clearInterval(iTime);
               emel[indexId].style.left = "";
               for(var j=0;j<emel.length;j++){
                   if(j==indexId){
                       emel[indexId].style.zIndex = "-"+emel.length;
                       continue;
                   }
                   emel[j].style.zIndex = parseInt(emel[j].style.zIndex)+1;
               }
               if(indexId ==3){
                   indexId = 0
               }else{
                   indexId+=1;
               }
               buttonColor(indexId);
           }
       },time/1000);
   }
}
//自动轮播图片
var iRight = "true";
iRight = setInterval("getFadeOut(div2)",2000);//默认图片从左向右移动
blank.onmouseover = function(){//鼠标置于#two_e空白区域时,清除定时器
    clearInterval(iRight);
}
blank.onmouseout = function(){//鼠标移出#two_e空白区域时,定时器开始
    iRight = setInterval("getFadeOut(div2)",2000);
}

//封装函数
function getFadeOut(div){
    var obj = document.getElementsByClassName("twoImg");
    fadeOut(obj,1000,div);//移除
}
//点击左移切图按钮
div1.onclick=function(){
    clearInterval(iRight);
    getFadeOut(this);
    iRight = setInterval("getFadeOut(div1)",2000);
}
//点击右移切图按钮
div2.onclick=function(){
    clearInterval(iRight);
    getFadeOut(this);
    iRight = setInterval("getFadeOut(div2)",2000);
}
zhi

如果有什么不明白,可以QQ我:1005093464,咱加油。










分享
标签:,

6 thoughts on “原生js+setInterval定时器实现的轮播。

你是我的眼。

可惜看不见图呀,博主。




0



0
    博主

    清理博客时,不小心删除了。




    0



    0
博主

终于觉得自己的写的代码的可读性有多差了。




0



0
    小白

    读起来确实比较费劲。




    0



    0
    wind_php

    我正在这里等着你了。咱一起鲁代码。 document.log("hello");




    0



    0

发表评论