静态轮播图

最新推荐文章于 2023-05-07 01:24:12 发布
最新推荐文章于 2023-05-07 01:24:12 发布
阅读量158 收藏 1
点赞数
文章标签： xhtml
原文链接：http://www.cnblogs.com/snow52132/p/7171271.html
版权 
 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5 <title></title>
 6 <link href="css/demo.css" rel="stylesheet" />
 7 </head>
 8 <body>
 9 <div id="dlunbo">
10 <div id="igs">
11 <div class="ig"><img src="img/1_1.jpg" /></div>
12 <div class="ig"><img src="img/1_2.jpg" /></div>
13 <div class="ig"><img src="img/1_3.png" /></div>
14 <div class="ig"><img src="img/1_4.jpg" /></div>
15 <div class="ig"><img src="img/1_5.jpg" /></div>
16 </div>
17 <ul id="tabs">
18 <li class="tab"></li>
19 <li class="tab"></li>
20 <li class="tab"></li>
21 <li class="tab"></li>
22 <li class="tab"></li>
23 </ul>
24 <div class="btn btn1" >&lt;</div>
25 <div class="btn btn2">&gt;</div>
26 </div>
27 </body>
28 </html>
 1 *{
 2 margin:0px;
 3 padding:0px;
 4 list-style-type:none;
 5 }
 6 #dlunbo{
 7 width:500px;
 8 height:330px;
 9 position:absolute;
10 top:50%;
11 margin-top:-166px;
12 left:50%;
13 margin-left:-250px;
14 }
15 .ig{
16 position:absolute;
17 }
18 img{
19 width:500px;
20 height:330px;
21 }
22 #tabs{
23 position:absolute;
24 top:300px;
25 left:200px;
26 }
27 .tab{
28 width:20px;
29 height:20px;
30 border:solid 1px #ffffff;
31 float:left;
32 margin-left:5px;
33 border-radius:100%;
34 cursor:pointer;
35 }
36 .btn{
37 width:30px;
38 height:50px;
39 position:absolute;
40 background:rgba(0,0,0,0.5);
41 color:#fff;
42 text-align:center;
43 line-height:50px;
44 font-size:30px;
45 top:50%;
46 margin-top:-25px;
47 cursor:pointer;
48 }
49 .btn1{
50 left:0px;
51 }
52 .btn2{
53 right:0px;
54 }

 

转载于:https://www.cnblogs.com/snow52132/p/7171271.html

