<!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. .net 文件下载【转】

    方式一:TransmitFile实现下载.将指定的文件直接写入 HTTP 响应输出流,而不在内存中缓冲该文件.     protected void Button1_Click(object send ...

  2. sql 日期格式化

    sql语句中 经常操作操作datetime类型数据.今天在写一个存储过程的时候需要将 一个datetime的值的 日期部分提取出来.网上有许多这方面的介绍. 主要方法还是通过日期格式的转换来获取.如下 ...

  3. Vim 常见操作

    1.复制所有内容 按照此顺序敲即可:gg(光标定位到文件头)  V(选中该行) G(选中该行开始到最后一行结尾) y(复制选中内容) 2.粘贴所有内容 正常模式下,敲p即可,如果遇到粘贴内容不全,需要 ...

  4. ngrok访问外网

    1. 外网映射工具介绍 windows用户: 1,下载windows版本的客户端,解压到你喜欢的目录2,在命令行下进入到path/to/windows_386/下3,执行 ngrok -config= ...

  5. 封装常用的js（Base.js）——【01】理解库，获取节点，连缀，

    封装常用的js(Base.js)——[01]理解库,获取节点,连缀,  youjobit07 2014-10-10 15:32:59 前言:       现如今有太多优秀的开源javascript库, ...

  6. play for scala 通过网易smtp发送邮件

    最近用play来做一个小项目,里面用到了发送邮件的功能.这里我将这部分抽出来分享,毕竟目前来看paly于scala方面的中文资料在网上还是毕竟少,希望我的这篇文章能为有需要的人提供一点思路. 下面写下 ...

  7. Elasticsearch基本操作

    ElasticSearch操作说明   活动 方法 url Body 集群的相关操作 查看健康 Get http://localhost:9200/_cluster/health 查看节点 Get h ...

  8. JAVA 打出jar包

    1.eclipse下导出 jar包:选择项目右键--->Export...----> 选择java下的JAR file---->next--->选择存入路径--->nex ...

  9. Oracle中PL/SQL简介、基本语法以及数据类型

    Oracle中PL/SQL简介.基本语法以及数据类型 一.PL/SQL简介. Oracle PL/SQL语言(Procedural Language/SQL)是结合了结构化查询和Oracle自身过程控 ...

  10. role roleMapping 权限说明

    根据我的理解,希望能帮助到大家 role表 是权限列表. roleMapping 关联权限(例如那个用户在那个权限里面,或者权限里面包含那个权限) roleMapping的数据不能单独添加.必须在ro ...