<!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. html字符转义

    常用表: No. 文字表記 10進表記 16進表記 文字   Comment 001 " " " """   quotation mark ...

  2. Hibernate日期映射类型

    映 射 类 型 Java类型 标准SQL类型 描    述 date java.util.Date或者java.sql.Date DATE 代表日期,形式为: YYYY-MM-DD time java ...

  3. iphone openssh

    安装openssh 用户名:默认是 root 密码:默认是 alpine 修改登陆密码:passwd

  4. 克隆server2008R2造成SID冲突

    在云上搞的虚拟机,安装5台winserver2008r2,搭域环境,域环境搭好之后,改域用户为管理员,死活更改不成功,之前在测试环境搞域环境时碰到克隆镜像系统全部还原后搭建域环境不成功的情况,后来全部 ...

  5. 30、java中递归算法

    1.已知有一个数列f(0)=1,f(1)=4,f(n+2)=2*f(n+1)+f(n),其中n是大于0的正数,求f(10)的值. 分析:设x=n+2 => f(x)=2*f(n-1)+f(n-2 ...

  6. VC++程序员如何做好界面

    本屌丝在新春放假期间闲来无事,在各大编程论坛溜达了一圈.发现年前的帖子中,有VC++程序员在界面开发方面遇到了很多苦恼,有抱怨界面工作不好做的,有抱怨用错了界面库的,也有紧急求得技术问题帮助的.看到这 ...

  7. HUDOJ-----1394Minimum Inversion Number

    Minimum Inversion Number Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java ...

  8. HDUOJ----More is better（并查集）

    More is better Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 327680/102400 K (Java/Others) ...

  9. Warning: RPMDB altered outside of yum.的解决办法

    错误提示: Warning: RPMDB altered outside of yum 解决办法: 删除yum的历史记录rm -rf /var/lib/yum/history/*.sqlite 上面的 ...

  10. Tomact8部署在linux下启动很慢详解

    omcat 8启动很慢,且日志上无任何错误,在日志中查看到如下信息: Log4j:[2015-10-29 15:47:11] INFO ReadProperty:172 - Loading prope ...