html+js+css练手小项目

文章目录

练手小项目
- 前言
- 1.多轮播图
- - 1.1 效果展示
  - 1.2 实现思路
  - - 1.2.1 三张轮播图
    - 1.2.2 左侧轮播图
  - 1.2.3 右侧轮播图
  - 1.2.4 整体结合
- 2.图片变色
- - - 2.1 效果展示
    - 2.2 实现

练手小项目

☀️作者简介：大家好我是言不及行yyds
🐋个人主页：言不及行yyds的CSDN博客
🎁系列专栏：【前端】

前言

今天给大家带来两个练手小项目

多轮播图
图片变色

1.多轮播图

1.1 效果展示

多轮播图

请添加图片描述

1.2 实现思路

实现该小项目主要有三块内容

三张图片依次从上而下展示
左侧轮播图
右侧轮播图

1.2.1 三张轮播图

实现思路：

三张图片一行排列，最外面的盒子设置position: relative;
为每张图片设置position: absolute; top: -100%
设置不同的左偏移量
通过animation实现由 top:-100%到top:0%;

html部分

 <div class="content">........<div class="first" id="first"><img src="./images/1.jfif" class="firstImg1"><img src="./images/2.jfif" class="firstImg2"><img src="./images/3.jfif" class="firstImg3"></div></div>

css 部分

.content{width:1200px;height:530px;margin:150px auto;
}
.first{width:1200px;height:530px;display:flex;position: relative;
}
.first img{width:300px;height:530px;
}.firstImg1{position: absolute; top: -100%; left:0;animation: img1 2s forwards; 
}.firstImg2{position: absolute; top: -100%; left:300px;animation: img1 4s forwards; 
}.firstImg3{position: absolute; top: -100%; left:600px;animation: img1 5s forwards; 
}@keyframes img1{from{top:-100%;}to{top:0;}
}

1.2.2 左侧轮播图

实现思路：通过设置img的src来展示不同的图片

html部分

<div class="content"><div class="imgs" id="imgs"><div class="left"><img src="./images/1.jfif" id="left"></div>......</div>......</div>

js部分

let LeftImgs=document.getElementById('left')
let LeftNth=2
let LeftIndex=0
function handelLeft(){let timeIr=nullclearInterval(timeIr)timeIr=setInterval(() => {LeftIndex+=1if(LeftIndex > LeftNth){LeftIndex=0LeftImgs.src=`./images/1.jfif`}else{LeftImgs.src=`./images/${LeftIndex+1}.jfif`}}, 5000);
}
handelLeft()

css

.imgs{width:1200px;height:530px;display: flex;
}
.left{width:300px;height:100%;
}
.left img{width:300px;position: absolute;
}

1.2.3 右侧轮播图

html部分

<div class="content"><div class="imgs" id="imgs">.....<div class="right"><img src="./images/2-1.jfif" id="right"></div></div>......</div>

css部分

.right{width:900px;height:530px;
}
.right img{width:900px;height:530px;position: absolute;animation: imgChange 1s infinite;
}

js部分

function handelRight(){let timeIr=nullclearInterval(timeIr)timeIr=setInterval(() => {RightIndex+=1if(RightIndex > RightNth){RightIndex=0RightImgs.src=`./images/2-1.jfif`}else{RightImgs.src=`./images/2-${RightIndex+1}.jfif`}}, 1000);
}

1.2.4 整体结合

初始状态: display 三张图片 :block 左右轮播图none
一段时间后: display 三张图片 :none 左右轮播图block
全部代码如下

html 部分

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./index.css">
</head>
<body><div class="content"><div class="imgs" id="imgs"><div class="left"><img src="./images/1.jfif" id="left"></div><div class="right"><img src="./images/2-1.jfif" id="right"></div></div><div class="first" id="first"><img src="./images/1.jfif" class="firstImg1"><img src="./images/2.jfif" class="firstImg2"><img src="./images/3.jfif" class="firstImg3"></div></div><script src="./1.js"></script>
</body>

css 部分

