博主使用了纯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. Android------------------RecyclerView学习

    一.多种布局的保存 1.Type->getItemViewType(int position) 2.RecylerView.Holder       : 定一个holder的内部类,里面保存一些 ...

  2. 【有新题】OCP 12c 062出现大量新考题-14

    choose two You plan to upgrade your Oracle Database 9i to Oracle Database 12c. Which two methods can ...

  3. Linux系统Bash的常用功能(9)

    了解了基本的Linux文件文件系统的概念后,我们将更深入的了解一下Linux的其他方面的内容,那就是我们所使用的用户接口,也就是大家常听到的 『Shell』 ,『这个shell并不是黑客反弹的shel ...

  4. Swift5 语言指南(二十五) 自动引用计数(ARC)

    Swift使用自动引用计数(ARC)来跟踪和管理应用程序的内存使用情况.在大多数情况下,这意味着内存管理在Swift中“正常工作”,您不需要自己考虑内存管理.当不再需要这些实例时,ARC会自动释放类实 ...

  5. 一步步Cobol 400 上手自学入门教程02 - 程序结构

    标识部的格式: 标识部(IDENTIFICATION DIVISION) 用来标识程序名称,记录程序的文档记录住处如作者和日期等. 代码范例: IDENTIFICATION DIVISION.PROG ...

  6. Pycharm配置autopep8：自动调整代码为PEP8风格

    关于PEP 8 PEP 8,Style Guide for Python Code,是Python官方推出编码约定,主要是为了保证 Python 编码的风格一致,提高代码的可读性. 官网地址:http ...

  7. Tornado初探

    Tornado 是 FriendFeed 使用的可扩展的非阻塞式 web 服务器及其相关工具的开源版本.这个 Web 框架看起来有些像web.py 或者 Google 的 webapp,不过为了能有效 ...

  8. Oracle 查看当前数据库版本的方法

    常用的有三种方法:   方法一:v$version SQL> select * from v$version; BANNER ---------------------------------- ...

  9. Git for Windows之团队合作

    1.先给项目添加一个成员 输入对方码云邮箱账号,添加成功. 2.登陆,将码云上面的项目克隆到本地 (1).设置全局参数  用户名和邮箱用于push和pull代码 (2).克隆目标项目地址 查看本地文件 ...

  10. 计算机网络 之 TCP和UDP的端口号解析

    前言:今天了解一下tcp和udp报文的端口.发现一直以来都只是知道端口用于区分同一IP的服务器的不同服务,已经端口的大小.在查找traceroute的资料的时候,才了解到一些之前没注意到的东西. (一 ...