滚动列表实现

最新推荐文章于 2024-08-05 08:00:00 发布

-sea-

最新推荐文章于 2024-08-05 08:00:00 发布

阅读量1.3k

点赞数 3

分类专栏：前端效果的实现

本文链接：https://blog.csdn.net/qq_34695703/article/details/109716472

版权

前端效果的实现专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1. 效果图

2. 文件结构

jquery 文件：链接: https://pan.baidu.com/s/1GdW7PfcFo_Pf9c_hRKiaCw 提取码: nqq1 复制这段内容后打开百度网盘手机App，操作更方便哦

3. index.html 基础结构

4. CSS样式

5. JS 逻辑

// 模拟数据
	let dataList = [
		{ name: '张一山' },{ name: '王晓义' },{ name: '李光洁' },{ name: '张雨绮' },{ name: '陈乔恩' },{ name: '何炅' },{ name: '谢娜' },{ name: '蔡徐坤' },{ name: '王紫娇' },{ name: '刘思彤' },{ name: '吴昕' },{ name: '维嘉' },{ name: '杜海涛' },{ name: '杨幂' },{ name: '刘诗诗' },{ name: '汪涵' },{ name: '杨迪' },{ name: '杨洋' },{ name: '虞书欣' },{ name: '杨超越' }
	];
	// 计算第一次渲染条数:显示条数（>=4渲染四条，否则全部渲染完）
    let len = dataList.length >= 4?4:dataList.length;
    // 获取父容器
    let $parent = $('#scroll-wrap');
    // 先清空容器内内容
    $parent.empty();
    // 遍历添加默认滚动项
    for (let i=0; i<len; i++) {
	    $parent.append(`
	        <div class="scroll-item">
	            <div class="part1-top-item-name">${ dataList[i].name }</div>
	        </div>`);
    };
    // 去掉前面已经渲染的内容
    dataList = dataList.slice(len);
    // 创建定时器
    let timer = null;
    let isFirst = false;
    timer = setInterval(function() {
        if (dataList.length > 0) {
            let item = dataList.shift();
            $parent.append(`
	        <div class="scroll-item">
	            <div class="part1-top-item-name">${ item.name }</div>
	        </div>`);
	        // 位置重置为0
            $('.scroll-item').css({ top: 0 });
            
            if (isFirst){
                $('.scroll-item').first().remove();
            }
        }
        $('.scroll-item').animate({
            top: "-123px"
        }, 500);
        isFirst=true;
    }, 2000);