<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>幻灯片播放-2013</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript" src="js/slide.js"></script>

<link rel="stylesheet" href="css/slide.css" />

</head>

<body>

<div class="slide">

    <div class="img">

    <a href="#"><img src="data:images/2e2eb9389b504fc2298b0da2e4dde71191ef6d45.jpg" alt="狗狗狗-1" width="310" height="193" /></a>

    <a href="#"><img src="data:images/5bafa40f4bfbfbedc17b8bd879f0f736afc31f72.jpg" alt="马马马-2" width="310" height="193" /></a>

    <a href="#"><img src="data:images/9358d109b3de9c82f30548286d81800a19d84330.jpg" alt="二鸟-3" width="310" height="193" /></a>

    <a href="#"><img src="data:images/f603918fa0ec08faf639ae0058ee3d6d55fbda58.jpg" alt="蒙哥-4" width="310" height="193" /></a>

    <a href="#"><img src="data:images/03087bf40ad162d9695bdebb10dfa9ec8b13cde4.jpg" alt="长颈鹿-5" width="310" height="193" /></a>

    </div>

    <p class="title"></p>

    <ul class="slide-nav"></ul>

</div>

</body>

</html>

直接下载看看更方便！

JQ:

$(document).ready(function(){

    var time=2000;                //时间间隔

    var interval;                //计时对象

    var picHeight=193;            //图片高度

    index=0;                    //当前

    picLength=$(".img img").length;        //图片张数

                                //准备

        for(var i=0;i<picLength;i++)

        {

        var li="<li>"+(i+1)+"</li>";

        $(".slide-nav").append(li);

        $(".slide .slide-nav li").eq(0).addClass("on");

        var text=$(".slide .img a").eq(0).find("img").attr("alt");

        $(".slide .title").text(text);

        }

                                //鼠标移上

    $(".slide .slide-nav li").mouseover(function()

    {

        index=$(this).index();

        runPic(index);

    })

                                //自动循环

    interval=setInterval(runPic,time);

                                //每次执行函数

    function runPic()

    {

        $(".slide .img").css({top:-picHeight*index});

        $(".slide .slide-nav li").removeClass("on");

        $(".slide .slide-nav li").eq(index).addClass("on");

        var text=$(".slide .img a").eq(index).find("img").attr("alt");

        $(".slide .title").text(text);

        index++;

            if(index==picLength)

            {

            index=0;

            }

    }

                                //鼠标操作

    $(".slide .slide-nav li").hover(function()

     {                            //停止循环

        clearInterval(interval);

     },function()

     {                            //继续循环

        interval=setInterval(runPic,time);

     })

})
*{ padding:; margin:;}

img{ border:;}

.slide{position:relative;width:310px; height:193px; overflow:hidden;}

.slide .img{ position:absolute;}

