用js实现旋转轮播图

最新推荐文章于 2021-09-03 20:56:46 发布

evan_qb

最新推荐文章于 2021-09-03 20:56:46 发布

阅读量2.2k

点赞数 3

分类专栏：前端文章标签： javascript 动画

本文链接：https://blog.csdn.net/Evan_QB/article/details/77940264

版权

前端专栏收录该内容

76 篇文章 1 订阅

订阅专栏

首先我们需要明白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);
}

效果如下:

evan_qb

关注

3
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
用js实现旋转轮播图

首先我们需要明白3d轮播图的原理移动的原理:首先每一站图片对应这一个样式向左移动:我们可以将第一张图片样式给删除，添加到最后一张(第五张)样式的后面，这样就实现了向左图片的切换向右移动:我们可以将最后一张(第五张)图片样式给删除，添加到第一张样式的前面，这样就实现了向右图片的切换这样,在图片不变的情况下，就实现了图片的切换
复制链接

扫一扫