用js实现旋转轮播图

最新推荐文章于 2024-07-10 18:00:00 发布

原创

最新推荐文章于 2024-07-10 18:00:00 发布 · 2.3k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #动画

首先我们需要明白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></l