layui-表格轮播

162 阅读1分钟

方法一:

html代码

<div style="margin:10px 10px;width:306px;height:215px;">
			<table style="width:100%;height:215px;">
				<thead style="background: rgba(0,0,0,0.3);height:40px;">
					<tr
						style="font-size: 14px;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;color: #FFFFFF;">
							<th style="width:96px;">姓名</th>
							<th style="width:96px;">班级</th>
							<th style="width:96px;">学号</th>
					</tr>
				</thead>
				<tbody
					style="background: rgba(0,0,0,0.05);height: 175px;position: absolute;overflow: hidden;">
					<tr>
						<td style="width:96px;">112</td>
						<td style="width:96px;">01</td>
						<td style="width:96px;">01423</td>
					</tr>
					<tr>
						<td style="width:96px;">张三</td>
						<td style="width:96px;">2班</td>
						<td style="width:96px;">2000520</td>
					</tr>
					<tr>
						<td style="width:96px;">张大呀</td>
						<td style="width:96px;">3班</td>
						<td style="width:96px;">2000220</td>
					</tr>
					<tr>
						<td style="width:96px;">旺物流</td>
						<td style="width:96px;">1班</td>
						<td style="width:96px;">20001220</td>
					</tr>
					<tr>
						<td style="width:96px;">李四</td>
						<td style="width:96px;">6班</td>
						<td style="width:96px;">20002320</td>
					</tr>
					<tr>
						<td style="width:96px;">张小三</td>
						<td style="width:96px;">12班</td>
						<td style="width:96px;">20005123</td>
					</tr>
				</tbody>
			</table>
			<div>
			</div>
		</div>

javascript 代码

  //滚动条到底时的高度,等于0时说明没有滚动条
		var scrollHeight = $('tbody')[0].scrollHeight - $('tbody').innerHeight()
		$(function () {
			if (scrollHeight > 0) {
				interval = setInterval(MoveScroll, 50)
			}
		})

		$('tbody').hover(function () {
			if (scrollHeight > 0) {
				clearInterval(interval)
			}
		}, function () {
			if (scrollHeight > 0) {
				clearInterval(interval)
				interval = setInterval(MoveScroll, 50)
			}
		})

		function MoveScroll() {
			var scroll = $('tbody').scrollTop()
			// console.log(scroll)
			//滚动条到底时从头重新滚动
			if (scroll >= scrollHeight) {
				// 返回顶部
				scroll = 0;
			} else {
				scroll++
			}
			$('tbody').scrollTop(scroll)
		}

css代码

	tr td {
                text-align: center;
                height: 36px;
            }

方法2 -等待后续更新