用js实现旋转轮播图

来源：互联网发布：android 暂时修改mac 编辑：程序博客网时间：2024/05/15 23:03

首先我们需要明白3d轮播图的原理

移动的原理:

首先每一站图片对应这一个样式

向左移动:

我们可以将第一张图片样式给删除，添加到最后一张(第五张)样式的后面，这样就实现了向左图片的切换

向右移动:

我们可以将最后一张(第五张)图片样式给删除，添加到第一张样式的前面，这样就实现了向右图片的切换

这样,在图片不变的情况下，就实现了图片的切换

html代码:

<body>    <div class="wrap" id="wrap">        <div class="slide" id="slide">            <ul>                <!--五张图片-->                <li><a href="#"><img src="images/img1.jpg" width="800px" height="500px"/></a></li>                <li><a href="#"><img src="images/img2.jpg" width="800px" height="500px"/></a></li>                <li><a href="#"><img src="images/img3.jpg" width="800px" height="500px"/></a></li>                <li><a href="#"><img src="images/img4.jpg" width="800px" height="500px"/></a></li>                <li><a href="#"><img src="images/img5.jpg" width="800px" height="500px"/></a></li>            </ul>            <!--左右切换按钮-->            <div class="arrow" id="arrow">                <a href="javascript:;" class="prev"></a>                <a href="javascript:;" class="next"></a>            </div>        </div>    </div></body>

css样式:

*{    margin:0;padding:0}body,button,input,select,textarea{    font:12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;color: #666;}ol,ul{    list-style:none}a{    text-decoration:none}fieldset,img{    border:0;vertical-align:top;}a,input,button,select,textarea{    outline:none;}a,button{    cursor:pointer;}.wrap{    width:1200px;    margin:10px auto;}.slide {    height:500px;    position: relative;}.slide li{    position: absolute;    left:200px;    top:0;}.slide li img{    width:100%;}.arrow{    opacity: 0;}.prev,.next{    width:76px;    height:112px;    position: absolute;    top:50%;    margin-top:-56px;    background: url(../images/prev.png) no-repeat;    z-index: 99;}.next{    right:0;    background-image: url(../images/next.png);}

js代码如下:

window.onload =function(){    //先获取数据    var wrap = document.getElementById("slide");    var liArr = document.getElementsByTagName("li");    var arrow = document.getElementById("arrow");    var arrowChild = arrow.children;    //用于判断事件是否走完没走完点击无效  true表示走完，false表示没走完    var flag = true;    //将数据存入数组中    var json = [        {   //  1            width:400,            top:70,            left:50,            opacity:20,            z:2        },        {  // 2            width:600,            top:120,            left:0,            opacity:80,            z:3        },        {   // 3            width:800,            top:100,            left:200,            opacity:100,            z:4        },        {  // 4            width:600,            top:120,            left:600,            opacity:80,            z:3        },        {   //5            width:400,            top:70,            left:750,            opacity:20,            z:2        }    ];    //鼠标移入，缓慢显示    wrap.onmouseenter = function(){        animate(arrow,{"opacity":100});    }    //鼠标移出，缓慢隐藏    wrap.onmouseleave = function(){        animate(arrow,{"opacity":0});    }    //加载数据    move();    //给两侧的按钮绑定事件    for(var k in arrowChild){        arrowChild[k].onclick = function(){            if (this.className == "prev"){                if (flag) {                    //alert("左边");                    flag = false;                    //左侧  true就左侧运动                    move(true);                }            }else{                if(flag) {                    //alert("右边");                    flag = false;                    //右侧  false就右侧运动                    move(false);                }            }        }    }    //移动的方法    function move(bool){        //当不带参数时，表示第一次加载数据        if (bool !== undefined) {            if (bool) {                // (操作数组。向右旋转：删除数组中最后一个元素，添加到数组中的第一位)                json.unshift(json.pop());            } else {                // (操作数组。向左旋转：删除数组中第一个元素，添加到数组中的最后一位)                json.push(json.shift());            }        }        //加载数据        for(var i = 0;i<liArr.length;i++){            animate(liArr[i],{                "width":json[i].width,                "top":json[i].top,                "left":json[i].left,                "opacity":json[i].opacity,                "zIndex":json[i].z            },function(){                //表示所有动画执行完毕  让其继续操作                flag = true;            });        }    }}

缓动动画封装:

function animate(ele,json,fn){        //先清定时器        clearInterval(ele.timer);        ele.timer = setInterval(function () {            //开闭原则            var bool = true;            //遍历属性和值，分别单独处理json            //attr == k(键)    target == json[k](值)            for(var k in json){                //四部                var leader;                //判断如果属性为opacity的时候特殊获取值                if(k === "opacity"){                    leader = getStyle(ele,k)*100 || 1;                }else{                    leader = parseInt(getStyle(ele,k)) || 0;                }                //1.获取步长                var step = (json[k] - leader)/10;                //2.二次加工步长                step = step>0?Math.ceil(step):Math.floor(step);                leader = leader + step;                //3.赋值                //特殊情况特殊赋值                if(k === "opacity"){                    //一般情况                    ele.style[k] = leader/100;                    //兼容ie(678)                    ele.style.filter = "alpha(opacity="+leader+")";                }else if(k === "zIndex"){                    ele.style[k] = json[k];                }else{                    ele.style[k] = leader + "px";                }                //4.清除定时器                //判断: 目标值和当前值的差大于步长，就不能跳出循环                //不考虑小数的情况：目标位置和当前位置不相等，就不能清除清除定时器。                if(json[k] !== leader){                    bool = false;                }            }            //只有所有的属性都到了指定位置，bool值才不会变成false；            if(bool){                clearInterval(ele.timer);                //所有程序执行完毕了，现在可以执行回调函数了                //只有传递了回调函数，才能执行                if(fn){                    fn();                }            }        },25);}

效果如下:

阅读全文

1 0