原生js旋转木马的效果图的动画效果（附代码）-js教程-PHP中文网

本篇文章给大家带来的内容是关于原生js旋转木马的效果图的动画效果（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

原生js-旋转木马
今天写一个原生js写的旋转木马js效果。
实现原理：
1.建立一个数组给每一张图片写对应的z-index，opacity，top，width；
2.实现旋转的操作是把建造的数组里面的第一组值放到最后一组，点下按钮就执行一次。
显示效果图：
这里写图片描述
html布局：

css样式：

* {            margin: 0;            padding: 0;        }

        ul {            list-style: none;        }

        .wrap {            width: 1200px;            margin: 100px auto;        }

        .slide {            height: 500px;            position: relative;            width: 1200px;        }

        .slide ul li {            position: absolute;            top: 0;            left: 0;            z-index: 1;        }

        .slide li img {            width: 100%;        }

        .arrow {            position: absolute;            width: 100%;            top: 50%;            opacity: 0;            z-index: 3;        }

        .prev,        .next {            position: absolute;            height: 110px;            width: 110px;            border-radius: 50%;            top: 50%;            //margin-top: -56px;            overflow: hidden;            text-decoration: none;        }
        .prev{            left: 0;            background: url("images/slider-icons.png") no-repeat left top;        }
        .next{            right: 0;            background: url("images/slider-icons.png") no-repeat right top;        }

JS部分：
接下来我们先把对应图片的样式存放到一个数组里面。

//写每张图片对应的样式
    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
    ];

页面加载时，图片就散开了，即调用了刚刚建造的数组，把他们逐一分配给每张图片

var list=my$("slide").getElementsByTagName("li"); //拿到所有li
        function assign() {    //分配函数
            for (var i=0;i鼠标进入和离开会有有左右箭头的显示和隐藏，点击按钮旋转的原理即改变数组第一个放在最后或把最后一组放在第一个。其中的flag为控制点击按钮时确保一组动画完成后才能继续执行下一个旋转动画。

							
								
								
									Type Studio
									一个视频编辑器，提供自动转录、自动生成字幕、视频翻译等功能
								
								下载 
							
						
//鼠标进入，左右焦点的p显示
        my$("wrap").onmouseover=function () {
            animate(my$("arrow"),{"opacity":1});
        };        //鼠标离开，左右焦点的p隐藏
        my$("wrap").onmouseout=function () {
            animate(my$("arrow"),{"opacity":0});
        };        //点击右边按钮事件
        my$("arrRight").onclick=function () {
            if (flag){
                flag=false;
                config.push(config.shift());     //把第一组值放到最后一组

                assign();
            }

        };        //点击左边按钮事件
        my$("arrLeft").onclick=function () {
            if (flag){
                flag=false;
                config.unshift(config.pop());   //把最后一组值放到第一组
                assign();
            }
        };
    };
完整JS代码：
相关推荐：
javascript实现图片压缩的代码
javascript实现省市联动的代码分享