<!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. tracteroute路由追踪

    traceroute 跟踪数据包到达网络主机所经过的路由工具: 是用来发出数据包的主机到目标主机之间所经过的网关的工具.traceroute 的原理是试图以最小的TTL发出探测包来跟踪数据包到达目标主 ...

  2. 【laravel5.4】迁移文件的生成、修改、删除

    建议直接去官方文档查看: https://laravel-china.org/docs/laravel/5.4/migrations#creating-columns 1.生成迁移: 主要方式:1.创 ...

  3. 原创：【微信小程序】客服消息教程（后台以PHP示例）

    1.不需要自己手动开发客服消息的,直接接入客服,不开启消息推送即可.这种模式不多讲. 2.公众号后台开启消息推送模式,配置服务器URL.TOKEN.随机串.数据模式.数据格式(XML或JSON),这个 ...

  4. 架构-LAMP特级学习(网站加速解决方案)

    1.Squid代理缓存技术 2.页面静态化缓存技术 3.Memcache.Redis等缓存服务器 4.Sphinx搜索加速

  5. java.lang.UnsupportedClassVersionError: org/hibernate/SessionFactory : Unsupported major.minor version 52.0

    问题: 在学习hibernate的过程中,涉及导入jar包的问题,写该文的时候是从官网下载的最新的hibernate的jar包hibernate-release-5.2.10.Final .在测试时, ...

  6. java学习之第五章编程题示例（初学篇）

    /* Animal.java */ package animal; public abstract class Animal { public abstract void cry(); public ...

  7. Flask接通微信公众号

    import hashlib import xml.etree.ElementTree as ET from flask import Flask, request import time app = ...

  8. 开源的数据可视化JavaScript图表库：ECharts

    ECharts (Enterprise Charts 商业产品图表库)是基于HTML5 Canvas的一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽 ...

  9. Ant build xml中的各种变量解释

    Ant build.xml中的各种变量 Ant环境变量分为四种: 1.      build.properties文件中定义的变量 2.      build.xml文件中定义的变量, 3.      ...

  10. c#基础之异常处理及自定义异常 从SQLServer转储数据到MySQL

    c#基础之异常处理及自定义异常 一.什么是c#中的异常? 异常是程序运行中发生的错误,异常处理是程序的一部分.c#中的异常类主要是直接或者间接的派生于 System.Exception类 ,也就是说S ...