轮播代码如下：

<!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. 将zabbix服务和monitor服务在一个机器上部署

    问题,两个服务的文件路径都是 /usr/local/sdata下,要让两个服务共存,至少需要讲一个服务的文件迁移到别的文件夹,同时将所有的配置项都进行修改,使能找到指定的文件路径, 方案1,先按照za ...

  2. apache-maven安装

    1.下载maven 网址:http://maven.apache.org 2.下载maven和安装 由于最新版的可能会有问题,我选择下载旧版本 一般都下载二进制的zip文件 解压后文件夹apache- ...

  3. qwq。。胡诌qwq

    1,十里寒塘,红楼灯火阑珊,晓风残月,思念醒了一半. 晨钟催落月,淑气催黄鸟,而花千树而你还未还,三月烟花,只剩远影孤帆,珠箔飘灯,大雁独自来返,柳絮铺地,桃花落了菀晚, 琴声弹起,雨落长安,长夜漫漫 ...

  4. 一分钟理解什么是REST和RESTful

    从事web开发工作有一小段时间,REST风格的接口,这样的词汇总是出现在耳边,然后又没有完全的理解,您是不是有和我相同的疑问呢?那我们一起来一探究竟吧! 就是用URL定位资源,用HTTP描述操作. 知 ...

  5. Java 内存排查，慢慢收集总结

    Java堆外内存排查小结: https://mp.weixin.qq.com/s?__biz=MzA4MTc4NTUxNQ==&mid=2650518612&idx=2&sn= ...

  6. VUE 动态加载组件的四种方式

    动态加载组件的四种方式: 1.使用import导入组件,可以获取到组件 var name = 'system'; var myComponent =() => import('../compon ...

  7. EV录屏 --- 免费无水印，集视频录制与直播功能于一身的桌面录屏软件， 支持录屏涂鸦、实时按键显示、视频体积压缩等实用功能

    https://www.ieway.cn/index.html 免费无水印,集视频录制与直播功能于一身的桌面录屏软件,支持录屏涂鸦.实时按键显示.视频体积压缩等实用功能 EVCapture 3.9.7 ...

  8. scrapy入门案例

    一. 新建项目(scrapy startproject) 在开始爬取之前,必须创建一个新的Scrapy项目.进入自定义的项目目录中,运行下列命令: scrapy startproject scrapy ...

  9. WebGL学习笔记（十）：雾化

    雾化是指距离我们较远的物体看不清晰的情况,比如模拟大雾环境,或者模拟水下环境时会用到. 实现雾化的方式有很多种,我们这里使用的是线性雾化的方式: 线性雾化 线性雾化比较简单,我们算出每个像素点到摄像机 ...

  10. exe4j 打包jar包程序，inno setup complier打包所有

    关于库: jar包中对于引用第三方库的话,需要再exe4j中引用. rxtx http://rxtx.qbang.org/wiki/index.php/Download