轮播代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <script src="jquery-3.1.1.js"></script>

    <title>Title</title>

    <style>

        .outer{

            width: 790px;

            height: 340px;

            margin: 80px auto;

            position: relative;

        }

        .img li{

            position: absolute;

            list-style: none;

            top:0;

            left: 0;

        }

        .num{

            position: absolute;

            bottom: 0px;

            left: 280px;

            /*background-color: #dce7f4;*/

            list-style: none;

        }

        .num li{

            display: inline-block;

            width: 18px;

            height: 18px;

            background-color: white;

            border-radius: 50%;

            text-align: center;

            line-height: 18px;

            margin-left: 14px;

        }

        .btn{

            position: absolute;

            top: 50%;

            width: 30px;

            height: 60px;

            background-color: lightgrey;

            color: white;

            text-align: center;

            line-height: 60px;

            font-size: 30px;

            opacity: 0.8;

            margin-top: -30px;

            display: none;

        }

        .left{

            left: 0;

        }

        .right{

            right: 0;

        }

        .outer:hover .btn{

            display: block;

        }

        .num .active{

            background-color: red;

        }

    </style>

</head>

<body>

    <div class="outer">

        <ul class="img">

            <li><a href=""><img src="img/1.jpg" alt=""></a></li>

            <li><a href=""><img src="img/2.jpg" alt=""></a></li>

            <li><a href=""><img src="img/3.jpg" alt=""></a></li>

            <li><a href=""><img src="img/4.jpg" alt=""></a></li>

            <li><a href=""><img src="img/5.jpg" alt=""></a></li>

            <li><a href=""><img src="img/6.jpg" alt=""></a></li>

        </ul>

        <ul class="num ">

            <!--<li class="active"></li>-->

            <!--<li></li>-->

            <!--<li></li>-->

            <!--<li></li>-->

            <!--<li></li>-->

            <!--<li></li>-->

        </ul>

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

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

    </div>

<script>

    // 通过jquery自动创建按钮标签

    var img_num=$(".img li").length;

    for (var j=0;j<(img_num);j++){

        $(".num").append("<li></li>")

    }

    $(".num li").eq(0).addClass("active");

    //手动轮播

    // $(".num li").mouseover(function () {

    //     var index=$(this).index();

    //this不应该加引号

    //     $("this").addClass("active").siblings().removeClass("active")

    //

    // })

    $(".num li").mouseover(function () {

        // var index=$(this).index();

        i=$(this).index();

        $(this).addClass("active").siblings().removeClass("active");

        //以下两种方法都可实现

        // $(".img li").eq(index).show(1).siblings().hide()

        $(".img li").eq(index).stop().fadeIn(200).siblings().stop().fadeOut(200)

    });

    //自动轮播

    var c=setInterval(GO_R,1500);

    var i=0;

    function GO_R() {

        if(i==img_num-1){

            i=-1

        }

        i++;

        $(".num li").eq(i).addClass("active").siblings().removeClass("active");

        $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000)

    }

    function GO_L() {

        if(i==0){

            i=img_num

        }

        i--;

        $(".num li").eq(i).addClass("active").siblings().removeClass("active");

        $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000)

    }

    $(".outer").hover(function () {

        clearInterval(c)

    },function () {

        c=setInterval(GO_R,1500)

    })

    //button加定播

    // $(".right").bind("click",GO_R)

    $(".right").click(GO_R);

    $(".left").click(GO_L);

</script>

</body>

</html>

效果展示：

