<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无限滚动</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
*{margin: 0;padding: 0}
.box{width: 540px;height: 384px;border: 1px solid #ccc;margin: 100px auto;overflow: hidden;}
ul{width: 1620px;height: 384px;list-style: none;position: relative;background: #000}
li img{width: 100%;height: 100%;}
li{float: left;width: 270px;height: 384px;}
</style>
</head>
<body>
<!--结构六张图片，最后两张和前面两张相同，box作为窗口，ul相当于滚动条-->
<div class="box">
<ul>
<li><img src="img/movie01.jpg"></li>
<li><img src="img/movie02
这是一个使用jQuery实现的无限滚动效果示例。通过设置定时器改变`ul`元素的`left`属性，使得图片列表产生平滑滚动的效果。当鼠标悬停在图片上时，滚动暂停，当前图片亮度增强，相邻图片变暗。鼠标离开后，滚动恢复并清除淡入淡出效果。
最低0.47元/天 解锁文章
857
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
