欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

滚动列表实现

程序员文章站 2022-05-29 18:18:01
...

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);

6. 完整代码

github: https://github.com/jrac909/scrollDemo.git

相关标签: 前端效果的实现