<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .outer{

            width: 790px;

            height: 340px;

            border: 1px solid red;

            margin: 100px auto;

            position: relative;

        }

        .img{

            list-style: none;

            padding: 0;

        }

        .img li{

            position: absolute;

            top: 0;

            left: 0;

        }

        .num{

            position: absolute;

            list-style: none;

            bottom: 20px;

            left: 300px;

        }

        .num li{

            display: inline-block;

            width: 30px;

            height: 30px;

            background-color: white;

            color: black;

            text-align: center;

            line-height: 30px;

            border-radius: 50%;

            margin-left: 8px;

        }

        .num .active{

            background-color: red;

        }

        .btn{

            position: absolute;

            width: 30px;

            height: 60px;

            background-color: grey;

            opacity: 0.5;

            font-size: 28px;

            text-align: center;

            line-height: 60px;

            font-weight: 800;

            top:50%;

            margin-top: -30px;

        }

        .leftBtn{

            left: 0;

        }

        .rightBtn{

            right: 0;

        }

        .hide{

            display: none;

        }

    </style>

</head>

<body>

<div class="outer">

    <ul class="img">

        <li><a href=""><img src="data:images/JDimg/1.jpg" alt=""></a></li>

        <li class="hide"><a href=""><img src="data:images/JDimg/2.jpg" alt=""></a></li>

        <li class="hide"><a href=""><img src="data:images/JDimg/3.jpg" alt=""></a></li>

        <li class="hide"><a href=""><img src="data:images/JDimg/4.jpg" alt=""></a></li>

        <li class="hide"><a href=""><img src="data:images/JDimg/5.jpg" alt=""></a></li>

    </ul>

    <ul class="num">

        <li class="active">1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

    </ul>

    <div class="leftBtn btn"> < </div>

    <div class="rightBtn btn"> > </div>

</div>

</body>

</html>

css实现轮播效果图的更多相关文章

  1. 纯CSS焦点轮播效果-功能可扩展

    个人博客: http://mcchen.club 纯CSS3实现模拟焦点轮播效果,支持JQ等扩展各项功能.废话少说,直接贴代码. <!DOCTYPE html> <html> ...

  2. Jquery图片轮播和CSS图片轮播

    学习Jquery以后,很多时候觉得比写源生代码要简单一点.我们用JQuery做了一个图片轮播的动画,感觉比写CSS要简单一些.下面我来具体讲一下是怎么用JQuery来写. <body> & ...

  3. 纯CSS实现轮播图效果，你不知道的CSS3黑科技

    前言 轮播图已经是一个很常见的东西,尤其是在各大App的首页顶部栏,经常会轮番显示不同的图片. 一提到轮播图如何实现时,很多人的第一反应就是使用Javascript的定时器,当然这种方法是可以实现的. ...

  4. 用 CSS 做轮播图

    对于用 css 实现一个轮播图的缘由,是那时候刚开始接触前端,完全还不懂 js.但是有一个项目(就是一个用来应付面试的作品)需要做一个轮播的效果,当时第一反应就是用 css3 自定义动画 -webki ...

  5. 基于css制作轮播图的部分效果

    在轮播图中,我们可以通过鼠标在特定位置上的滑动来实现元素背景的改变.通常在制作轮播图时,我们首先想到的是js中的交互.可是,如果我们无法使用js,只能单纯的靠css又该如何实现这一效果呢?下面,本人将 ...

  6. Jquery实现轮播效果图

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  7. 拓展-教你手把手用纯CSS写轮播图

    先看成品图[示例网址:][1] [1]: https://huruji.github.io/css-imitate-js/slider/index.html一.随便说几句####css3动画效果的强大 ...

  8. 使用css实现轮播图

    使用css3实现图片轮播 前言:实现图片轮播的方式有很多种 ,例如js ,css 等等. 本文主要讲述使用纯css3实现轮播图 工具介绍: 使用的编辑器: Hbuilder 进入正题 html代码: ...

  9. 使用css制作轮播图

    <!--HTML代码--> <!DOCTYPE html> <html lang="en"><head> <meta char ...

随机推荐

  1. 【bzoj3439】Kpm的MC密码 可持久化Trie树

    题目描述 背景 想Kpm当年为了防止别人随便进入他的MC,给他的PC设了各种奇怪的密码和验证问题(不要问我他是怎么设的...),于是乎,他现在理所当然地忘记了密码,只能来解答那些神奇的身份验证问题了. ...

  2. BZOJ1879 [Sdoi2009]Bill的挑战 【状压dp】

    题目 输入格式 本题包含多组数据. 第一行:一个整数T,表示数据的个数. 对于每组数据: 第一行:两个整数,N和K(含义如题目表述). 接下来N行:每行一个字符串. T ≤ 5,M ≤ 15,字符串长 ...

  3. 刷题总结——解方程(NOIP2014)

    题目: 题目描述 已知多项式方程: a0+a1x+a2x2+…+anxn＝0 求这个方程在[1,m]内的整数解(n 和 m 均为正整数). 输入格式 输入共 n+2 行. 第一行包含 2 个整数 n. ...

  4. Eclipse + Apache Axis2 发布SOAP WebService（三）第一个程序Hello Axis2 SOAP！

    因为Axis2同时支持SOAP和RESTful的WebService开发. 我的目标主要是RESTful,这里简单记录一个SOAP的小例子: 原文地址:https://jingyan.baidu.co ...

  5. Github管理 第一步：在Eclipse中导入既存Github Java Project

    1.前提 从官网下载的最新版本的Eclipse已经集成了Github插件,所以忽略了配置说明. 如果在下面的步骤中你找不到Git的设定目录,可能你的Eclipse中还没有Github,请自行解决. 2 ...

  6. 学习orm框架及一些看法

    首先说说我对现在主流的ORM框架的一些看法: 优点: 让程序员不再关注数据库细节,专心在业务逻辑上,程序员可以不懂数据库就可以开发系统. 让数据库迁移变的非常方便,如果系统需要更改使用的数据库,直接改 ...

  7. SEO总结（一）

  8. 50深入理解C指针之---指针与别名

    一.size_t:用于安全表示长度,所有平台和系统都会解析成自己对应的长度 1.定义:size_t类型表示C中任何对象所能表示的最大长度,是个无符号整数:常常定义在stdio.h或stdlib.h中 ...

  9. 使用 IntelliJ IDEA 开发 Android 应用程序时配置 Allatori 进行代码混淆

    IntelliJ IDEA 提供了非常强大的 Android 开发支持,就连 Google 官方推荐的 Android Studio 其实也是 IntelliJ IDEA 的一个 Android 开发 ...

  10. 转：c++ Oracle OCCI 编程

    原地址http://blog.sina.com.cn/s/blog_53a72add01015zj4.html 找不到具体的出处,只好不写了. OCCI数据库ORACLE编程步骤1． 配置环境(1)  ...