项目中遇到的bug:elementui走马灯

1.最近项目中也是用到走马灯手动添加切换图片这个功能。

        大家应该都知道当走马灯轮播前两张图片和后两张图片的轮播方向和后面图片的方向不一致,就很尴尬。在网上查阅了好多博客基本都是手动添加两张图片,比如:[1,2]改成[2,1,2,1]。在项目中我们显然不可能把数据写死,这是不现实的。

大致说下官方提供的方法:

<el-carousel indicator-position="outside">
        <el-carousel-item v-for="item in 4" :key="item">
            <h3>{{ item }}</h3>
        </el-carousel-item>
    </el-carousel>
// setActiveItem	手动切换幻灯片	需要切换的幻灯片的索引,从 0 开始;或相应 el-carousel-item 的 name 属性值
// prev	切换至上一张幻灯片	
// next	切换至下一张幻灯片
// autoplay	是否自动切换	boolean	—	true
// indicator-position	指示器的位置	string	outside/none	
// direction	走马灯展示的方向	string	horizontal/vertical	horizontal

 2.原生js-html封装轮播图

  html部分

<div class="main w">
        <div class="focus">
            <!-- 左边按钮 -->
            <a href="#" class="arrow-left">&lt;</a>
            <!-- 右边按钮 -->
            <a href="#" class="arrow-right">&gt;</a>
            <!-- 轮播图部分 -->
            <ul>
                <li>
                    <a href="#"><img src="./img/focus.jpeg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="./img/focus1.jpeg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="./img/focus2.jpg" alt=""></a>
                </li>
                <!-- 这一张的作用是为了后面做无缝链接 -->
                <!-- <li>
                    <a href="#"><img src="./img/focus.jpeg" alt=""></a>
                </li> -->
            </ul>
            <!-- 下面小圆点部分 -->
            <!-- <ol class="circle"> -->
            <!-- </ol> -->
        </div>
    </div>

  css部分

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

        a {
            text-decoration: none;
        }

        .w {
            overflow: hidden;
            position: relative;
            width: 720px;
            height: 187px;
            /* margin: 200px auto; */
        }

        ul li {
            list-style: none;
        }

        .main .focus ul {
            position: absolute;
            left: 0;
            top: 0;
            width: 600%;
        }

        .main .focus ul li {
            float: left;
        }

        .main .focus ul li img {
            width: 720px;
            height: 187px
        }

        a[class^='arrow'] {
            /* 开始时隐藏箭头 */
            display: block;
            z-index: 1;
            position: absolute;
            cursor: pointer;
            width: 30px;
            height: 50px;
            color: #fff;
            text-align: center;
            line-height: 50px;
            font-weight: 700;
            background-color: rgba(0, 0, 0, .3);
        }

        .arrow-left {
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }

        .arrow-right {
            right: 0;
            top: 50%;
            transform: translateY(-50%);
        }
    </style>

js部分:

<script>
    // 滑动函数
    function moves (obj, target, callback) {
        window.clearInterval(obj.timer);
        obj.timer = window.setInterval(function () {
            var step = (target - obj.offsetLeft) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if (obj.offsetLeft == target) {
                window.clearInterval(obj.timer);
                if (callback) {
                    callback();
                }
            } else {
                obj.style.left = obj.offsetLeft + step + 'px';
            }
        }, 15)
    }
    // 移动到图片上的时候左右的箭头才显示出来 离开后又隐藏
    var focusing = document.querySelector('.focus');
    // 获取左箭头
    var arrowleft = document.querySelector('.arrow-left');
    // 获取右箭头
    var arrowright = document.querySelector('.arrow-right');
    var ul = document.querySelector('ul');
    console.log(ul.children.length);
    // 获得图片张数
    var len = ul.children.length;
    // 收移动到focus的时候显示箭头
    // focusing.addEventListener('mouseenter', function () {
    //     arrowleft.style.display = 'block';
    //     arrowright.style.display = 'block';

    // })
    // // 鼠标离开又隐藏
    // focusing.addEventListener('mouseleave', function () {
    //     arrowleft.style.display = 'none';
    //     arrowright.style.display = 'none';
    // })
    // 点击右边箭头 设置一个num进行移动距离
    var num = 0;
    arrowright.addEventListener('click', function () {
        console.log("1111111111111111");
        if (num == len - 1) {
            ul.style.left = 0;
            num = 0;
        }
        num++;
        moves(ul, -num * ul.children[0].offsetWidth);
    })
    // 点击左边箭头
    arrowleft.addEventListener('click', function () {
        if (num == 0) {
            num = len - 1;
            ul.style.left = -num * ul.children[0].offsetWidth;
        }
        num--;
        moves(ul, -num * ul.children[0].offsetWidth);
    })
</script>

 

3.使用swiper组件(推荐)

swiper官网:Swiper中文网-轮播图幻灯片js插件,H5页面前端开发

有几个注意事项:vue2.0项目应该使用swiper5

 

 

//导入js
import Swiper from "swiper";
//引入css
import "swiper/css/swiper.min.css";

 然后根据自己需求结合官网搞里头就行了

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

bug天选之子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值