轮播代码如下：

<!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. React 引入import React 原理

    本质上来说JSX是React.createElement(component, props, ...children)方法的语法糖. 所以我们如果使用了JSX,我们其实就是在使用React,所以我们就 ...

  2. 洛谷P1084 运输计划

    题目 题目要求使一条边边权为0时,m条路径的长度最大值的最小值. 考虑二分此长度最大值 首先需要用lca求出树上两点间的路径长度.然后取所有比mid大的路径的交集,判断有哪些边在这些路径上都有出现,然 ...

  3. js处理事件冒泡（兼容写法）

    event = event || window.event; if (event.stopPropagation) { event.stopPropagation(); } else { event. ...

  4. LCA的多种求法（超详细！！！）

    倍增求LCA (1)树上倍增法 预处理 设f[x,k]表示x的2^k辈祖先,即从x向根节点走2^k步到达的节点.特别地,若该节点不存在,则令f[x,k]=0.f[x,0]就是x的父节点.可以得出f[x ...

  5. Mac上安装Python3虚拟环境（VirtualEnv）教程

    如果已经安装好pip3,那么执行命令安装virtualenv环境 pip3 install virtualenv 安装完成检测版本是否安装成功 virtualenv --version 创建新目录 M ...

  6. eclipse debug调试 class文件 Source not found.

      1.情景展示 明明有class文件,为什么提示没有? 2.原因分析 这是eclipse与myeclipse的不同之处,myeclipse会自动加载运行时所需的的class文件,而eclipse则需 ...

  7. Python全栈工程师（Python3 所有基础内容 0-0)

    转发:https://www.cnblogs.com/ParisGabriel/p/9388030.html statements  语句print   输出quit()  退出exit() 退出ct ...

  8. [Gamma]Scrum Meeting#2

    github 本次会议项目由PM召开,时间为5月27日晚上10点30分 时长10分钟 任务表格 人员 昨日工作 下一步工作 木鬼 撰写博客,组织例会 撰写博客,组织例会 swoip 前端显示屏幕,翻译 ...

  9. c++字符串输入格式总结

    最近的几次笔试中,常常遇到一些输入的问题.下面说明一下几种情况. 1. 第一种就是常见的,输入数字序列,用空格分隔开,直到回车结束.这个之前一开始遇到的时候都是利用getline直接作为字符读入一行处 ...

  10. Apache Kylin 简介

    http://kylin.apache.org/docs/index.html https://www.infoq.cn/article/vOrjsJCgVAVPim5hsj6p Kylin 的核心思 ...