<!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. socket编程——sockaddr_in结构体操作

    sockaddr结构体 sockaddr的缺陷: struct sockaddr 是一个通用地址结构,这是为了统一地址结构的表示方法,统一接口函数,使不同的地址结构可以被bind() , connec ...

  2. json数据操作

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

  3. 在eclipse中使用Maven3（笔记二）

    笔记本二   在Eclipse 中使用Maven 第一节:m2eclipse 插件安装 打开Eclipse,点击菜单Help - > Install New Software 点击Add 按钮N ...

  4. ceph rgw java sdk 使用域名访问服务时需要设置s3client的配置项 PathStyleAccess 为true， 负责将报域名异常

    Caused by: java.net.UnknownHostException: my-new-bucket.s3.yyclouds.com at java.net.InetAddress.getA ...

  5. 实现celery中出现拥挤队列时，及时发邮件通知

    里面有几个常用的功能,以后值得借鉴. 如获取脚本目录,IP,获取shell返回值,发送邮件等.. 上午写完,中午测试,下午上线~~ #!/usr/bin/env python # -*- coding ...

  6. [实战]MVC5+EF6+MySql企业网盘实战(18)——文件上传，下载，修改

    写在前面 经过一段时间的秀秀改改,终于把文件上传下载,修改文件夹文件名称的功能实现了. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战]MVC5+EF6+MySql企 ...

  7. C# 6.0 新特性 (二)

    自动属性初始化表达式 有过正确实现结构经验的所有 .NET 开发人员无疑都为一个问题所困扰:需要使用多少语法才能使类型固定不变(为 .NET 标准建议的类型).此问题实际上是只读属性存在的问题: 定义 ...

  8. js 表

    setInterval("body.innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDa ...

  9. jquery通配符说明

    按姓名匹配 1,name前缀为aa的所有div的jquery对象 Js代码 收藏代码$("div[name^='aa']"); 2,name后缀为aa的所有div的jquery对象 ...

  10. 洛谷P0248 [NOI2010] 超级钢琴 [RMQ，贪心]

    题目传送门 超级钢琴 题目描述 小Z是一个小有名气的钢琴家,最近C博士送给了小Z一架超级钢琴,小Z希望能够用这架钢琴创作出世界上最美妙的音乐. 这架超级钢琴可以弹奏出n个音符,编号为1至n.第i个音符 ...