博主使用了纯HTML和CSS实现了JD的轮播图，没有加动态效果，主要是使用了定位的知识。

　　 ，如图为两个侧边箭头图片(其实实际中应该使用CSS3的图标字体，这里没有使用)。

　　

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>LunBo</title>
  6.     <style>
  7.         *{
  8.             padding: 0;
  9.             margin: 0;
  10.         }
  11.         li{
  12.             list-style: none;
  13.         }
  14.         .lunbo{
  15.             margin: 40px auto;
  16.             height: 470px;
  17.             width: 590px;
  18.             position: relative;
  19.         }
  20.         .left,.right{
  21.             position: absolute;
  22.             top: 50%;
  23.             margin-top: -18px;
  24.             width: 24px;
  25.             height: 36px;
  26.         }
  27.         .left{
  28.             left: 0;
  29.         }
  30.         .right{
  31.             right: 0;
  32.         }
  33.         .lunbo ul{
  34.             height: 18px;
  35.             width: 151px;
  36.             background: rgba(255,255,255,.3);
  37.             position: absolute;
  38.             bottom: 10px;
  39.             left: 50%;
  40.             margin-left: -76px;
  41.             border-radius: 10px;
  42.         }
  43.         .lunbo li{
  44.             height: 14px;
  45.             width: 14px;
  46.             border-radius: 50%;
  47.             background-color: #fff;
  48.             float: left;
  49.             margin: 2px;
  50.         }
  51.         .lunbo .current{
  52.             background-color: #f40;
  53.         }
  54.     </style>
  55. </head>
  56. <body>
  57.     <div class="lunbo">
  58.         <img src="data:images/lunbo.jpg" alt="">
  59.         <div class="left"><img src="data:images/left.png" alt=""></div>
  60.         <!-- 也可以使用链接然后使用backgrounf -->
  61.         <div class="right"><img src="data:images/right.png" alt=""></div>
  62.         <ul>
  63.             <li class="current"></li>
  64.             <li></li>
  65.             <li></li>
  66.             <li></li>
  67.             <li></li>
  68.             <li></li>
  69.             <li></li>
  70.             <li></li>
  71.         </ul>
  72.     </div>
  73. </body>
  74. </html>

实现了如下效果

纯HTML和CSS实现JD轮播图的更多相关文章

  1. HTML+CSS+Javascript实现轮播图效果

    HTML+CSS+Javascript实现轮播图效果 注意:根据自己图片大小来更改轮播图大小. <!doctype html> <html> <head> < ...

  2. css3 - 纯css实现一个轮播图

    这是我上一次的面试题.一晃两个月过去了. 从前都是拿原理骗人,把怎么实现的思路说出来. 我今天又被人问到了,才想起来真正码出来.码出来效果说明一切: 以上gif,只用到了5张图片,一个html+css ...

  3. JD轮播图代码

    <!DOCTYPE html>   <html>   <head>   <title>jd网站的轮播图效果</title>   <me ...

  4. jquery里面的attr和css来设置轮播图竟然效果不一致

    /*封装$*/ // window.$=HTMLElement.prototype.$=function(selector){ // var elems=(this==window?document: ...

  5. css动画属性--轮播图效果

    通过css的动画属性实现轮播图的显示效果 代码如下: 主体部分: <div id="move"> <ul> <li><img src=&q ...

  6. 用html +js+css 实现页面轮播图效果

    html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...

  7. 纯js实现淘宝商城轮播图

    需求: 循环无缝自动轮播3张图片,点击左右箭头可以手动切换图片,鼠标点击轮播图下面的小圆点会跳转到对应的第几张图片.鼠标放到轮播图的图片上时不再自动轮播,鼠标移开之后又继续轮播.效果图: 下面是htm ...

  8. JavaScript+HTML+CSS 无缝滚动轮播图的两种方式

    第一种方式 在轮播图最后添加第一张,一张重复的图片. 点击前一张,到了第一张,将父级oList移动到最后一张(也就是添加的重复的第一张),在进行后续动画. 点击下一张,到了最后一张(也就是添加的重复的 ...

  9. 纯CSS实现轮播图效果，你不知道的CSS3黑科技

    前言 轮播图已经是一个很常见的东西,尤其是在各大App的首页顶部栏,经常会轮番显示不同的图片. 一提到轮播图如何实现时,很多人的第一反应就是使用Javascript的定时器,当然这种方法是可以实现的. ...

随机推荐

  1. js中两种for循环的使用

    针对两种for循环的使用 1. for in循环的使用环境     可用在字符串.数组.对象中, 需注意:其中遍历对象得到的是每个key  的value值  2. for 变量递加的方式        ...

  2. OCP新题，2019题库出现大量新题，062-第22题

    choose two Your database is running in ARCHIVELOG mode. You want to take a consistent whole database ...

  3. 对"某V皮"N服务器节点的一次后渗透测试

    i春秋作家:jasonx 前言:由于这个VPN节点服务器是之前拿到的,一直没时间做进一步渗透,昨天看到我蛋总表哥发红包,然后我运气爆表抢了个运气王,再加上好久没发文章了,所以就抽空测试下咯. 0×01 ...

  4. Zookeeper客户端Curator使用详解

    Zookeeper客户端Curator使用详解 前提 最近刚好用到了zookeeper,做了一个基于SpringBoot.Curator.Bootstrap写了一个可视化的Web应用: zookeep ...

  5. Swift5 语言参考(五) 语句

    在Swift中,有三种语句:简单语句,编译器控制语句和控制流语句.简单语句是最常见的,由表达式或声明组成.编译器控制语句允许程序更改编译器行为的各个方面,并包括条件编译块和行控制语句. 控制流语句用于 ...

  6. GPS轨迹数据可视化的三种途径

    有一阵子没写过博客了,最近因为自己小队申请了项目有并且要帮研究生做一些数据处理的小任务,接触到可视化.这里介绍最近学到的了三种方法. 第一种是用python. 这里原理是用matplotlib里面的s ...

  7. docker容器启动参数

    docker run [option] 镜像名 [向启动容器中传入的命令] 常用可选参数说明: -i 表示以“交互模式”运行容器 -t 表示容器启动后会进入其命令行.加入这两个参数后,容器创建就能登录 ...

  8. 解决修改css或js文件，浏览器缓存更新问题。

    在搜索引擎中搜索关键字.htaccess 缓存,你可以搜索到很多关于设置网站文件缓存的教程,通过设置可以将css.js等不太经常更新的文件缓存在浏览器端,这样访客每次访问你的网站的时候,浏览器就可以从 ...

  9. 原生js，jquery ajax请求以及jsonp的调用

    ajax    是用来处理前后端交互的技术,可以改善用户体验,其本质是    XMLHttpRequest,异步访问服务器并发送请求数据,服务器返回响应的数据,以页面无刷新的效果改变页面中的局部内容  ...

  10. 关于Python2和Python3之间的文本模型改变

    原文地址:http://python-notes.curiousefficiency.org/en/latest/python3/questions_and_answers.html#what-act ...