swiper实现跑马灯效果

解决bug的wilelm

已于 2024-01-25 12:49:07 修改

阅读量1.2k

点赞数 11

文章标签： html html5 前端

于 2024-01-25 12:44:18 首次发布

本文链接：https://blog.csdn.net/Wilelm/article/details/135841508

版权

需要先引入js

https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.2/anime.min.js
在这里插入图片描述

JS:

xTrans = [];
    anime.set('.box', {
        translateX: function (el, i, l) {
            xTrans[i] = { x: i * 427 };
            return i * 427;
        },
    });

    anime({
        targets: xTrans,
        duration: 10000, //走一周持续时间
        easing: 'linear',
        x: "+=2135",
        loop: true,
        update: function (anim) {
            anime.set('.box', {
                translateX: function (el, i, l) {
                    console.log(i + "#" + xTrans[i].x)
                    return xTrans[i].x % 2135
                }
            });
        }
    })

HTML:

CSS:

 .list {
                position: relative;
                overflow: hidden;
                height: 27.7rem;
                width: 170.8rem;

                .boxes {
                    position: relative;
                    left: -427px;

                    .box {
                        width: 427px;
                        height: 27.7rem;
                        position: absolute;
                        // margin-right: 2.7rem;
                    }
                }
            }

 <div class="list">
                        <!-- for start -->
                        <a href="#" class="item">
                            <div class="img_box">
                                <img class="img_cover" src="./images/index_product2_1.png" alt="">
                            </div>
                            <div class="title">
                                <span class="index">01</span>EDGED BASIN
                            </div>
                            <div class="more_div more2">
                                VIEW MORE
                            </div>
                        </a>
                        <!-- for end -->

                        <a href="#" class="item">
                            <div class="img_box">
                                <img class="img_cover" src="./images/index_product2_1.png" alt="">
                            </div>
                            <div class="title">
                                <span class="index">02</span>EDGED BASIN
                            </div>
                            <div class="more_div more2">
                                VIEW MORE
                            </div>
                        </a>

                        <a href="#" class="item">
                            <div class="img_box">
                                <img class="img_cover" src="./images/index_product2_1.png" alt="">
                            </div>
                            <div class="title">
                                <span class="index">03</span>EDGED BASIN
                            </div>
                            <div class="more_div more2">
                                VIEW MORE
                            </div>
                        </a>
                    </div>

在swiper下载下来的demo运行是没问题的，但是改过宽度之后会有跳动和提前结束的问题，问题一般都是偏移量和总宽度设置的问题，demo宽度是显示7个的宽度，实际有8个元素
在这里插入图片描述

swiperdemo:
帖子链接：
http://bbs.swiper.com.cn/forum.php?mod=viewthread&tid=24271
demo下载链接：
http://bbs.swiper.com.cn/forum.php?mod=attachment&aid=MTMyNHwyNDU4MmVkNHwxNzA2MTU3NzAyfDg4NjU0fDI0Mjcx

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<title>Animejs demon</title>
	<!-- <script src="js/anime.min.js"></script> -->
	
	<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.2/anime.min.js" integrity="sha512-aNMyYYxdIxIaot0Y1/PLuEu3eipGCmsEUBrUq+7aVyPGMFH8z0eTP0tkqAvv34fzN6z+201d3T8HPb1svWSKHQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
	
	<!-- www.animejs.cn-->
	<style>
		body {
			margin: 0;
		}

		.wrapper {
			width: 700px; //1、!!这里总宽度是7个
			height: 100px;
			position: relative;
			margin: 40px auto 0;
			background: #ccc;
			overflow: hidden;
		}

		.box {
			width: 100px;
			height: 100px;
			position: absolute;
			background: red;
			font-size: 25px;
			line-height: 100px;
			text-align: center;
		}

		.box:nth-child(odd) {
			background: #f8f8f8;
		}

		.box:nth-child(even) {
			background: #eee;
		}

		.boxes {
			position: relative;
			left: -100px; //2、!!偏移量是一个元素的宽度
		}
	</style>
</head>

<body>
	<div class="wrapper">
		<div class="boxes">
			<div class="box">1</div>
			<div class="box">2</div>
			<div class="box">3</div>
			<div class="box">4</div>
			<div class="box">5</div>
			<div class="box">6</div>
			<div class="box">7</div>
			<div class="box">8</div>
			<!-- 3、!!这里是8个元素 -->
		</div>
	</div>
	<script>
		xTrans = [];
		anime.set('.box', {
			translateX: function (el, i, l) {
				xTrans[i] = { x: i * 100 };
				return i * 100;
			},
		});

		anime({
			targets: xTrans,
			duration: 6000, //走一周持续时间
			easing: 'linear',
			x: "+=800", //4、!!这里是8个的的总宽度，不是7个
			loop: true,
			update: function (anim) {
				anime.set('.box', {
					translateX: function (el, i, l) {
						return xTrans[i].x % 800 
						//5、!!这里是8个的的总宽度，不是7个
					}
				});
			}
		})
	</script>
</body>

</html>