个体户做网站去哪里做,如何代做网站,企业网站公司单位有哪些,wordpress 验证码访问文章目录 练手小项目前言1.多轮播图1.1 效果展示1.2 实现思路1.2.1 三张轮播图1.2.2 左侧轮播图 1.2.3 右侧轮播图1.2.4 整体结合 2.图片变色2.1 效果展示2.2 实现 练手小项目 ☀️作者简介#xff1a;大家好我是言不及行yyds #x1f40b;个人主页#xff1a;言不及行yyds的… 文章目录 练手小项目前言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 classcontent........div classfirst idfirstimg src./images/1.jfif classfirstImg1img src./images/2.jfif classfirstImg2img src./images/3.jfif classfirstImg3/div/divcss 部分 .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 classcontentdiv classimgs idimgsdiv classleftimg src./images/1.jfif idleft/div....../div....../divjs部分 let LeftImgsdocument.getElementById(left)
let LeftNth2
let LeftIndex0
function handelLeft(){let timeIrnullclearInterval(timeIr)timeIrsetInterval(() {LeftIndex1if(LeftIndex LeftNth){LeftIndex0LeftImgs.src./images/1.jfif}else{LeftImgs.src./images/${LeftIndex1}.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 classcontentdiv classimgs idimgs.....div classrightimg src./images/2-1.jfif idright/div/div....../divcss部分 .right{width:900px;height:530px;
}
.right img{width:900px;height:530px;position: absolute;animation: imgChange 1s infinite;
}js部分 function handelRight(){let timeIrnullclearInterval(timeIr)timeIrsetInterval(() {RightIndex1if(RightIndex RightNth){RightIndex0RightImgs.src./images/2-1.jfif}else{RightImgs.src./images/2-${RightIndex1}.jfif}}, 1000);
}1.2.4 整体结合 初始状态: display 三张图片 :block 左右轮播图none 一段时间后: display 三张图片 :none 左右轮播图block 全部代码如下 html 部分 headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet href./index.css
/head
bodydiv classcontentdiv classimgs idimgsdiv classleftimg src./images/1.jfif idleft/divdiv classrightimg src./images/2-1.jfif idright/div/divdiv classfirst idfirstimg src./images/1.jfif classfirstImg1img src./images/2.jfif classfirstImg2img src./images/3.jfif classfirstImg3/div/divscript src./1.js/script
/bodycss 部分 .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 LeftImgsdocument.getElementById(left)
let LeftNth2
let LeftIndex0let RightImgsdocument.getElementById(right)
let Rightdocument.querySelector(.right)
let RightNth14
let RightIndex0let firstdocument.getElementById(first)
let imgsdocument.getElementById(imgs)function handelLeft(){let timeIrnullclearInterval(timeIr)timeIrsetInterval(() {LeftIndex1if(LeftIndex LeftNth){LeftIndex0LeftImgs.src./images/1.jfif}else{LeftImgs.src./images/${LeftIndex1}.jfif}}, 5000);
}function handelRight(){let timeIrnullclearInterval(timeIr)timeIrsetInterval(() {RightIndex1if(RightIndex RightNth){RightIndex0RightImgs.src./images/2-1.jfif}else{RightImgs.src./images/2-${RightIndex1}.jfif}}, 1000);
}window.onload function(){addAudio()
}function addAudio() {let audiodocument.createElement(audio)audio.controls true //这样控件才能显示出来 audio.autoplaytrueaudio.preload auto;audio.src./Dino Sor - Geisha (3D环绕版).mp3document.body.appendChild(audio)
}imgs.style.displaynone
setTimeout((){first.style.displaynoneimgs.style.displayblockRight.style.margin-530px 0px 0px 300pxhandelLeft()handelRight()
},5000)2.图片变色
2.1 效果展示 2.2 实现 实现思路 通过css的filter: grayscale(100%);来实现对图片进行处理通过css的clip-path对生成的内容进行切割 扩展 filter: grayscale(100%); 是CSS中的一个过滤器应用 它将图像转换为完全的灰度。 这意味着图片中的所有颜色都会被转换成不同程度的灰色 从而创建出黑白效果clip-path 允许你裁剪元素的可见区域 只显示元素的某一部分。 这个属性可以使用预定义的裁剪形状或自定义的路径来实现 html 部分 div classcontentullidiv classother/divimg src./images/1.webp altpCharles Aubert de La Chesnaye/p/lilidiv classother/divimg src./images/2.webp altpGilles Trottier and Catherine Loyseau/p/lilidiv classother/divimg src./images/3.webp altpAntoine Trottier Desruisseaux/p/lilidiv classother/divimg src./images/4.webp altpMarie-Catherine Trottier/p/li/ul/divcss部分 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;}
}图片资源链接 好了这次的文章就到这了 如果觉得还不错的话帮忙点个关注吧 希望能给博主点赞哎评论收藏三连一波加粗样式
