<!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. 1z0-052 q209_6

    6: You executed this command to create a temporary table: SQL> CREATE GLOBAL TEMPORARY TABLE repo ...

  2. spring 中常用的配置项

    1.spring 中常用的配置项 application.properties #端口 server.port=8081 #调试模式 debug=false #上下文 #一般情况下,小项目通常都是在t ...

  3. java String字符串

      五.java数据类型之String(字符串) CreateTime--2017年7月21日16:17:45 Author:Marydon (一)数据格式 (二)初始化 // 方式一 String ...

  4. Web前端开发笔试&面试_01（mi:）

    —— (al_me16041719002000) begin—— 1.(单选)下面哪个方法是String对象和Array对象都有的? A.splice B.split C.replace D.conc ...

  5. IOS 内存优化和调试技巧

    基础部分 1: 图片内存大小小结 a: 图片:是占用内存的大户,尤其是手机游戏图片资源众多.对图片资源在内存中占用量的计算成为J2ME游戏开发者的经常性工作,CoCoMo来解释一下如何计算图片在内存中 ...

  6. SecureCRT 快捷键总结 设置快捷键

    http://oldboy.blog.51cto.com/2561410/907098 自己整理的一些 查看 Alt + Enter     全屏   菜单 Alt + f + n     克隆会话窗 ...

  7. Linux命令-系统健康命令：top

    查看系统健康命令 top之后,按1键可以看到每一个cpu使用情况 top 默认是3秒刷新一次,q退出

  8. 【php】基础学习3

    本节主要是php中函数的学习: <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Con ...

  9. 学习WCF笔记之二

    一.学习文章http://www.cnblogs.com/iamlilinfeng/archive/2012/09/25/2700049.html 二.步骤 学习WFC,按照大神的文章一步步学习,不过 ...

  10. 怎样让VMware上的虚拟机ping通外网（图解教程）

    近期在实习项目中遇到一个问题. 因測试须要,本人在win7上安装VMWare后在启动两台ubuntuserver.两台主机的网络配置所有採用NAT方式实现连接. 之后一路畅通.主机ping通虚拟机和外 ...