旋转木马动画效果

最新推荐文章于 2023-01-13 16:00:12 发布

userMeiName

最新推荐文章于 2023-01-13 16:00:12 发布

阅读量630

点赞数

本文链接：https://blog.csdn.net/weixin_43608739/article/details/93136728

版权

<style>
        * {
            margin: 0;
            padding: 0;
        }

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

        .side {
            height: 500px;
            position: relative;
        }

        .side li {
            list-style: none;
            position: absolute;
            left: 200px;
            top: 0;
        }

        .side li img {
            width: 100%;
        }

        .arrow {
            display: none;
        }

        .prev,
        .next {
            width: 76px;
            height: 112px;
            position: absolute;
            top: 50%;
            margin-top: -56px;
            background: url("img/prev.png") no-repeat;
            z-index: 99;
        }

        .next {
            right: 0;
            background-image: url("img/next.png");
        }
    </style>

<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
        ];
        var flag = true;
        window.onload = function () {
            var list = my$("wrap").getElementsByTagName("li");
            function assign() {
                for (var i = 0; i < list.length; i++) {
                    animate(list[i], config[i],function () {
                        //当动画完成到指定位置时flag才为真（防止鼠标多次快速点击左右焦点时，图片全部缩在一起）
                        flag = true;
                    });
                }
            }
            assign();
            //自动播放
            var timeId = setInterval(autoMatic, 2000);
            //鼠标进入，左右焦点显示
            my$("wrap").onmouseover = function () {
                my$("arrow").style.display = "block";
                //清除定时器
                clearInterval(timeId);
            };
            //鼠标离开，左右焦点消失
            my$("wrap").onmouseout = function () {
                my$("arrow").style.display = "none";
                timeId = setInterval(autoMatic, 2000);
            };
            //鼠标点击右焦点
            my$("arrRight").onclick = autoMatic;
            function autoMatic() {
                //如果flag为真则执行以下代码
                if (flag) {
                    flag = false;
                    config.push(config.shift());
                    assign();
                }
            }
            //鼠标点击左焦点
            my$("arrLeft").onclick = function () {
                if (flag) {
                    flag = false;
                    config.unshift(config.pop());
                    assign();
                }
            };

        };


    </script>

<body>
<div class="wrap" id="wrap">
    <div class="side" id="side">
        <ul>
            <li><a href="#"><img src="img/slidepic1.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/slidepic2.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/slidepic3.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/slidepic4.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/slidepic5.jpg" alt=""></a></li>
        </ul>
        <div class="arrow" id="arrow">
            <a href="javscript:;" class="prev" id="arrLeft"></a>
            <a href="javscript:;" class="next" id="arrRight"></a>
        </div>
    </div>
</div>


</body>