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

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

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>LunBo</title>

    <style>

        *{

            padding: 0;

            margin: 0;

        }

        li{

            list-style: none;

        }

        .lunbo{

            margin: 40px auto;

            height: 470px;

            width: 590px;

            position: relative;

        }

        .left,.right{

            position: absolute;

            top: 50%;

            margin-top: -18px;

            width: 24px;

            height: 36px;

        }

        .left{

            left: 0;

        }

        .right{

            right: 0;

        }

        .lunbo ul{

            height: 18px;

            width: 151px;

            background: rgba(255,255,255,.3);

            position: absolute;

            bottom: 10px;

            left: 50%;

            margin-left: -76px;

            border-radius: 10px;

        }

        .lunbo li{

            height: 14px;

            width: 14px;

            border-radius: 50%;

            background-color: #fff;

            float: left;

            margin: 2px;

        }

        .lunbo .current{

            background-color: #f40;

        }

    </style>

</head>

<body>

    <div class="lunbo">

        <img src="data:images/lunbo.jpg" alt="">

        <div class="left"><img src="data:images/left.png" alt=""></div>

        <!-- 也可以使用链接然后使用backgrounf -->

        <div class="right"><img src="data:images/right.png" alt=""></div>

        <ul>

            <li class="current"></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

        </ul>

    </div>

</body>

</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. Spring IOC 容器源码分析 - 获取单例 bean

    1. 简介 为了写 Spring IOC 容器源码分析系列的文章,我特地写了一篇 Spring IOC 容器的导读文章.在导读一文中,我介绍了 Spring 的一些特性以及阅读 Spring 源码的一 ...

  2. Java中goto和break、continue实现区别

    goto 关键字很早就在程序设计语言中出现.事实上,goto 是汇编语言的程序控制结构的始祖:“若条件 A,则跳到这里:否则跳到那里”.若阅读由几乎所有编译器生成的汇编代码,就会发现程序控制里包含了许 ...

  3. vue.js 常用组件库

    vux github ui demo:https://github.com/airyland/vux Mint UI 项目主页:http://mint-ui.github.io/#!/zh-cndem ...

  4. MariaDB 库的基本操作(2)

    MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护,采用GPL授权许可MariaDB的目的是完全兼容MySQL,包括API和命令行,MySQL由于现在闭源了,而能轻松成为MySQ ...

  5. sed 横排扩展

    sed "$!N;s/\n/KEY/" FILENAME

  6. Java swing皮肤（look and feel）大全

    ########## 优选 ########## Weblaf:非常赞的套件,界面现代.简约.依赖包较少. 有开源也有商业协议,个人最喜欢的皮肤.https://github.com/mgarin/w ...

  7. vue教程2-01 vue生命周期、钩子函数

    vue教程2-01 vue生命周期.钩子函数 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  8. android(java) 开发过程中经验及总结记录

    android(java) 开发过程中经验及总结记录

  9. C# 多线程五之Task(任务)一

    1.简介 为什么MS要推出Task,而不推Thread和ThreadPool,以下是我的见解: (1).Thread的Api并不靠谱,甚至MS自己都不推荐,原因,它将整个Thread类都不开放给Win ...

  10. Qt中QMenu的菜单关闭处理方法

    Qt中qmenu的实现三四千行... 当初有个特殊的需求, 要求菜单的周边带几个像素的阴影, 琢磨了半天, 用QMenu做不来, 就干脆自己用窗口写一个 然而怎么让菜单消失却非常麻烦 1. 点击菜单项 ...