.content{width:1200px;height:530px;margin:150px auto;
}
.imgs{width:1200px;height:530px;display: flex;
}
.left{width:300px;height:100%;
}
.left img{width:300px;position: absolute;
}
.right{width:900px;height:530px;
}
.right img{width:900px;height:530px;position: absolute;animation: imgChange 1s infinite;
}
.first{width:1200px;height:530px;display:flex;position: relative;
}
.first img{width:300px;height:530px;
}.firstImg1{position: absolute; top: -100%; left:0;animation: img1 2s forwards; 
}.firstImg2{position: absolute; top: -100%; left:300px;animation: img1 4s forwards; 
}.firstImg3{position: absolute; top: -100%; left:600px;animation: img1 5s forwards; 
}@keyframes img1{from{top:-100%;}to{top:0;}
}
@keyframes imgChange {from{transform: scale(0.5);}to{transform: scale(1);}
}

js部分

let LeftImgs=document.getElementById('left')
let LeftNth=2
let LeftIndex=0let RightImgs=document.getElementById('right')
let Right=document.querySelector('.right')
let RightNth=14
let RightIndex=0let first=document.getElementById('first')
let imgs=document.getElementById('imgs')function handelLeft(){let timeIr=nullclearInterval(timeIr)timeIr=setInterval(() => {LeftIndex+=1if(LeftIndex > LeftNth){LeftIndex=0LeftImgs.src=`./images/1.jfif`}else{LeftImgs.src=`./images/${LeftIndex+1}.jfif`}}, 5000);
}function handelRight(){let timeIr=nullclearInterval(timeIr)timeIr=setInterval(() => {RightIndex+=1if(RightIndex > RightNth){RightIndex=0RightImgs.src=`./images/2-1.jfif`}else{RightImgs.src=`./images/2-${RightIndex+1}.jfif`}}, 1000);
}window.onload = function(){addAudio()
}function addAudio() {let audio=document.createElement('audio')audio.controls = true //这样控件才能显示出来 audio.autoplay=trueaudio.preload = 'auto';audio.src='./Dino Sor - Geisha (3D环绕版).mp3'document.body.appendChild(audio)
}imgs.style.display='none'
setTimeout(()=>{first.style.display='none'imgs.style.display='block'Right.style.margin='-530px 0px 0px 300px'handelLeft()handelRight()
},5000)

2.图片变色

2.1 效果展示

请添加图片描述

2.2 实现

实现思路

通过css的filter: grayscale(100%);来实现对图片进行处理
通过css的clip-path对生成的内容进行切割

扩展

filter: grayscale(100%); 是CSS中的一个过滤器应用，
它将图像转换为完全的灰度。
这意味着图片中的所有颜色都会被转换成不同程度的灰色，
从而创建出黑白效果
clip-path 允许你裁剪元素的可见区域，
只显示元素的某一部分。
这个属性可以使用预定义的裁剪形状或自定义的路径来实现

html 部分

<div class="content"><ul><li><div class="other"></div><img src="./images/1.webp" alt=""><p>Charles Aubert de La Chesnaye</p></li><li><div class="other"></div><img src="./images/2.webp" alt=""><p>Gilles Trottier and Catherine Loyseau</p></li><li><div class="other"></div><img src="./images/3.webp" alt=""><p>Antoine Trottier Desruisseaux</p></li><li><div class="other"></div><img src="./images/4.webp" alt=""><p>Marie-Catherine Trottier</p></li></ul></div>

css部分

body{background-color: #1d1d1d;height:100vh;overflow: hidden;
}
.content{margin:300px auto;width:900px;height:400px;
}
.content ul{width:100%;height:100%;list-style: none;display:grid;grid-template-columns: repeat(4,1fr);gap:15px;
}
li img{width:170px;height:161px;position: relative;
}
li{width:100%;height:100%;text-align: center;color:#726f6f;font-size: 26px;filter: grayscale(100%);
}
li:hover{filter: grayscale(0%);color:#fff;position: relative;
}
li:hover .other{display:block;animation: img1 3s forwards; 
}
.other{content: '';position: absolute;top:-30px;left:30px;width:144px;height:144px;border:1px solid #f8ece7;border-radius: 50%;display:none;clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 80%);
}
@keyframes img1 {from{opacity: 0;}to{opacity: 1;}
}