<!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <style type="text/css">

         * {

             margin: 0;

             padding: 0;

         }

         ul, ol {

             list-style: none;

         }

         .wrap {

             width: 650px;

             height: 250px;

             margin: 100px auto 0;

             position: relative;

             overflow: hidden;

         }

         .wrap img {

             display: block;

         }

         .wrap ul {

             height: 250px;

             z-index: 1;

             position: relative;

         }

         .wrap ol {

             height: 30px;

             z-index: 2;

             position: absolute;

             bottom: 0;

             right: 0;

         }

         .wrap > ul > li {

             position: absolute;

             top: 0;

             left: 0;

         }

         .wrap > ol > li {

             float: left;

             width: 20px;

             height: 20px;

             text-align: center;

             line-height: 20px;

             border: 1px solid white;

             margin-right: 5px;

             background: Gray;

         }

         .wrap > ol > li:hover {

             cursor: pointer;

         }

         .wrap li.active {

             padding: 2px;

             color: orange;

             margin-top: -4px;

             border: 1px solid orange;

         }

     </style>

     <script src="../jquery-1.11.1.min.js"></script>

     <script>

         $(document).ready(function () {

             var zIndex = 0;

             $(".wrap > ol > li").mouseenter(function () {

                 zIndex++;

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

                 $(".wrap > ul > li")

                         .eq($(this).index())

                         .css({

                         //这里后面的zIndex是数值，不能加引号

                             "z-index": zIndex,

                             "left": 650

                         })

                         .animate({

                             "left": 0

                         }, 1000);

             });

         });

     </script>

 </head>

 <body>

 <div class="wrap">

     <ul>

         <li style="z-index:1;"><img src="data:images/01.jpg" alt=""/></li>

         <li><img src="data:images/02.jpg" alt=""/></li>

         <li><img src="data:images/03.jpg" alt=""/></li>

         <li><img src="data:images/04.jpg" alt=""/></li>

         <li><img src="data:images/05.jpg" alt=""/></li>

     </ul>

     <ol>

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

         <li>2</li>

         <li>3</li>

         <li>4</li>

         <li>5</li>

     </ol>

 </div>

 </body>

 </html>

jQuery实现的层级轮播图的更多相关文章

  1. 层级轮播图（animate）

    层级轮播图(animate) css <style type="text/css"> * { margin: 0; padding: 0; } ul, ol { lis ...

  2. jQuery淡入淡出效果轮播图

    用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: & ...

  3. jquery手写焦点轮播图-------解决最后一张无缝跳转第一张的问题

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

  4. 【前端】javascript+jQuery实现旋转木马效果轮播图slider

    实现效果: 实现原理: 技术栈: javascript+jQuery+html+css 实现步骤: // 0. 获取元素 // 1. 鼠标放置到轮播图上,显示两侧的控制按钮,移开后隐藏 // 2. 为 ...

  5. jQuery实现todo及轮播图

    内容: 1.todo程序 2.轮播图 1.todo程序 需求: 实现一个todo程序,可以添加数据,可以删除数据,可以修改数据,可以查看所有数据 另外实现自己的一系列弹窗:用于提示用户的提示框.用于警 ...

  6. jquery tab选项卡、轮播图、无缝滚动

    最近做一个页写了一个星期,觉得自己对jquery还是很不熟悉 自己查了一下资料写了几个封装好的tab选项卡.轮播图.无缝滚动 $(function(){ //tab选项卡 jQuery.tab=fun ...

  7. 前端框架之jQuery（二）----轮播图,放大镜

    事件 页面载入   ready(fn)  //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数.   $(document).ready(function(){}) -----------> ...

  8. 用jquery制作的简单轮播图

    我也是进入H5前端的小菜鸟一枚,最近才进入jquery的学习,所以打算对自己的学习进行记录. 今天分享的是一个简单的轮播图,这个轮播图的特效很简单,能够进行图片的轮播以及点击相应图片,图片能够跳转到相 ...

  9. 【jQuery】全功能轮播图的实现（本文结尾也有javascript版）

    轮播图 图片自动切换(定时器): 鼠标悬停在图片上图片不切换(清除定时器) 鼠标悬停在按钮上时显示对应的图片(鼠标悬停事件) 鼠标悬停在图片上是现实左右箭头 点击左键切换到上一张图片,但图片为第一张时 ...

随机推荐

  1. 用Postfix + Dovecot 搭建的邮件server被垃圾邮件其中转server的处理

    今天发邮件. 发送失败.然后到server上看日志, 发现硬盘被垃圾邮件的缓存队列和日志塞满了. tail    -f    /var/log/maillog   发现疯狂刷屏.部分日志例如以下 : ...

  2. osx下查看jar文件

    jar是java class的打包文件,我们能够将自己的项目打包为jar文件执行,也能够打包后当做第三方包查看,有时候我们须要查看一下一个jar文件里是否还有某个类以及对应的包,我们能够採用下面两种方 ...

  3. 对opencv MeanShift 融合矩形框的改进

    OPENCV 中的代码改进.当然要依据自己的实际情况来,OPENCV 中行人检測有两种矩形框的融合算法.这里仅仅对meanshift 方法做改进 假设有更好的方法.希望能够跟我讲下. 对于去除重合部分 ...

  4. linux 服务器删除大文件之后不释放存储空间的解决办法

    查看磁盘空间使用情况:df -h 查看根目录下,第一层目录所占空间情况:du -h --max-depth=1 / 找出根目录下大于2000M的文件:find / -size +2000M 找出已删除 ...

  5. 【centos6.5 安装 node.js + npm】

    1.参考链接:http://www.jb51.net/article/116231.htm 2.下载的nodejs版本一定要是v0.12.10的(传送门:https://nodejs.org/en/b ...

  6. Android学习系列(6)--App模块化及工程扩展

    这篇文章是Android开发人员的必备知识,是我特别为大家整理和总结的,不求完美,但是有用. 1.需求    无论是在.net还是java平台,合理的分层架构是最普遍的模块化思路之一.    dll, ...

  7. PL SQL基本内容(原创)

    本节介绍PL SQL的基本内容 本节所举示例数据来源oracle用户scott下的emp表和dept表,数据如下: 一.plsql简介: 1.概念:procedural language,过程化sql ...

  8. C#中缓存的使用 ajax请求基于restFul的WebApi(post、get、delete、put) 让 .NET 更方便的导入导出 Excel .net core api +swagger(一个简单的入门demo 使用codefirst+mysql) C# 位运算详解 c# 交错数组 c# 数组协变 C# 添加Excel表单控件（Form Controls） C#串口通信程序

    C#中缓存的使用   缓存的概念及优缺点在这里就不多做介绍,主要介绍一下使用的方法. 1.在ASP.NET中页面缓存的使用方法简单,只需要在aspx页的顶部加上一句声明即可:  <%@ Outp ...

  9. ASP中页面之间传递值的几种方式

    ASP.NET页面之间传递值的几种方式 页面传值是学习asp.net初期都会面临的一个问题,总的来说有页面传值.存储对象传值.ajax.类.model.表单等.但是一般来说,常用的较简单有QueryS ...

  10. MySQL 如何更新某个字段的值为原来的值加1

    格式:update 表名称 set 字段名称 = 字段名称 + 1 [ where语句] 比如说数据库中有一张student表,要想把id为1的学生成绩(score)加1则update student ...