博主使用了纯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. 201621123018《Java程序设计》第9周学习报告

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 泛型个人认为可以理解为一种模糊的类型,在里面写入各种方法,程序员可以根据需要再创建具体类型的对象,然后调用泛型 ...

  2. 模拟ssh、黏包、hashlib模块

    一.模拟ssh 1.subprocess模块 ipconfig -all dir subprocess模块是python从2.4版本开始引入的模块.主要用来取代 一些旧的模块方法,如os.system ...

  3. [JavaScript] html5 video标签注意事项

    Chrome 66 禁止声音自动播放 声音无法自动播放这个在IOS/Android上面一直是个惯例,桌面版的Safari在2017年的11版本也宣布禁掉带有声音的多媒体自动播放功能,紧接着在2018年 ...

  4. mongoose 基础api 图表整理

    一.背景 今天看 mongoose 的基础 API,参考了下面的链接做了图表以供查阅. 参考资料: http://www.cnblogs.com/xiaohuochai/p/7215067.html ...

  5. 解决SecureCRT/Xshell无法以root用户连接Ubuntu

    首先执行命令ps -e | grep ssh .查看是否有ssh进程运行. 确认没有ssh运行,且系统未安装openssh.   然后在系统终端界面内输入apt-get update命令. (确保系统 ...

  6. Ruby：多线程队列(Queue)下载博客文章到本地

    Ruby:多线程下载博客文章到本地的完整代码 #encoding:utf-8 require 'net/http' require 'thread' require 'open-uri' requir ...

  7. TFS2018环境搭建一硬件要求

    本文关于微软的团队协作工具TFS2018搭建 1.操作系统要求 TFS可以安装在Windows Server和Windows PC操作系统中,但是TFS2018和2018只支持64位操作系统中,早期的 ...

  8. 再学C/C++ 之 浅析gdb的-g选项

    浅析gdb的-g选项   准备 gdb是Linux下学习C/C++最常用的debug工具.要使用这一强大工具,必须在编译时加上-g选项,生成的目标文件才可以用gdb进行调试. 如,先创建一个test. ...

  9. 全网最详细的启动zkfc进程时，出现INFO zookeeper.ClientCnxn: Opening socket connection to server***/192.168.80.151:2181. Will not attempt to authenticate using SASL (unknown error)解决办法（图文详解）

    不多说,直接上干货! at org.apache.zookeeper.ClientCnxnSocketNIO.doTransport(ClientCnxnSocketNIO.java:) at org ...

  10. Linux的Bash Shell详解

    一.Bash Shell概述 1.什么是bash         bash是Bourne Again Shell的简称,是从unix系统中的sh发展而来的,是用户和Linux内核交互的工具,用户通过b ...