css - 双虹云博客-站长博客|网站源码|emlog Pro|软件模板|QQZZZ.CN
首页 源码插件 代码笔记 精品资源 美图音乐 点滴记忆 关于博主 友情链接

热门搜索

  • 360官方API构建高效便捷的图片上传单页源码
  • 黄金首饰价格查询系统api源码
  • qq账号价值评估系统html单页源码
侧边栏壁纸
博主头像
BingGan

她说爱你,没说只爱你!

  • 累计撰写 102 篇文章
  • 累计收到 54 条评论
  • 首页
  • 导航
    • 首页
    • 源码插件
    • 代码笔记
    • 精品资源
    • 美图音乐
    • 点滴记忆
    • 关于博主
    • 友情链接
  • 旗下站点
    • Bg‖ 在线音乐
    • Bg‖ Mail邮件
    • Bg‖ SEO外链
包含标签 【css】 的文章
  • 简单的HTML网页图片轮播自动切换!附源码! 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日
    • 520 阅读
    • 0 评论
    代码笔记
  • 实用CSS代码整合 2024-5-6
    实用CSS代码整合 收集了一些比较常见且实用的CSS代码片段,今天做个笔记
    • 2024年-5月-6日
    • 437 阅读
    • 0 评论
    代码笔记
  • 分享三套前端高颜值登录页面 2024-4-17
    分享三套前端高颜值登录页面 前端登录界面是每个网站必不可少的页面(单页除外),是一个应用的颜值担当,首次进入看见的可能就是登录界面,记录一下自认为比较好看的uniapp登录页面,需要直接直接复制过来修改一下即可,只有静态页面,并未做逻辑上面的东西,便于在这个基础上做调整。
    • 2024年-4月-17日
    • 497 阅读
    • 0 评论
    源码分享
  • emlog Pro版本邮件通知美化版 2024-3-11
    emlog Pro版本邮件通知美化版 emlog Pro邮件通知美化版 直接程序后台把代码复制进去即可 不需要依赖插件
    • 2024年-3月-11日
    • 512 阅读
    • 1 评论
    代码笔记
博主栏壁纸
博主头像 BingGan

她说爱你,没说只爱你!

102 文章数
54 评论量
  • 360官方API构建高效便捷的图片上传单页源码
  • 黄金首饰价格查询系统api源码
  • qq账号价值评估系统html单页源码
微语
  • BingGan
    2024-08-08 01:44

    我的👶今天满月了🎈

  • BingGan
    2024-03-28 12:05

    浪漫固然重要,但真诚更胜一筹

  • BingGan
    2024-03-24 20:51

    不是电影里的一瞬间 是实实在在的一年365天。

标签
火山引擎 吾爱论坛 吾爱破解 搜索引擎 网站收录 Virtual Audio Cable WaterDrop 引流宝 IP归属地查询 IP地址获取 IP IP查询 BeaconNav Typecho 短网址 Nginx 奇安信 OneTool 蜘蛛日志 SSL 站长工具 emlog插件 go跳转 go 前端 DNS 网页特效 js emlo SU7
分类
  • 点滴记忆  (19)
  • 源码分享  (39)
  • 代码笔记  (23)
  • 美图音乐  (18)
  • 精品资源  (2)
热门文章
  1. 1 360官方API构建高效便捷的图片上传单页源码
    360官方API构建高效便捷的图片上传单页源码
    43 阅读 - 06月24日
  2. 2 黄金首饰价格查询系统api源码
    黄金首饰价格查询系统api源码
    18 阅读 - 06月29日
  3. 3 qq账号价值评估系统html单页源码
    qq账号价值评估系统html单页源码
    12 阅读 - 07月02日
舔狗日记
载入天数...载入时分秒...
sitemap
powered by emlog 皖ICP备17001127号-30