.slide .title{position:absolute; top:; width:100%;background:#6E717A; height:25px; line-height:25px; text-align:center; color:#fff;}

.slide .slide-nav {position:absolute; bottom:3px; right:1px;}

.slide .slide-nav li{width:20px; height:20px;float:left; list-style:none; display:inline-block; background:#6E717A; color:#fff; margin-right:3px; text-align:center; line-height:20px; cursor:pointer;}

.slide .slide-nav li.on{background:#1D93D0;}

jq幻灯片2013-8-31的更多相关文章

  1. http://www.cnblogs.com/peida/archive/2013/05/31/3070790.html深入理解Java：SimpleDateFormat安全的时间格式化

    http://www.cnblogs.com/peida/archive/2013/05/31/3070790.html

  2. <2013 07 31> 没有必然的理由

    <2013 07 31> 没有必然的理由 没有必然的理由 人类从野蛮走向文明 也可能,从野蛮走向更野蛮 没有必然的理由 人群从疯狂走向理智 也可能,从疯狂走向更疯狂 没有必然的理由 你我从 ...

  3. jq 幻灯片插件制作

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  4. 1元抢卡巴KAV_不限量疯抢即日起至2013.10.31截止

    活动地址:http://img.kaba365.com/mail_files/kaba1yuan.html

  5. [Erlang 0105] Erlang Resources 小站 2013年1月~6月资讯合集

    很多事情要做,一件一件来; Erlang Resources 小站 2013年1月~6月资讯合集,方便检索.      小站地址: http://site.douban.com/204209/     ...

  6. 美国政府关于Google公司2013年度的财务报表红头文件

    请管理员移至新闻版块,谢谢! 来源:http://www.sec.gov/ 财务报表下载↓ 此文仅作参考分析. 10-K 1 goog2013123110-k.htm FORM 10-K   UNIT ...

  7. SharePoint 2013 SSO-Secure Store Service在实际案例中的应用

    文章目录: Secure Store Service介绍 Secure Store Service部署 Secure Store Service应用 之前有一篇博客讲到使用EMSManagedAPI操 ...

  8. 我们是怎么管理QQ群的

    文章背景:腾讯平台上的qq群数以千万百万计,但99%的在吹水扯蛋,从早上的问好开始,到晚上的晚安,无一不浪费青春之时间,看之痛心,无力改变,只好自己建了一个,希望能以此来改变群内交流的氛围或环境. 以 ...

  9. jquery TypeError: $(...).live is not a functio,动态添加class的点击事件处理

    jq版本更新后无live函数的处理.TypeError: $(...).live is not a function jquery live函数语法 jquery版本更新, 发现一个问题: jq自带的 ...

随机推荐

  1. Codefroces 919D Substring（拓扑排序+DP）

    题目链接:http://codeforces.com/problemset/problem/919/D 题目大意:给你一张有向图,给你每个顶点上的字母和一些边,让你找出一条路径,路径上的相同字母数最多 ...

  2. copy深浅拷贝

    我们在很多方法里都看到copy()方法,这是对变量的复制,赋值,下面来看一下实例: 复制方法调用的是copy模块中的方法: import copy copy.copy()         #前拷贝 c ...

  3. bzoj 1864

    思路:随便dp一下 #include<bits/stdc++.h> #define LL long long #define fi first #define se second #def ...

  4. poj2078 Matrix（DFS）

    题目链接 http://poj.org/problem?id=2078 题意 输入一个n×n的矩阵,可以对矩阵的每行进行任意次的循环右移操作,行的每一次右移后,计算矩阵中每一列的和的最大值,输出这些最 ...

  5. Windows下配置Apache服务器

    第一步:下载最新Apache. 下载网址:http://www.apachehaus.com/cgi-bin/download.plx 第二步:把下载文件解压缩到一个工作目录.D:\Apache 第三 ...

  6. HDU 6031 Innumerable Ancestors

    树状数组,倍增,枚举,$dfs$序. 对于每一次的询问,可以枚举$B$集合中的所有点,对于每一个点,在树上二分$LCA$,找到最低的更新答案. 判断是否是$LCA$可以搞个$dfs$序,将$A$集合中 ...

  7. HDU 1213(并查集)

    How Many Tables Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)T ...

  8. 理解面向消息中间件及JMS 以及 ActiveMQ例子

    为了帮助你理解ActiveMQ的意义,了解企业消息传送背景和历史是很重要的.讨论完企业消息传送,你将可以通过一个小例子了解JMS及其使用.这章的目的是简要回顾企业消息传送及JMS规范.如果你已经熟悉这 ...

  9. luoguP4284 [SHOI2014]概率充电器 概率期望树形DP

    这是一道告诉我概率没有想象中那么难的题..... 首先,用期望的线性性质,那么答案为所有点有电的概率和 发现一个点的有电的概率来源形成了一个"或"关系,在概率中,这并不好计算... ...

  10. BZOJ 3231: [Sdoi2008]递归数列 (JZYZOJ 1353) 矩阵快速幂

    http://www.lydsy.com/JudgeOnline/problem.php?id=3231   和斐波那契一个道理在最后加一个求和即可 #include<cstdio> #i ...