<!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. asp.net mvc Post上传文件大小限制

    最近发现在项目中使用jQuery.form插件上传比较大的文件时,上传不了,于是改了下web.config的上传文件最大限制. <configuration> <system.web ...

  2. BizTalk开发系列(十八) 使用信封拆分数据库消息

    之前写了一篇的<BizTalk开发系列(十七) 信封架构(Envelop)> 是关于信封架构及其拆装原理的,都是理论性的内容.信封在BizTalk开发过程中最常用的应该是在读取SQL Se ...

  3. LaTex 文本排版

    一.对齐段落 \\ or \newline 另起一行,而不是另起一段 \\* 在强制断行后,还禁止分页 \newpage 另起一页 \linebreak[n] \nolinebreak[n] \pag ...

  4. shopnc 支持 支付宝快捷登陆 shopnc权限验证原理说明

    为目前使用的是shopnc商场二次开发,shopnc本身做了qq互联和微博快捷登陆的api,做成了集成通用的接口 首先说下基本的这种类型的api访问方式,首先,的有个配置文件,配置你申请的id和key ...

  5. VMware workstation CentOs 7 虚拟机网卡设置为NAT模式并设置固定IP

    一.背景知识      虚拟机网络模式 无论是vmware workstation,virtual box,virtual pc等虚拟机软件,一般来说,虚拟机有三种网络模式: 1.桥接 2.NAT 3 ...

  6. hadoop2.5重新编译问题

    这几天一直在搭建hadoop环境,由于2.5以及2.6的版本需要在64位环境下重新编译,所以中间走了不少弯路.现在总结一下,由于手头资源紧张,只能在pc上模拟环境,具体环境如下: 宿主机:联想的笔记本 ...

  7. 使用NPOI将TABLE内容导出到EXCEL

    项目中需要将页面中的table内容导出到EXCEL,在用了几种方法后发现NPO是最快&最好的 需要应用 NPOI.dll 还有个Ionic.Zip.dll不知道有用没,没去研究,两个DLL都放 ...

  8. C#编程利器之三:接口(Interface)【转】

    C#编程利器之三:接口(Interface) C#接口是一个让很多初学者容易迷糊的东西,用起来好象很简单,定义接口,然后在里面定义方法,通过继承与他的子类来完成具体的实现.但没有真正认识接口的作用的时 ...

  9. java - 第一阶段总结

    java - 第一阶段总结 递归 递归:能不用就不用,因为效率极低 package over; //递归 public class Fi { public static void main(Strin ...

  10. Mac系统上用Node做APNS

    1.安装Node,下载地址:http://nodejs.org 2.更新npm,终端命令:sudo npm update npm -g 3.安装apn,终端命令:npm install apn 4.导 ...