<!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. plsql实例精讲部分笔记

    转换sql: create or replace view v_sale(year,month1,month2,month3,month4,month5,month6,month7,month8,mo ...

  2. LeetCode765. Couples Holding Hands

    N couples sit in 2N seats arranged in a row and want to hold hands. We want to know the minimum numb ...

  3. nodeJs 常用模块（一）

    url url.parse() querystring querystring.parse( [string] , [分隔符] )  ,解析为js字面量 querystring.stringify() ...

  4. 如何关闭WordPress后台的主题、插件、版本更新通知？

    由于WordPress 更新速度非常快,不论是主题 插件或是版本,每个月少说要执行个好几次,因为更新快,所以WordPress后台加入了更新通知,提醒使用者有新版本了,可以进行插件.主题或是系统更新, ...

  5. python生成随机数据插入mysql

    import random as r import pymysql first=('张','王','李','赵','金','艾','单','龚','钱','周','吴','郑','孔','曺','严' ...

  6. 解析Excel

    package com.jpcar.utils; import java.io.File; import java.io.FileInputStream; import java.io.IOExcep ...

  7. phantomjs2.1 初体验

    上次看了一下scrapy1.1的新手指南 决定写个小爬虫实验一下 目标网站是http://www.dm5.com/manhua-huofengliaoyuan准备爬取漫画火凤燎原的已有章节,将图片保存 ...

  8. UVA12995 Farey Sequence [欧拉函数，欧拉筛]

    洛谷传送门 Farey Sequence (格式太难调,题面就不放了) 分析: 实际上求分数个数就是个幌子,观察可以得到,所求的就是$\sum^n_{i=2}\phi (i)$,所以直接欧拉筛+前缀和 ...

  9. 手机锁屏js倒计时停止问题解决办法探索

    如图,有这么个需求,测试人员在测试过程中提了一个bug,手机锁屏再唤醒倒计时时间没有更新,仍从锁屏的时间继续,于是开始寻找解决之法 经了解得知,锁屏时候,浏览器的一切活动会停止运行,那么js也无法幸免 ...

  10. java抽象类、多态、接口

    抽象类 抽象类的产生 当编写一个类时,我们往往会为该类定义一些方法,这些方法是用来描述该类的功能具体实现方式,那么这些方法都有具体的方法体. 但是有的时候,某个父类只是知道子类应该包含怎么样的方法,但 ...