博主使用了纯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. QT中的一些信号

    QLineEdit: 通过改变QLineEdit的echoMode(),可以设置其属性,比如以密码的形式输入. 文本的长度可以由maxLength()限制,可以通过使用validator()或者inp ...

  2. window.open新打开窗口与新开标签页

    最近在使用window.open时忽略了一个细节问题:window.open新打开一个窗口,但是有时却是新打开一个窗口有时打开一个新标签页.虽然对一般的需求来说,这个两种情况都无所谓,但是对于那种有强 ...

  3. jQuery基础（3）- ajax

    一.jQuery的ajax 1.什么是ajax AJAX = 异步的javascript和XML(Asynchronous Javascript and XML). 简言之,在不重载整个网页的情况下, ...

  4. zookeeper安装小记

    做了5个节点,但是查看状态的时候,发现 ./zkServer.sh statusJMX enabled by defaultUsing config: /opt/zookeeper/bin/../co ...

  5. C标准库pow函数精度问题。

    #include <stdio.h> int main () { int temp,i; double a=2.4568; unsigned ]; ;i<;i++) { temp=( ...

  6. iOS-xcconfig环境变量那些事（配置环境的配置）

    前言 在配置宏定义参数时,会发现一个问题,在需要临时修改或者测试一些数据时,修改宏,如果不修改,就多写一个,注释掉原来的,然后测试后,再换回来,当然了,如果一两个宏,可以这样,但是,如果每次改的比较多 ...

  7. WebDriver高级应用实例（9）

    9.1封装操作表格的公用类 目的:能够使自己编写操作表格的公用类,并基于公用类进行表格中的元素的各类操作 被测网页的网址的HTML代码: <html> <body> <t ...

  8. Django 模板相关

    Django 模板相关 视图函数只是直接返回文本,而在实际生产环境中其实很少这样用,因为实际的页面大多是带有样式的HTML代码,这可以让浏览器渲染出非常漂亮的页面.目前市面上有非常多的模板系统,其中最 ...

  9. nc命令简介

    nc介绍 ncat/nc 既是一个端口扫描工具,也是一款安全工具,还能是一款监测工具,甚至可以做为一个简单的 TCP 代理. 在大多数 Debian 发行版中,nc 是默认可用的,它会在安装系统的过程 ...

  10. 一口一口吃掉Hexo（五）

    如果你想得到更好的阅读效果,请访问我的个人网站 ,版权所有,未经许可不得转载! 通过前四节的内容,相信你已经能够在你的虚拟主机上成功部署网站,并且能够通过你自己的域名访问你的网站了,接下来要做的就是日 ...