weixin_33859231
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
静态轮播图（只用HTML和css）
07-17
只用html和css写代码，有左右按钮，有浮点导航栏，鼠标移动到哪个左右按钮或浮点，那个按钮和浮点就会变色
轮播图静态
qq_44899153的博客
05-24 407
轮播图静态静态轮播图代码 链接: link. 静态轮播图效果图 静态轮播图代码 HTML代码,即轮播图静态框架 <div class="all" id='box'> <div class="screen" id="scrren">//<!--装轮播图片的盒子--> <ul id=...
html、css 实现轮播图的静态样式
热门推荐
Zhangguohao666的博客
12-09 1万+
利用html、css实现轮播图（静态的，我只实现轮播图的基本样式）
静态轮播图布局
可爱的我可爱的code
08-19 2151
直接贴代码了 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;轮播图静态布局&lt;/title&gt; &lt;style&gt; * {
vue轮播图大屏，静态网页轮播图，html轮播图
02-27
代码简介：vue+element+html静态网页大屏轮播图，可设置轮播图间隔时间，源码简洁明了，同时增加访问页面初始化进入的loading加载的效果，通过element集成，由于element框架的优越性，可非常灵活对轮播图进行拓展和...
Binner轮播图(Kotlin)
08-10
此资源是Binner轮播图，可应用于广告位，类似于淘宝主页轮播。此资源用kotlin写的，我还有java版本在我的下载资源中。
LOL轮播图静态布局.html
05-18
学习了一段时间的JavaScript总觉得并不是非常熟练，写一个静态LOL轮播图练练手。 轮播图在许多网站上都可以看到，像淘宝，京东等电商网站的首页，是不可或缺的页面元素。 先来看看实现效果吧~
jQuery轮播图插件，背景图实现轮播图，轮播图可增加文字
02-27
jQuery轮播图、图片切换、图片轮播 代码简介：兼容IE8的jQuery轮播图插件是一款兼容性很好的，使用非常简单的网站焦点图代码，依赖jquery和pageSwitch.js来实现轮播效果，轮播图以背景图的方式插入到当前页面进行...
【轮播图静态实现】
mango660的博客
03-18 461
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
JS零基础入门——07（轮播图静态效果）
m0_65410668的博客
04-29 136
lol 轮播图静态效果
CSS静态轮播图制作
python_UTF_8的博客
07-20 843
用到的环境：pycharm2021、python3.6 小编给大家带来CSS静态轮播图的制作 先看一下效果图: 第一步：打开pycharm 建一个新的项目，创建一个HTML5的文件 找几张自己觉得不错的图片 第二步：先进行排版布局，我们要清楚轮播图最基本的元素（箭头、图片、圆圈）、可以参考一下某东上的轮播图 ...
前端实战项目：网易云静态页面——轮播图
weixin_62917800的博客
05-07 1484
PC端网易云静态页面第二部分——轮播图的制作
一个静态的图片轮播器的代码
李蓝箫
04-13 3471
可以添加动态链接的，呵呵style="filter:revealTrans(duration=1)"> var obj,first,total,cn,delay=2000function window.onload(){obj=document.getElementById("turn") //捕获ID为turn的对象first=1 //第一张图片的路径信息total=5 //最后一张图片
静态轮播及HTML5新增
qq_46492364的博客
03-14 355
文章目录前言一、静态轮播图布局二、HTML51.新增语义化标签2.多媒体音频标签3.多媒体视频标签4.新增input表单5.新增表单属性总结 前言 css大部分学完了，今天学习一下静态轮播，后面学一下HTML5。坚持住。 一、静态轮播图布局 代码如下（示例）： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-C.
css习题（用html和css写一个静态的轮播图）
weixin_46611729的博客
07-17 1404
以下是HTML页面的代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>中国的流浪猫</title> <link rel="stylesheet" type="text/css" href="regality.css"> </head> <body> <div class
利用JavaScript实现静态轮播图
weixin_45457515的博客
08-19 490
本篇例举的是静态轮播图，动态轮播图会在以后实现 如图所示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g...
CSS轮播图详解 html+css
你好呀，很高兴你在看这里~
05-16 7523
效果（源码在最后）： 这个CSS轮播图效果是比较常见的了，b站一搜就有很多，不过视频对一些关键步骤一敲而过，不好理解，既然如此，我们也做一个~ 并不难的，详解如下： 实现（可一步一步实现）： 1. 老样子定义基本全局样式，复制即可： *{ margin: 0; padding: 0; box-sizing: border-box; } body{ height: 1
JS简单的几种静态轮播方式
stphencurry的博客
02-18 320
今天博主想就我学习到的微薄知识，和大家讨论一下js中的图片轮播。 首先了解一下博主知道的几种轮播的方式（比较通俗的解释）： 第一种随着图片的改变，下面的原点也跟着变 第二种鼠标点击小圆点，图片跟着改变 第三种点击小图片，大图片跟着改变 那么接下来介绍第一种： CSS样式： <style> *{padding: 0;margin: 0;border: none;l...
写一个静态轮播图的html代码
最新发布
06-09
好的，以下是一个简单的静态轮播图的HTML代码： ```html <!DOCTYPE html> <html> <head> <title>静态轮播图</title> <style> .container { width: 500px; height: 300px; overflow: hidden; position: relative; } .slide { position: absolute; top: 0; left: 0; width: 500px; height: 300px; opacity: 0; transition: opacity 1s ease-in-out; } .slide.active { opacity: 1; transition: opacity 1s ease-in-out; } .slide:first-child { opacity: 1; } .nav { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; } .nav button { width: 10px; height: 10px; border-radius: 50%; margin: 0 5px; background-color: #ccc; border: none; cursor: pointer; } .nav button.active { background-color: #333; } </style> </head> <body> <div class="container"> <div class="slide active"> <img src="slide1.jpg" alt="Slide 1"> </div> <div class="slide"> <img src="slide2.jpg" alt="Slide 2"> </div> <div class="slide"> <img src="slide3.jpg" alt="Slide 3"> </div> <div class="slide"> <img src="slide4.jpg" alt="Slide 4"> </div> <div class="nav"> <button class="active"></button> <button></button> <button></button> <button></button> </div> </div> <script> let slides = document.querySelectorAll('.slide'); let buttons = document.querySelectorAll('.nav button'); let currentSlide = 0; function nextSlide() { slides[currentSlide].classList.remove('active'); buttons[currentSlide].classList.remove('active'); currentSlide = (currentSlide + 1) % slides.length; slides[currentSlide].classList.add('active'); buttons[currentSlide].classList.add('active'); } let slideInterval = setInterval(nextSlide, 5000); </script> </body> </html> ``` 这个代码中包含一个容器 `.container` 和多个轮播项 `.slide`，以及一个导航栏 `.nav`。轮播项使用 CSS 的 `position: absolute` 属性定位，导航栏使用 flexbox 布局，并且通过 JavaScript 实现轮播的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值