<!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. Percona XtraDB Cluster(PXC) Mysql 集群

    Percona XtraDB Cluster(PXC)   ---原理介绍篇         目录 一.简介 1 二.优缺点 2 三.区别/局限性 3 四. PXC复制原理 4 五. 服务解释 5   ...

  2. request机制

    每个框架中都有处理请求的机制(request),但是每个框架的处理方式和机制是不同的 为了了解Flask的request中都有什么东西,首先我们要写一个前后端的交互 基于HTML + Flask 写一 ...

  3. 使用 PHP 构建的 Web 应用如何避免 XSS 攻击

    本文首先简单介绍开发测试人员如何对 Web 应用进行 XSS 漏洞测试,如何借助工具绕过客户端 JavaScript 校验输入恶意数据:然后针对使用 PHP 语言构建的 Web 站点,从在输出端对动态 ...

  4. 邀请用户进TestFlight 体验 App 的测试版本

    iphone手机用户,在工作中常见到,APP版本现在是Beta阶段(iOS版本),需要邀请一些用户来体验新版本,在版本上线前提出更好的建议及时进行修改,此时用到了testflight,很方便的通过邀请 ...

  5. iOS控制器与视图加载方法

    转载记录, 请看原文: 1. iOS中的各种加载方法(initWithNibName,loadNibNamed,initWithCoder,awakeFromNib等等)简单使用   http://w ...

  6. Hadoop（六）MapReduce的入门与运行原理

    一 MapReduce入门 1.1 MapReduce定义 Mapreduce是一个分布式运算程序的编程框架,是用户开发“基于hadoop的数据分析应用”的核心框架: Mapreduce核心功能是将用 ...

  7. 【PAT】1001. 害死人不偿命的(3n+1)猜想 (15)

    1001. 害死人不偿命的(3n+1)猜想 (15) 卡拉兹(Callatz)猜想: 对任何一个自然数n,如果它是偶数,那么把它砍掉一半:如果它是奇数,那么把(3n+1)砍掉一半.这样一直反复砍下去, ...

  8. 二安装Python

    因为Python是跨平台的,它可以运行在Windows.Mac和各种Linux/Unix系统上.在Windows上写Python程序,放到Linux上也是能够运行的. 要开始学习Python编程,首先 ...

  9. Java SHAA加密

    package com.util; import java.security.MessageDigest; /** * 采用SHAA加密 */ public class SHAUtil { /*** ...

  10. 网站优化：引用CDN公共库

    什么是CDN公共库? CDN公共库是指将常用的JS库存放在CDN节点,以方便广大开发者直接调用.与将JS库存放在服务器单机上相比,CDN公共库更加稳定.高速.一般的CDN公共库都会包含全球所有最流行的 ...