新增第149个小实例:可切换方向的无缝衔接图片滚动效果
This commit is contained in:
parent
0065741176
commit
b61588146e
|
@ -155,4 +155,5 @@
|
|||
145. HTML5+CSS3小实例:3D分割图片悬停拼接特效
|
||||
146. HTML5+CSS3+JS小实例:祝福版的3D标签云动画特效
|
||||
147. HTML5+CSS3小实例:关门式的图文组合悬停特效
|
||||
148. HTML5+CSS3+JS小实例:简约的垂直选项卡
|
||||
148. HTML5+CSS3+JS小实例:简约的垂直选项卡
|
||||
149. HTML5+CSS3+JS小实例:可切换方向的无缝衔接图片滚动效果
|
|
@ -0,0 +1,58 @@
|
|||
*{
|
||||
/* 初始化 */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body{
|
||||
/* 100%窗口高度 */
|
||||
height: 100vh;
|
||||
/* 弹性布局 居中显示 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #1b1b1b;
|
||||
}
|
||||
.container{
|
||||
width: 800px;
|
||||
/* 相对定位 */
|
||||
position: relative;
|
||||
/* 溢出隐藏 */
|
||||
overflow: hidden;
|
||||
}
|
||||
ul{
|
||||
width: 800px;
|
||||
height: 150px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
li{
|
||||
list-style: none;
|
||||
height: 100%;
|
||||
padding-right: 20px;
|
||||
}
|
||||
li img{
|
||||
width: 200px;
|
||||
height: 150px;
|
||||
/* 保持原有尺寸比例,裁切长边 */
|
||||
object-fit: cover;
|
||||
/* 图片定位正中间 */
|
||||
object-position: center;
|
||||
}
|
||||
.btns{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top: 50px;
|
||||
}
|
||||
.btn{
|
||||
color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
padding: 5px 15px;
|
||||
margin: 0 15px;
|
||||
border-radius: 3px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn:hover{
|
||||
background-color: rgba(255,255,255,0.2);
|
||||
}
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
|
||||
<title>可切换方向的无缝衔接图片滚动效果</title>
|
||||
<link rel="stylesheet" href="149.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<ul>
|
||||
<li><img src="/images/op1/1.jpg" alt=""></li>
|
||||
<li><img src="/images/op1/2.jpg" alt=""></li>
|
||||
<li><img src="/images/op1/3.jpg" alt=""></li>
|
||||
<li><img src="/images/op1/4.jpg" alt=""></li>
|
||||
</ul>
|
||||
<div class="btns">
|
||||
<div class="btn">← 向左走</div>
|
||||
<div class="btn">向右走 →</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="149.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,45 @@
|
|||
// 获取ul元素,并为其追加一组相同图片(为了做到无缝衔接)
|
||||
let ul=document.querySelector('ul');
|
||||
ul.innerHTML=ul.innerHTML+ul.innerHTML;
|
||||
// 获取所有的li元素和.btn元素
|
||||
let lis=document.querySelectorAll('li');
|
||||
let btns=document.querySelectorAll('.btn');
|
||||
// 每次滚动的跨度(正数向右,负数向左,默认向左滚动)
|
||||
let spa=-2;
|
||||
// 计算并设置ul的总宽度
|
||||
ul.style.width=lis[0].offsetWidth*lis.length+'px';
|
||||
|
||||
// 滚动函数
|
||||
function move(){
|
||||
if(ul.offsetLeft < -ul.offsetWidth/2){
|
||||
// 向左走时,判断图片是否走完(这里本来时4张图片,加上后面追加的4张相同的,共有8张,所以需要用ul的总宽度来除以2进行判断),走完时重新开始
|
||||
ul.style.left='0';
|
||||
}
|
||||
if(ul.offsetLeft > 0){
|
||||
// 向右走时,判断图片是否走完
|
||||
ul.style.left=-ul.offsetWidth/2+'px';
|
||||
}
|
||||
// 设置偏移位置
|
||||
ul.style.left=ul.offsetLeft+spa+'px';
|
||||
}
|
||||
|
||||
// 定时器,每30毫秒执行一次move函数
|
||||
let timer=setInterval(move,30);
|
||||
|
||||
// 为ul绑定事件,悬停停止,移开滚动
|
||||
ul.addEventListener('mousemove',function(){
|
||||
clearInterval(timer);
|
||||
})
|
||||
ul.addEventListener('mouseout',function(){
|
||||
timer=setInterval(move,30);
|
||||
})
|
||||
|
||||
// 为两个按钮绑定点击事件
|
||||
// 向左走
|
||||
btns[0].addEventListener('click',function(){
|
||||
spa=-2;
|
||||
})
|
||||
// 向右走
|
||||
btns[1].addEventListener('click',function(){
|
||||
spa=2;
|
||||
})
|
Loading…
Reference in New Issue