Python之路【第二十二篇】:轮播图片CSS的更多相关文章

  1. Python之路(第二十二篇) 面向对象初级：概念、类属性

    一.面向对象概念 1. "面向对象(OOP)"是什么? 简单点说,“面向对象”是一种编程范式,而编程范式是按照不同的编程特点总结出来的编程方式.俗话说,条条大路通罗马,也就说我们使 ...

  2. Python开发【第二十二篇】：Web框架之Django【进阶】

    Python开发[第二十二篇]:Web框架之Django[进阶]   猛击这里:http://www.cnblogs.com/wupeiqi/articles/5246483.html 博客园 首页 ...

  3. Python之路(第二十九篇) 面向对象进阶：内置方法补充、异常处理

    一.__new__方法 __init__()是初始化方法,__new__()方法是构造方法,创建一个新的对象 实例化对象的时候,调用__init__()初始化之前,先调用了__new__()方法 __ ...

  4. Python之路(第二十八篇) 面向对象进阶：类的装饰器、元类

    一.类的装饰器 类作为一个对象,也可以被装饰. 例子 def wrap(obj): print("装饰器-----") obj.x = 1 obj.y = 3 obj.z = 5 ...

  5. Python之路(第二十五篇) 面向对象初级：反射、内置方法

    [TOC] 一.反射 反射的概念是由Smith在1982年首次提出的,主要是指程序可以访问.检测和修改它本身状态或行为的一种能力(自省).这一概念的提出很快引发了计算机科学领域关于应用反射性的研究.它 ...

  6. Python之路(第二十四篇) 面向对象初级：多态、封装

    一.多态 多态 多态:一类事物有多种形态,同一种事物的多种形态,动物分为鸡类,猪类.狗类 例子 import abc class H2o(metaclass=abc.ABCMeta): ​ def _ ...

  7. Python之路(第二十六篇) 面向对象进阶：内置方法

    一.__getattribute__ object.__getattribute__(self, name) 无条件被调用,通过实例访问属性.如果class中定义了__getattr__(),则__g ...

  8. Python之路(第十二篇)程序解耦、模块介绍\导入\安装、包

    一.程序解耦 解耦总的一句话来说,减少依赖,抽象业务和逻辑,让各个功能实现独立. 直观理解“解耦”,就是我可以替换某个模块,对原来系统的功能不造成影响.是两个东西原来互相影响,现在让他们独立发展:核心 ...

  9. Python之路【第二十二篇】CMDB项目

    浅谈ITIL TIL即IT基础架构库(Information Technology Infrastructure Library, ITIL,信息技术基础架构库)由英国政府部门CCTA(Central ...

随机推荐

  1. gtibase rpm包制作

    gitbase 是一个很不错的代码分析工具,我们可以直接使用sql来分析团队的代码,以下是rpm 包的制作 简单说明 rpm 包的制作使用了fpm 一个简单,方便可以跨平台的软件包制作工具 gitba ...

  2. pmm 添加proxysql metrics

    pmm 对于proxysql 的管理是基于metrics的进行处理的,使用的是proxysql exporter 对于proxysql exporter的添加,比较简单,我们可以通过独立的额容器运行e ...

  3. eclipseWeb项目如何实现网址发送给外人——内部穿透

    教程:https://blog.csdn.net/Feihongxiansen/article/details/94480480 部署完成后: 打开cmd命令: 暴露端口8081成功: 将eclips ...

  4. 如何查看电脑的GPU信息

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/qq_33690342/article/ ...

  5. Android Sensor 架构深入剖析【转】

    本文转载自: 1.Android sensor架构 Android4.0系统内置对传感器的支持达13种,它们分别是:加速度传感器 (accelerometer).磁力传感器(magnetic fiel ...

  6. 查看apache httpd server中加载了哪些模块

    说明: 有的时候,需要查看当前apache中都加载了哪些模块,通过以下命令进行查看 [root@hadoop1 httpd-]# bin/apachectl -t -D DUMP_MODULES Lo ...

  7. Fiddler抓包Fiddler过滤

    1.User Fiters启用 2.Action Action:Run Filterset now是否运行,Load Filterset加载,Save Filterset保存: 3.Hosts过滤 Z ...

  8. Go 切片：用法和本质

    2011/01/05 引言 Go的切片类型为处理同类型数据序列提供一个方便而高效的方式. 切片有些类似于其他语言中的数组,但是有一些不同寻常的特性. 本文将深入切片的本质,并讲解它的用法. 数组 Go ...

  9. conda进行python环境隔离

    1.环境隔离的问题 在使用python时,常常遇到的问题: pip安装库A,依赖库B-2.1版本 pip安装库C,以来库B-3.1版本,安装会提示库B的版本冲突错误. 这种情况下就需要做环境隔离 co ...

  10. dotnet core swagger filter 隐藏接口和显示枚举描述

    dotnet core 2.2开发项目中,常会使用Swagger UI来生成在线Api文档. 某些接口不想放到Swagger中可以这样写Filter: /// <summary> /// ...