首页
源码插件
代码笔记
精品资源
美图音乐
点滴记忆
关于博主
友情链接
搜索
搜索
热门搜索
BingGan
她说爱你,没说只爱你!
累计撰写
93
篇文章
累计收到
32
条评论
首页
导航
首页
源码插件
代码笔记
精品资源
美图音乐
点滴记忆
关于博主
友情链接
旗下站点
Bg‖ 在线音乐
Bg‖ Mail邮件
Bg‖ SEO外链
包含标签 【css】 的文章
2024-5-22
简单的HTML网页图片轮播自动切换!附源码!
效果图可以看本站,我这里就上传了一张。 html部分: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1,maximum-scale=1,user-scalable=no" /> <!--引入CSS代码--> <link rel="stylesheet" type="text/css" href="./css/index.css"/> <!--引入Js代码--> <script src="./js/index.js"></script> <title>Js实现轮播图</title> </head> <body> <div class="lunbo"> <div class="content"> <ul id="item"> <li class="item"> <a href="#"><img src="img/pic1.jpg" ></a> </li> <li class="item"> <a href="#"><img src="img/pic2.jpg" ></a> </li> <li class="item"> <a href="#"><img src="img/pic3.jpg" ></a> </li> <li class="item"> <a href="#"><img src="img/pic4.jpg" ></a> </li> <li class="item"> <a href="#"><img src="img/pic5.jpg" ></a> </li> </ul> <div id="btn-left"><</div> <div id="btn-right">></div> <ul id="circle"> <li class="circle"></li> <li class="circle"></li> <li class="circle"></li> <li class="circle"></li> <li class="circle"></li> </ul> </div> </div> </body> </html> </html> CSS部分: *{ margin: 0; padding: 0; } a{ list-style: none; } li{ list-style: none; } .lunbo{ width: 100%; } .content{ width: 800px; height: 300px; margin: 20px auto; position: relative; } #item{ width: 100%; height: 100%; } .item{ position: absolute; opacity: 0; transition: all 1s; } .item.active{ opacity:1; } img{ width: 100%; } #btn-left{ width: 30px; height: 69px; font-size: 30px; color: white; background-color:rgba(0,0,0,0.4); line-height: 69px; padding-left:5px; z-index: 10;/*始终显示在图片的上层*/ position: absolute; left: 0; top: 50%; transform: translateY(-60%);/*使按钮向上偏移居中对齐*/ cursor: pointer; opacity: 0;/*平时隐藏*/ } .lunbo:hover #btn-left{ /*鼠标滑入,显示图标*/ opacity: 1; } #btn-right{ width: 26px; height: 69px; font-size: 30px; color: white; background-color:rgba(0,0,0,0.4); line-height: 69px; padding-left: 5px; z-index: 10; position: absolute; right: 0; top: 50%; cursor: pointer; opacity: 0; transform: translateY(-60%); } .lunbo:hover #btn-right{ opacity: 1; } #circle{ height: 20px; display: flex; position: absolute; bottom: 35px; right: 25px; } .circle{ width: 10px; height: 10px; border-radius: 10px; border: 2px solid white; background: rgba(0,0,0,0.4); cursor: pointer; margin: 5px; } .white{ background-color: #FFFFFF; } js部分: window.onload=function(){ var items=document.getElementsByClassName("item"); var circles=document.getElementsByClassName("circle"); var leftBtn=document.getElementById("btn-left"); var rightBtn=document.getElementById("btn-right"); var content=document.querySelector('.content'); var index=0; var timer=null; //清除class var clearclass=function(){ for(let i=0;i<items.length;i++){ items[i].className="item"; circles[i].className="circle"; circles[i].setAttribute("num",i); } } /*只显示一个class*/ function move(){ clearclass(); items[index].className="item active"; circles[index].className="circle white"; } //点击右边按钮切换下一张图片 rightBtn.onclick=function(){ if(index<items.length-1){ index++; } else{ index=0; } move(); } //点击左边按钮切换上一张图片 leftBtn.onclick=function(){ if(index<items.length){ index--; } else{ index=items.length-1; } move(); } //开始定时器,点击右边按钮,实现轮播 timer=setInterval(function(){ rightBtn.onclick(); },1500) //点击圆点时,跳转到对应图片 for(var i=0;i<circles.length;i++){ circles[i].addEventListener("click",function(){ var point_index=this.getAttribute("num"); index=point_index; move(); }) } //鼠标移入清除定时器,并开启一个三秒的定时器,使慢慢转动 content.onmouseover=function(){ clearInterval(timer); timer=setInterval(function(){ rightBtn.onclick(); },3000) } //鼠标移出又开启定时器 content.onmouseleave=function(){ clearInterval(timer); timer=setInterval(function(){ rightBtn.onclick(); },1500) } }
2024年-5月-22日
207 阅读
0 评论
代码笔记
2024-5-6
实用CSS代码整合
收集了一些比较常见且实用的CSS代码片段,今天做个笔记
2024年-5月-6日
174 阅读
0 评论
代码笔记
2024-4-17
分享三套前端高颜值登录页面
前端登录界面是每个网站必不可少的页面(单页除外),是一个应用的颜值担当,首次进入看见的可能就是登录界面,记录一下自认为比较好看的uniapp登录页面,需要直接直接复制过来修改一下即可,只有静态页面,并未做逻辑上面的东西,便于在这个基础上做调整。
2024年-4月-17日
318 阅读
0 评论
源码分享
2024-3-11
emlog Pro版本邮件通知美化版
emlog Pro邮件通知美化版 直接程序后台把代码复制进去即可 不需要依赖插件
2024年-3月-11日
350 阅读
1 评论
代码笔记