<!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. element-ui 源码架构

    1.项目结构 2.src下的入口文件 https://github.com/ElemeFE/element/blob/dev/src/index.js 入口文件实现的功能为: (1)国际化配置 (2) ...

  2. cmd获取批处理文件所在路径

    在批处理开头加入cd /d %~dp0 一行代码就真真实实地做到“编写一次,到处运行”.%0是批处理文件本身的路径,%~dp进行扩展, d向前扩展到驱动器,p往后扩展到路径.例如,你的bat文件在e: ...

  3. 记录规则 – 销售只能看到自己的客户，经理可以看到全部

    OpenERP中的权限管理有四个层次: 菜单级别: 即,不属于指定菜单所包含组的用户看不到该菜单.不安全,只是隐藏菜单,若用户知道菜单ID,仍然可以通过指定URL访问 对象级别: 即,对某个对象是否有 ...

  4. ubuntu中设置xampp开机启动

    sudo ln -s /opt/lampp/lampp /etc/init.d/lampp sudo update-rc.d -f lampp defaults

  5. 【Linux】gvim封装至gvi命令

    方法1:使用脚本 #!/bin/bash - #============================================================================ ...

  6. Sqlite 复制表结构和数据

    复制表结构 ; 复制表结构和数据 create table newTb as select * from oldTb:

  7. 转:CMake安装和使用

      CMake是一个跨平台的安装(编译)工具,可以用简单的语句来描述所有平台的安装(编译过程).他能够输出各种各样的makefile或者project文件,能测试编译器所支持的C++特性,类似UNIX ...

  8. highstock使用案例（异步请求，懒加载）

    jsp中导入:<script src="<c:url value="/resources/js/highstock.js"></c:url> ...

  9. vi中全选的命令或者快捷方式

    http://blog.163.com/boby_boke/blog/static/126877354200910308522382/网上有两种说法比较多:“:1,$y”和 “dG” 但是我查到有资料 ...

  10. Web 前端性能优化相关内容解析[转]

    Web 前端性能优化相关内容,来源于<Google官方网页载入速度检测工具PageSpeed Insights 使用教程>一文中PageSpeed Insights 的相关说明.大家可以对 ...