element-ui和iview以及swiper对图片轮播的对比操作

最新推荐文章于 2025-06-30 12:25:16 发布

李小斌96

最新推荐文章于 2025-06-30 12:25:16 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端-vue 文章标签： iview跑马灯 element-ui跑马灯 jquery superslider 分屏展示 vue跑马灯

本文链接：https://blog.youkuaiyun.com/lb1135909273/article/details/88714235

前端-vue 专栏收录该内容

29 篇文章

订阅专栏

博客围绕分屏展示跑马灯效果的实现展开。尝试用iview轮播，因切换后无法轮播、点击事件失效而放弃；element-ui能完成功能，但模块切换时图片会同时显示，可通过修改z-index样式解决；最终jquery slider完美实现该功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先放上我要实现的效果：
在这里插入图片描述
因为是公司的项目，所以图片无法显示，大概意思就是切换两个分屏展示的样式。

1.iview的轮播只能使用一个分屏展示，当切换之后再使用就无法轮播，点击事件失效，百度说是只能获取到一个事件焦点。iview的方式只能去掉。

代码如下：（摘自官网，我写的有问题，所以代码就被我删掉了）

<template>
    <Carousel v-model="value1" loop>
        <CarouselItem>
            <div class="demo-carousel">1</div>
        </CarouselItem>
        <CarouselItem>
            <div class="demo-carousel">2</div>
        </CarouselItem>
        <CarouselItem>
            <div class="demo-carousel">3</div>
        </CarouselItem>
        <CarouselItem>
            <div class="demo-carousel">4</div>
        </CarouselItem>
    </Carousel>
</template>
<script>
    export default {
        data () {
            return {
                value1: 0
            }
        }
    }
</script>

2.element-ui完成功能，但是模块切换的时候，会有一个几秒钟所有图片同时显示，这样页面十分凌乱，可以用z-index把背景的隐藏在另一个背景之下，完成功能。

<div>
            <div
              v-show="show==1"
            >
              <el-carousel
                trigger="click"
                arrow="never"
                height="147px"
                :autoplay="false"
                :interval="0"
              >
                <el-carousel-item
                  v-for="(img,index) in xList"
                  :key="index"
                >
                  <img
                    :src="el.imgUrl"
                    v-for="(el,i) in img.content"
                    :key="i"
                  >
                </el-carousel-item>
              </el-carousel>
            </div>
            <div
              v-show="show==2"
            >
              <el-carousel
                trigger="click"
                arrow="never"
                height="147px"
                :autoplay="false"
                :interval="0"
              >
                <el-carousel-item
                  v-for="(img,index) in yList"
                  :key="index"
                >
                  <img
                    :src="el.imgUrl"
                    v-for="(el,i) in img.content"
                    :key="i"
                  >
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>

记得将要循环的数组分割成每五项内容再形成一个新数组，外面是一个大数组包裹，这样循环起来就可以形成一屏五张图轮播。

var arr = [];
        for (var i = 0; i < this.xList.length; i += 5) {
            arr.push(this.xList.slice(i, i + 5));
        }
        this.xList = [];
        arr.forEach(item => {
            if (!(item == '' || item == null || item == 'undefined')) {
                this.xList.push({
                    content: item,
                });
            }
        });

修改z-index样式

.el-carousel__item {
    z-index: -1;
}
.el-carousel__item.is-active {
    z-index: 1;
}

3.jquery slider完美完成这项功能

<div>
                        <div class="x">
                            <div class="bd">
                                <ul class="bd-inner-ul">
                                    <li class="bd-inner-li">
                                        <ul>
                                            <li>
                                                <img src="images/x01.png" alt="">
                                            </li>
                                            <li>
                                                <img src="images/x02.png" alt="">
                                            </li>
                                            <li>
                                                <img src="images/x03.png" alt="">
                                            </li>
                                            <li>
                                                <img src="images/x04.png" alt="">
                                            </li>
                                            <li>
                                                <img src="images/x05.png" alt="">
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="bd-inner-li">
                                        <ul>
                                            <li>
                                                <img src="images/x06.png" alt="">
                                            </li>
                                            <li>
                                                <img src="images/x07.png" alt="">
                                            </li>
                                            <li>
                                                <img src="images/x08.png" alt="">
                                            </li>
                                            <li>
                                                <img src="images/x09.png" alt="">
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                            <div class="hd">
                                <ul>
                                    <li></li>
                                    <li></li>
                                </ul>
                            </div>
                        </div>
                        <div class="y">
                            <div class="bd">
                                <ul class="bd-inner-ul">
                                    <li class="bd-inner-li">
                                        <ul>
                                            <li>
                                                <img src="images/y01.png" alt="">
                                            </li>
                                            <li>
                                                <img src="images/y02.png" alt="">
                                            </li>
                                            <li>
                                                <img src="images/y03.png" alt="">
                                            </li>
                                            <li>
                                                <img src="images/y04.png" alt="">
                                            </li>
                                            <li>
                                                <img src="images/y05.png" alt="">
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                            <div class="hd">
                                <ul>
                                    <li class="on"></li>
                                </ul>
                            </div>
                        </div>
                    </div>

 <script src="images/jquery-1.8.3.min.js"></script>
 <script src="images/jquery.SuperSlide.2.1.1.js"></script>
    <script>
        $(function () {
            $(".x").show();
            $(".y").hide();
        })
    </script>
    $(".x").slide({
            mainCell: ".bd ul",
            trigger: "click"
        });
        $(".y").slide({
            mainCell: ".bd ul",
            trigger: "click"
        });
        $(".title li").click(function () {
            var index = $(this).index();
            $(this).addClass('active');
            $(this).siblings().eq(0).removeClass('active');
            if (index == 0) {
                $(".x").show();
                $(".y").hide();
            } else {
                $(".x").show();
                $(".y").hide();
            }
        })

至此解决这项问题