抽屉效果的轮播图

╰半夏微凉° 2022-03-15 02:12 250阅读 0赞

![20190228153250498.gif][]

效果如上

使用css，通过计算，实现上面的动画效果。

代码：

<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            user-select: none;
        }
    
        ul {
            list-style: none;
            position: relative;
            width: 1000px;
            height: 397px;
            margin: 0 auto;
            overflow: hidden;
        }
    
        li {
            display: inline-block;
            position: absolute;
            overflow: hidden;
            transition: all 0.6s linear;
        }
    
        .slide-item:nth-of-type(1) {
            left: 0;
        }
    
        .slide-item:nth-of-type(2) {
            left: 200px;
        }
    
        .slide-item:nth-of-type(3) {
            left: 400px;
        }
    
        .slide-item:nth-of-type(4) {
            left: 600px;
        }
    
        .slide-item:nth-of-type(5) {
            left: 800px;
        }
    </style>
    <div id="main">
        <ul class="slide">
            <li class="slide-item"><img src="./img/blog-1.jpg" alt=""></li>
            <li class="slide-item"><img src="./img/blog-2.jpg" alt=""></li>
            <li class="slide-item"><img src="./img/blog-3.jpg" alt=""></li>
            <li class="slide-item"><img src="./img/blog-1.jpg" alt=""></li>
            <li class="slide-item"><img src="./img/blog-2.jpg" alt=""></li>
        </ul>
    </div>
    <script src="../jquery-3.3.1.js"></script>
    <script>
        var lis = $('.slide-item');
        $('.slide').on('mouseover', 'li', function (event) {
            var index = $(this).index()
            $(this).css({
                left: 100 * index + 'px'
            })
            for (var i = 1; i < lis.length; i++) {
                if (i > index) {
                    $(lis.eq(i)).css({
                        left: 1000 - 100 * (5 - i) + 'px'
                    })
                }
                if (i < index) {
                    $(lis.eq(i)).css({
                        left: 100 * i + 'px'
                    })
                }
            }
        })
        $('.slide').on('mouseout', function (event) {
            for (var i = 0; i < lis.length; i++) {
                $(lis.eq(i)).css({
                    left: ''
                })
            }
        })
    </script>

[20190228153250498.gif]: /images/20220315/5450a052aff046b5ba3f8038da297329.png

发表评论取消回复

表情：

评论列表（有 0 条评论，250人围观）

还没有评论，来说两句吧...

相关阅读

相关 js实现轮播图效果

![20180518160453435][] html代码 <!DOCTYPE html> <html> <head> <meta c

今天药忘吃喽~/ 2024年02月18日 20:17/ 0 赞/ 44 阅读

相关轮播图效果

效果图： ![1264306-20190925165841953-217666741.gif][] 1.引入依赖 implementation 'com.yout

Dear 丶/ 2023年08月17日 17:09/ 0 赞/ 137 阅读

相关 ios 扑克牌效果轮播_缩放效果的轮播图 iOS

![Image 1][] 111.gif 做个一个缩放的轮播图，基本实现功能。简单的记录下思路: 因为屏幕展示有三张图，所以传入的图片要先添加4张，左边两张(倒数第二

电玩女神/ 2023年01月09日 12:43/ 0 赞/ 213 阅读

相关实现简易轮播图效果

所用知识点：定时器 setInterval(function()\{ count(); \},1000) 每隔1000ms执行一次co

亦凉/ 2022年12月13日 04:54/ 0 赞/ 228 阅读

相关 html轮播图京东效果,JavaScript仿京东轮播图效果

本文实例为大家分享了JavaScript实现京东轮播图效果展示的具体代码，供大家参考，具体内容如下做了一个仿京东的轮播图，当然没有人家官网的精美啦。 ![3f7d657d

比眉伴天荒/ 2022年10月06日 04:56/ 0 赞/ 259 阅读

相关 jquery实现轮播图效果

总结一下《锋利的jquery》里的用jquery实现一个简单的单击上一张及下一张实现的轮播图效果先看下最后的效果图 ![Center]

野性酷女/ 2022年08月07日 04:58/ 0 赞/ 267 阅读

相关纯css3实现的轮播图效果（表单制作轮播图）

主要是使用css3新增的伪类选择器，利用表单制作的轮播图效果，效果图如下所示 ![70][] 完整代码如下： <!DOCTYPE html> <html

我就是我/ 2022年05月14日 09:56/ 0 赞/ 302 阅读

相关 javascript实现轮播图效果

实现效果如图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubm

r囧r小猫/ 2022年04月14日 06:26/ 0 赞/ 394 阅读

相关 JS实现轮播图效果

一、用JS实现轮播图,简单分为五大步，具体看代码块注释 1.自动播放 2.鼠标进入停止播放 3.鼠标离开继续播放 4.点豆豆跳转到对应图片 5.给图片添加超

深藏阁楼爱情的钟/ 2022年03月17日 14:14/ 0 赞/ 402 阅读

相关抽屉效果的轮播图

![20190228153250498.gif][] 效果如上使用css，通过计算，实现上面的动画效果。代码： <style> {

╰半夏微凉°/ 2022年03月15日 02:12/ 0 赞/ 251 阅读