博主使用了纯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. PHP程序员职业发展路线

    重点:把LNMP搞熟练(核心是安装配置基本操作) 1.Linux: 基本命令.操作.启动.基本服务配置(包括rpm安装文件,各种服务配置等): 会写简单的shell脚本和awk/sed 脚本命令等. ...

  2. Spring boot mybatis : Error creating bean with name 'com.github.pagehelper.autoconfigure.MapperAutoConfiguration': Invocation of init method failed;

    报错截图: 解决方法: 只能扫描到自定义的mapper,不能扫描到其他文件. @MapperScan("com.streamax.s17.tms.dao.pper.repository&qu ...

  3. Unity项目接入应用宝SDK实现截图功能

    Unity项目接入应用宝SDK实现截图功能 问题由来 点击应用宝悬浮窗 如图所示 左下角有一个截图按钮 需要解决那些问题 截图信息需要由游戏引擎提供 SDK获取截图信息为同步 但是Unity引擎没有提 ...

  4. Redis学习系列四Hash(字典)

    一.简介 Redis中的Hash字典相当于C#中的Hashtable,是一种无序字典,内存存储了很对的键值对,实现上和Hashtable一样,都是"数组+链表"二维结构,都是对关键 ...

  5. 兼容IE9以下和非IE浏览器的原生js事件绑定函数

    事件绑定函数的demo如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "htt ...

  6. 只用一招,让你Maven依赖下载速度快如闪电

    一.背景 众所周知,Maven对于依赖的管理让我们程序员感觉爽的不要不要的,但是由于这货是国外出的,所以在我们从中央仓库下载依赖的时候,速度如蜗牛一般,让人不能忍,并且这也是大多数程序员都会遇到的问题 ...

  7. 详解C#泛型（二）

    一.自定义泛型方法(Generic Method),将类型参数用作参数列表或返回值的类型: void MyFunc<T>() //声明具有一个类型参数的泛型方法 { Type generi ...

  8. find_package()的查找*.cmake的顺序

    1. find_package(<Name>)命令首先会在模块路径中寻找 Find<name>.cmake,这是查找库的一个典型方式.具体查找路径依次为CMake: 变量${C ...

  9. centos7 安装配置postgresql

    考:https://www.linuxidc.com/Linux/2017-10/147536.htm http://blog.51cto.com/12482328/2090844 https://w ...

  10. postgresql逻辑结构--表空间（四）

    一.创建表空间 1. 语法:create tablespace tablespace_name [owner user_name] location 'directory' postgres=# cr ...