<!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. MySQL之查漏补缺

    1.TRUNCATE语句和DELETE语句的区别 1.delete语句,是DML语句,truncate语句通常被认为是DDL语句. 2.delete语句,后面可以跟where子句,通常指定where子 ...

  2. Redis学习－redis概述

    最近刚刚接触了redis技术,对此有一些了解,这是简单做一点总结. Redis简介 首先,简单了解一下NoSQL(Not only sql),不要错误的理解为:没有SQL,而是不仅仅是SQL.NoSQ ...

  3. MySQL 中的日期时间类型

    日期时间类型中包含以下几种数据类型: DATE TIME DATETIME TIMESTAMP YEAR 各类型都有具体的取值范围,超出或非法的其他值时,MySQL 会回退到 0.TIMESTAMP ...

  4. openstack架构设计(一)

    下图描述了最常见的Openstack集成服务和各服务之间如何交互的逻辑架构. 一. 计算架构 当设计和构建计算结点时,需要考虑处理器,内存.网络.和存储资源等信息.它也是openstack的核心部分. ...

  5. linux关闭地址空间随机化(ASLR)

    转:http://www.xuebuyuan.com/1571079.html 确认ASLR是否已经被打开,"2"表示已经打开 shanks@shanks-ubuntu:/home ...

  6. 初识GeneXus产品

    本人由于工作原因接触了GeneXus产品,从使用到现在也有些年头了.从刚开始的不熟悉到现在使用GeneXus开发了很多项目,慢慢也总结了一些经验,当然中间也走了很多的弯路.对于在国内同样使用GeneX ...

  7. 【BZOJ 4455】 4455: [Zjoi2016]小星星 （容斥原理+树形DP）

    4455: [Zjoi2016]小星星 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 426  Solved: 255 Description 小Y是 ...

  8. [BZOJ4651][NOI2016]网格(Tarjan)

    下面直接给出结论,相关证明见官方题解. 1.若跳蚤数不超过1或仅有两只跳蚤且相邻,则答案为-1. 2.若跳蚤形成的连通块个数大于1,则答案为0. 3.若跳蚤之间建图存在割点,则答案为1. 4.否则为2 ...

  9. [BZOJ4320][ShangHai2006]Homework(根号分治+并查集)

    对于<=sqrt(300000)的询问,对每个模数直接记录结果,每次加入新数时暴力更新每个模数的结果. 对于>sqrt(300000)的询问,枚举倍数,每次查询大于等于这个倍数的最小数是多 ...

  10. Android 应用内多进程实现

    android平台支持多进程通信,也支持应用内实现多进程那么多进程应该能为我们带来什么呢我们都知道,android平台对应用都有内存限制,其实这个理解有点问题,应该是说android平台对每个进程有内 ...