js轮播图之旋转木马

最新推荐文章于 2023-01-16 20:41:22 发布

一只前端小白

最新推荐文章于 2023-01-16 20:41:22 发布

阅读量2.4k

点赞数

分类专栏：日志文章标签： javascript

本文链接：https://blog.csdn.net/qq_38944959/article/details/86506035

版权

日志专栏收录该内容

51 篇文章 2 订阅

订阅专栏

思路：给定一个数组，储存每张图片的位置，旋转将位置进行替换
左旋转：将数组第一个数据删除，然后添加到数组的最后
右旋转：将数组最后一个数据删除，然后添加到数组的开头
先附上效果图，再来实现

在这里插入图片描述

接下来就是最主要的，封装原生js动画函数

//封装函数获取任意一个元素的任意属性的值（兼容ie8）
function getStyle(element, attr) {
    return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr];
}
//封装js变速动画
function animate(element, json, fn) {
	//每次启动定时器之前先停止
    clearInterval(element.tmId);
    element.tmId = setInterval(function () {
        var flag = true;
        //遍历对象中的每个属性
        for (var attr in json) {
        	//执行透明度动画
            if (attr == "opacity") {
                //获取当前元素的属性值
                var current = parseInt(getStyle(element, attr)*100);
                //获取目标值
                var target = json[attr]*100;
                //移动的步数
                var step = (target - current) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                //移动后的值
                current += step;
                element.style[attr] = current / 100;
            } else if (attr == "zIndex") {
           		//改变层级属性
                element.style[attr] = json[attr];
            } else {
                //获取当前元素的属性值
                var current = parseInt(getStyle(element, attr));
                //获取目标值
                var target = json[attr];
                //移动的步数
                var step = (target - current) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                //移动后的值
                current += step;
                element.style[attr] = current + "px";
                if (current != target) {
                    flag = false;
                }
            }
        }
        if (flag) {
            clearInterval(element.tmId);
            //如果有回调函数就调用
            if (fn) fn();
        }
        // 测试
        // console.log("目标：" + target + "/当前：" + current + "/步数：" + step);
    }, 20);
}

封装完函数，剩下的直接调用就可以了，最后附上旋转木马完整代码?

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>旋转木马轮播图</title>
    <link rel="stylesheet" href="css/css(1).css"/>
    <script src="common.js"></script>
    <script>
        var config = [
            {
                width: 400,
                top: 20,
                left: 50,
                opacity: 0.2,
                zIndex: 2
            },//0
            {
                width: 600,
                top: 70,
                left: 0,
                opacity: 0.8,
                zIndex: 3
            },//1
            {
                width: 800,
                top: 100,
                left: 200,
                opacity: 1,
                zIndex: 4
            },//2
            {
                width: 600,
                top: 70,
                left: 600,
                opacity: 0.8,
                zIndex: 3
            },//3
            {
                width: 400,
                top: 20,
                left: 750,
                opacity: 0.2,
                zIndex: 2
            }//4

        ];

        window.onload = function () {
            var flag = true;
            var list = $query("#slide").getElementsByTagName("li");

            function flower() {
                //1、图片散开
                for (var i = 0; i < list.length; i++) {
                    //设置每个li的宽，透明度，left,top，zindex
                    animate(list[i], config[i], function () {
                        flag = true;
                    });
                }
            }

            flower();//初始化调用函数
            //按钮的显示与隐藏
            $query("#slide").onmouseover = function () {
                $query("#arrow").style.opacity = "1";
            }
            $query("#slide").onmouseout = function () {
                $query("#arrow").style.opacity = "0";
            }
            //点击切换
            $query("#arrLeft").onclick = function () {
                if (flag) {
                    config.unshift(config.pop());
                    flower();
                    flag = false;
                }
            }
            $query("#arrRight").onclick = function () {
                if (flag) {
                    config.push(config.shift());
                    flower();
                    flag = false;
                }
            }
            //自动切换
            setInterval(function () {
                config.push(config.shift());
                flower();
            }, 2000);
        }
    </script>

</head>
<body>
<div class="wrap" id="wrap">
    <div class="slide" id="slide">
        <ul>
            <li><a href="#"><img src="images/slidepic1.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/slidepic2.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/slidepic3.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/slidepic4.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/slidepic5.jpg" alt=""/></a></li>
        </ul>
        <div class="arrow" id="arrow">
            <a href="javascript:void(0);" class="prev" id="arrLeft"></a>
            <a href="javascript:void(0);" class="next" id="arrRight"></a>
        </div>
    </div>
</div>

</body>
</html>

一只前端小白

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
js轮播图之旋转木马

思路：给定一个数组，储存每张图片的位置，旋转将位置进行替换左旋转：将数组第一个数据删除，然后添加到数组的最后右旋转：将数组最后一个数据删除，然后添加到数组的开头先附上效果图，再来实现接下来就是最主要的，封装原生js动画函数//封装函数获取任意一个元素的任意属性的值（兼容ie8）function getStyle(element, attr) { return wind...
复制链接

扫一扫