这个示例展示了如何使用CSS和JavaScript创建一个类走马灯效果，通过不断平移图片列表来实现无缝滚动。HTML结构包含一个图片列表，CSS用于布局和隐藏超出部分，JavaScript则用于平移动画和鼠标悬停时停止动画的行为。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.proListSub {
width: 1190px;
margin: 0px auto;
position: relative;
}
.proListSub .linkQy {
background: #fff;
padding: 30px 0px;
width: 1090px;
overflow: hidden;
margin: 20px auto;
position: relative;
height: 64px;
box-sizing: content-box;
}
.proListSub .linkQy ul.banFirst,.proListSub .linkQy ul.banLast{
overflow: hidden;
width: 300%;
position: absolute;
top: 30px;
left: 0px;
background: #fff;
list-style: none;
}
.proListSub .linkQy ul.banLast{
left: 100%;
}
.proListSub .linkQy ul.banFirst li,.
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.proListSub {
width: 1190px;
margin: 0px auto;
position: relative;
}
.proListSub .linkQy {
background: #fff;
padding: 30px 0px;
width: 1090px;
overflow: hidden;
margin: 20px auto;
position: relative;
height: 64px;
box-sizing: content-box;
}
.proListSub .linkQy ul.banFirst,.proListSub .linkQy ul.banLast{
overflow: hidden;
width: 300%;
position: absolute;
top: 30px;
left: 0px;
background: #fff;
list-style: none;
}
.proListSub .linkQy ul.banLast{
left: 100%;
}
.proListSub .linkQy ul.banFirst li,.
最低0.47元/天 解锁文章
1454
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
