轮播代码如下：

<!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. yugabyte cdc 试用

    目前yugabyte 的cdc 功能处于beta 阶段,应该也快实际可用了,以下是一个简单的试用 环境准备 使用docker-compose docker-compose 文件 version: '2 ...

  2. json-server模拟服务器API

    一.npm安装 npm install --global json-server 二.使用:创建一个json数据文件,比如: { "students": [{ "id&q ...

  3. vue中computed和watch的区别，以及适用场景

    computed:通过属性计算而得来的属性 1.computed内部的函数在调用时不加(). 2.computed是依赖vm中data的属性变化而变化的,也就是说,当data中的属性发生改变的时候,当 ...

  4. 洛谷p3398仓鼠找suger题解

    我现在爱死树链剖分了 题目 具体分析的话在洛谷blog里 这里只是想放一下改完之后的代码 多了一个son数组少了一个for 少了找size最大的儿子的for #include <cstdio&g ...

  5. 在spring boot里使用undertow而非tomcat

    参考https://examples.javacodegeeks.com/enterprise-java/spring/tomcat-vs-jetty-vs-undertow-comparison-o ...

  6. 使用grpc C++功能

    grpc c++开发需要安装相关工具以及框架才能进行开发. rz 远程上传文件 本地开发环境搭建: 1.编译相关工具 pkg-config autoconf automake Libtool shto ...

  7. jvm （一）jvm结构 & 类加载 & 双亲委托模型

    参考文档: jvm内幕-java虚拟机详解:http://www.importnew.com/17770.html 常量池:https://www.jianshu.com/p/c7f47de2ee80 ...

  8. 自己动手实现DNS协议

    1. 主要内容 不说废话,直接进入正题.先说说本文本文的主要内容,好让你决定是否看下去: 介绍DNS是干什么的: 介绍DNS是如何工作的: 介绍DNS请求与响应的消息格式: 编程实现一个简单的DNS服 ...

  9. python gis库

    apt install python3 python3-gdal gdal-bin python3-pyproj proj-bin python3-shapely fiona python3-fion ...

  10. Manifest中meta-data扩展元素数据的配置与获取

    简介-meta是什么 在AndroidManifest.xml清单文件中 我们有时会看到如下类似的<meta-data ... >元素开始的配置内容: <meta-data andr ...