新增第102个小实例：切片式轮播图
This commit is contained in:
DESKTOP-BM6RJU5\wyanh
parent
fd62418d9c
commit
d3a43568c1
|
|
@ -105,4 +105,5 @@
|
|||
98. HTML5+CSS3小实例：创意条纹背景的图像悬停效果
|
||||
99. HTML5+CSS3小实例：炫彩的发光字特效
|
||||
100. HTML5+CSS3+JS小实例：黑色的简约下拉菜单
|
||||
101. HTML5+CSS3小实例：浮雕效果的彩色loading动画
|
||||
101. HTML5+CSS3小实例：浮雕效果的彩色loading动画
|
||||
102. HTML5+CSS3+JS小实例：切片式轮播图
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
*{
|
||||
/* 初始化 */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body{
|
||||
/* 100%窗口高度 */
|
||||
height: 100vh;
|
||||
/* 弹性布局 水平+垂直居中 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* 背景径向渐变 */
|
||||
background: radial-gradient(circle at top,#444,#000);
|
||||
}
|
||||
.container{
|
||||
width: 650px;
|
||||
/* 弹性布局 均匀排列每个元素 */
|
||||
display: flex;
|
||||
/* 每个元素之间的间隔相等 */
|
||||
justify-content: space-evenly;
|
||||
/* 溢出隐藏 */
|
||||
overflow: hidden;
|
||||
/* 加个倒影 */
|
||||
-webkit-box-reflect: below 13px linear-gradient(transparent 70%,rgba(0,0,0,0.2));
|
||||
}
|
||||
.big-box{
|
||||
width: 400px;
|
||||
height: 500px;
|
||||
/* 背景图片保持原有尺寸比例，裁切长边 */
|
||||
background-size: cover;
|
||||
/* 设置过渡 */
|
||||
transition: 0.4s;
|
||||
}
|
||||
.small-box{
|
||||
width: 200px;
|
||||
height: 500px;
|
||||
/* 弹性布局 垂直排列 均匀排列每个元素 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.small-box .img{
|
||||
/* 相对定位 */
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 90px;
|
||||
right: 0;
|
||||
transition: 0.5s;
|
||||
}
|
||||
.small-box .img img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* 保持原有尺寸比例，裁切长边 */
|
||||
object-fit: cover;
|
||||
/* 绝对定位 */
|
||||
position: absolute;
|
||||
right: 0;
|
||||
/* 设置过渡 */
|
||||
transition: 0.5s;
|
||||
}
|
||||
.small-box .img.active{
|
||||
opacity: 0;
|
||||
right: 250px;
|
||||
}
|
||||
.small-box .img:hover img{
|
||||
opacity: 0;
|
||||
right: 250px;
|
||||
}
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<!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="../css/102.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="big-box"></div>
|
||||
<div class="small-box">
|
||||
<div class="img"><img src="../images/op/1.jpg" alt=""></div>
|
||||
<div class="img"><img src="../images/op/2.jpg" alt=""></div>
|
||||
<div class="img"><img src="../images/op/3.jpg" alt=""></div>
|
||||
<div class="img"><img src="../images/op/4.jpg" alt=""></div>
|
||||
<div class="img"><img src="../images/op/5.jpg" alt=""></div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
// 获取需要操作的元素
|
||||
// 左边大图
|
||||
let big_box=document.querySelector(".big-box");
|
||||
// 图片集合
|
||||
let imgs=document.getElementsByClassName("img");
|
||||
// 定时器
|
||||
let timer=null;
|
||||
// 当前图片下标
|
||||
let index=0;
|
||||
|
||||
// 重置函数
|
||||
function reset(){
|
||||
for(let i=0;i<imgs.length;i++){
|
||||
imgs[i].className="img";
|
||||
}
|
||||
}
|
||||
// 选中函数
|
||||
function selected(){
|
||||
reset();
|
||||
imgs[index].className="img active";
|
||||
}
|
||||
// 轮播函数
|
||||
function play(){
|
||||
timer=setInterval(function(){
|
||||
selected();
|
||||
index++;
|
||||
big_box.style.backgroundImage="url(../images/op/"+index+".jpg)";
|
||||
if(index==5){
|
||||
index=0;
|
||||
}
|
||||
},1500);
|
||||
}
|
||||
// 循环绑定每个小图片的鼠标移动事件
|
||||
for(let i=0;i<imgs.length;i++){
|
||||
// 鼠标移动到小图片上时触发
|
||||
imgs[i].onmousemove=function(){
|
||||
// 左边大图变成当前的小图片
|
||||
big_box.style.backgroundImage="url(../images/op/"+(i+1)+".jpg)";
|
||||
// 执行重置函数并关闭定时器
|
||||
reset();
|
||||
clearInterval(timer);
|
||||
// 更新当前图片下标并执行轮播
|
||||
index=i+1;
|
||||
if(index==5){
|
||||
index=0;
|
||||
}
|
||||
play();
|
||||
}
|
||||
}
|
||||
// 执行轮播
|
||||
play();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue