<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #wrap {
            width: 590px;
            height: 340px;
            position: relative;
            overflow: hidden;
            margin: 100px auto;
            border: #333 2px solid;
        }

        #wrap ol{
            position: absolute;
            left: 50%;
            bottom: 10px;
            margin-left: -70px;
        }
        #wrap ol li{
            width: 30px;
            height: 30px;
            background: #ccc;
            float: left;
            margin-right: 5px;
            border-radius: 50%;
        }
        #wrap ul {
            position: absolute;
            height: 340px;
        }
        #wrap ul li{
            width: 590px;
            height: 340px;
        }

        #wrap ol li.active{
            background: red;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function(){
            var aBtn = $('#wrap ol li');
            var oUl = $('#wrap ul');

            aBtn.hover(function(){
                aBtn.removeClass('active');
                $(this).addClass('active');
                oUl.stop().animate({top:-340*$(this).index()});
            });
        });
    </script>
</head>
<body>
<div id="wrap">
    <ul>
        <li><img src="img/s1.jpg" alt=""/></li>
        <li><img src="img/s2.jpg" alt=""/></li>
        <li><img src="img/s3.jpg" alt=""/></li>
        <li><img src="img/s4.jpg" alt=""/></li>
    </ul>
    <ol>
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
</div>
</body>
</html>

jquery幻灯片的更多相关文章

  1. SlidesJS - 老牌的响应式 jQuery 幻灯片插件

    SlidesJS 是一款老牌的 jQuery 幻灯片插件,经过多年的发展,已经成为一款功能齐全,设计精巧的幻灯片插件.支持循环.自动播放功能和淡入淡出过渡效果,并且能够自动生成分页,可以帮助开发者制作 ...

  2. Skippr – 轻量、快速的 jQuery 幻灯片插件

    Skippr 是一个超级简单的 jQuery 幻灯片插件.只是包括你的网页中引入 jquery.skippr.css 和 jquery.skippr.js 文件就能使用了.Skippr 能够自适应窗口 ...

  3. 18款 非常实用 jquery幻灯片图片切换

    1.jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换. 查看演示>& ...

  4. 锋利的jQuery幻灯片实例

    //锋利的jQuery幻灯片实例 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  5. Prezento – 轻量、简单的 jQuery 幻灯片插件

    Prezento 是一个超级简单的 jQuery 幻灯片插件.可以让你网页以新颖的交互方式呈现.另外,Prezento 支持响应式设计,配置项也很灵活,可以根据你需要的效果配置. 您可能感兴趣的相关文 ...

  6. 60款很酷的 jQuery 幻灯片演示和下载【转】

    jQuery 是一个非常优秀的 JavaScript 框架,使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入漂亮的效果,其中之一就是幻灯片效果的实现,这是一种在有限的网页空间内展 ...

  7. 基于bootstrup3全屏宽度的响应式jQuery幻灯片特效

    这是一款效果非常酷的基于Bootstrup3.x和HTML5的响应式全屏宽度jQuery幻灯片特效.该幻灯片能自适应屏幕的宽度,使用HTML5的data属性来指定幻灯片所需的各种属性.使用简单,界面美 ...

  8. 12款jQuery幻灯片插件和幻灯片特效教程

    jQuery 使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入一些非常好的效果.滑块和幻灯片效果是常用的内容展示方式之一,这是一种在有限的网页空间内展示系列项目时非常好的方法.今 ...

  9. 强大实用的jQuery幻灯片插件Owl Carousel

    演 示 下 载 简介 Owl Carousel 是一个强大.实用但小巧的 jQuery 幻灯片插件,它具有一下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及 ...

  10. lightslider-支持移动触摸的轻量级jQuery幻灯片插件

    插件简介 lightslider是一款轻量级的响应式jQuery幻灯片插件.lightslider幻灯片插件能够支持移动触摸设备,它可以制作为带缩略图的内容幻灯片,或者制作为无限循环的旋转木马.它的特 ...

随机推荐

  1. 将文件系统数据库迁移到ASM中

    使用裸设备配置ASM实例 http://www.cnblogs.com/myrunning/p/4270849.html 1.查看我们创建的磁盘组 [oracle@std ~]$ export ORA ...

  2. oracle initialization or shutdown in progress问题解决步骤

        今天像往常一样打开电脑,启动plsql工具连接数据库,但是尽然连接不了,报了“oracle initialization or shutdown in progress”的提示信息,从操作系统 ...

  3. PowerDesigner的使用二

    PowerDesigner是一款功能非常强大的建模工具软件,足以与Rose比肩,同样是当今 最著名的建模软件之一.Rose是专攻UML对象模型的建模工具,之后才向数据库建模发展,而PowerDesig ...

  4. 2145334赵文豪《Java程序设计》第2周学习总结

    2145334赵文豪<Java程序设计>第2周学习总结 教材学习内容总结 第二周的学习结束了,又是充实的一周,在这周的java学习过程中,我们主要学习了java的基础语法.其中包括类型变量 ...

  5. matlab函数bwareaopen的详解

    matlab函数_连通区域 1. matlab函数bwareaopen──删除小面积对象格式:BW2 = bwareaopen(BW,P,conn)作用:删除二值图像BW中面积小于P的对象,默认情况下 ...

  6. Java Collection框架详解

    引用自:http://blog.sina.com.cn/s/blog_6d6f5d7d0100s9nu.html 经常会看到程序中使用了记录集,常用的有Collection.HashMap.HashS ...

  7. 一些IT中的工具介绍【转】

      1. 史上最全github使用方法:github入门到精通 2. Git教程 3. GIT与GitHub使用简介 简单来说,git是一种版本控制系统.跟svn.cvs是同级的概念.github是一 ...

  8. c语言-交换两个整数

    使用c来写一个函数来实现交换两个整数. 第一种 一般的方法,引用中间变量,方便快捷. void swap(int *a, int *b) { int tmp = *a; *a = *b; *b = t ...

  9. Oracle 参数之_small_table_threshold

    SQL> select * from v$version; BANNER ------------------------------------------------------------ ...

  10. ORA-01436: 用户数据中的CONNECT BY 循环

    起始地     目的地     距离(公里)A             B             1000A             C             1100A             ...