<!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>lin_jquery</title>
<style type="text/css">
.linContainer{margin:10px auto;width:790px;}
.linBox{width:790px;overflow:hidden;height:300px;position:relative;z-index:1;}
.linBoxImg{position:absolute;z-index:10;}
img{border:none;}
.linBoxImg img{float:left;}
.clearBoth{clear:both;}
.linNum{position:absolute; top:230px;right:40px;z-index:100;}
.linNum a{color:#000000;padding:5px;text-decoration:none;}
.linActive{font-weight:bold;}
.linNum a.linActive{color:#ffff00;text-decoration:underline;}
</style>
<script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
</head>
<body>
<div class="linContainer">
    <div class="linBox">
        <div class="linBoxImg">
            <a href="x"><img src="./images/reel_1.jpg" /></a>
            <a href="2"><img src="./images/reel_2.jpg" /></a>
            <a href="3"><img src="./images/reel_3.jpg" /></a>
            <a href="4"><img src="./images/reel_4.jpg" /></a>
            <br class="clearBoth" />
        </div>
        <div class="linNum">
        <a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
    var imgWidth = $(".linBox img").width();
    var imgNum = $(".linBox img").size();
    var imgTotal = imgWidth * imgNum;
    var leftWidth = 0;
    var nnn = 0;
    var leftTotal = -imgWidth * (imgNum - 1);
    $(".linNum a").eq(0).addClass("linActive");
    $(".linBoxImg").css({"width": imgTotal});

play = function(){
        ok = setInterval(function(){
            $(".linBoxImg").animate({left:leftWidth});
            leftWidth -= imgWidth;
            $(".linNum a").removeClass("linActive");
            $(".linNum a").eq(nnn).addClass("linActive");
                nnn++;
            if(leftWidth < leftTotal){
                leftWidth = 0;
                nnn = 0;
            }
        }, 2000);
    };

play();
    $(".linNum a").hover(function(){
        $(".linNum a").removeClass("linActive");
        $(this).addClass("linActive");
        var nn = $(this).index();
        leftWidth = -nn * imgWidth;
        $(".linBoxImg").animate({left:leftWidth});
        clearInterval(ok);
    }, function(){
        $(this).removeClass("linActive");
        play();
    });
    $(".linNum a").click(function(){ // 清除点击
        return false;
    });
});
</script>
</body>
</html>

jquery 幻灯片的更多相关文章

  1. SlidesJS - 老牌的响应式 jQuery 幻灯片插件

    SlidesJS 是一款老牌的 jQuery 幻灯片插件,经过多年的发展,已经成为一款功能齐全,设计精巧的幻灯片插件.支持循环.自动播放功能和淡入淡出过渡效果,并且能够自动生成分页,可以帮助开发者制作 ...

  2. Skippr – 轻量、快速的 jQuery 幻灯片插件

    Skippr 是一个超级简单的 jQuery 幻灯片插件.只是包括你的网页中引入 jquery.skippr.css 和 jquery.skippr.js 文件就能使用了.Skippr 能够自适应窗口 ...

  3. 18款 非常实用 jquery幻灯片图片切换

    1.jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换. 查看演示>& ...

  4. 锋利的jQuery幻灯片实例

    //锋利的jQuery幻灯片实例 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  5. Prezento – 轻量、简单的 jQuery 幻灯片插件

    Prezento 是一个超级简单的 jQuery 幻灯片插件.可以让你网页以新颖的交互方式呈现.另外,Prezento 支持响应式设计,配置项也很灵活,可以根据你需要的效果配置. 您可能感兴趣的相关文 ...

  6. 60款很酷的 jQuery 幻灯片演示和下载【转】

    jQuery 是一个非常优秀的 JavaScript 框架,使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入漂亮的效果,其中之一就是幻灯片效果的实现,这是一种在有限的网页空间内展 ...

  7. 基于bootstrup3全屏宽度的响应式jQuery幻灯片特效

    这是一款效果非常酷的基于Bootstrup3.x和HTML5的响应式全屏宽度jQuery幻灯片特效.该幻灯片能自适应屏幕的宽度,使用HTML5的data属性来指定幻灯片所需的各种属性.使用简单,界面美 ...

  8. 12款jQuery幻灯片插件和幻灯片特效教程

    jQuery 使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入一些非常好的效果.滑块和幻灯片效果是常用的内容展示方式之一,这是一种在有限的网页空间内展示系列项目时非常好的方法.今 ...

  9. 强大实用的jQuery幻灯片插件Owl Carousel

    演 示 下 载 简介 Owl Carousel 是一个强大.实用但小巧的 jQuery 幻灯片插件,它具有一下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及 ...

  10. lightslider-支持移动触摸的轻量级jQuery幻灯片插件

    插件简介 lightslider是一款轻量级的响应式jQuery幻灯片插件.lightslider幻灯片插件能够支持移动触摸设备,它可以制作为带缩略图的内容幻灯片,或者制作为无限循环的旋转木马.它的特 ...

随机推荐

  1. openstack kvm 虚拟机磁盘差异衍生

    1, openstack虚拟实例备份之--多镜像格式多镜像文件合并为一个镜像文件衍生-差异镜像文件    /var/lib/nova/instances/b0abc22f-1a73-4079-b1bc ...

  2. etc下

    用户账号与密码参数:  /etc/passwd  .  /etc/shadow 用户组相关方面的条件:     /etc/group   .   /etc/gshadow 用户个人文件数据:   /h ...

  3. hdu1698(线段树的区间替换)

    HDU1698 #include <bits/stdc++.h> using namespace std; #define Maxn 1001000*4 struct Node{ int ...

  4. php-mysql结果集函数比较

    本节主要介绍了获取查询结果集的4个函数,此处对它们进行综合比较.     ● mysql_result():优点在于使用方便:而缺点在于功能少,一次调用只能获取结果数据集中的一行记录,对较大型的数据库 ...

  5. Jsp中的EL表达式

    EL表达式作用: 向浏览器输出域对象中的变量值或表达式计算的结果!!! 语法: ${变量或表达式} 可以通过page指令来设置EL表示是否启用,false是不启用,true是启用,默认是true &l ...

  6. 绘制3D的托卡马克位形图的matlab脚本文件 ThreeD.m

    % 绘制3D的托卡马克位形图, (V 0.1 by Jiale Chan for Y. H. Huang) % Dee Formula % 特征参数     rzero = 2.0;     rmax ...

  7. CSS3实现兼容性的渐变背景效果

    一.CSS3实现兼容性渐变背景效果,兼容FF.chrome.IE 渐变效果,现在主流的浏览器FF.Chrome.Opera.IE8+都可以通过带有私有前缀的CSS3属性来轻松滴实现渐变效果,IE7及以 ...

  8. 01 Access数据库 测试连接

    附件:http://files.cnblogs.com/xe2011/AccesssConnectionState.rar using System.Data.OleDb; using System. ...

  9. 如何在Byte[]和String之间进行转换

    源自C#与.NET程序员面试宝典. 如何在Byte[]和String之间进行转换? 比特(b):比特只有0 1,1代表有脉冲,0代表无脉冲.它是计算机物理内存保存的最基本单元. 字节(B):8个比特, ...

  10. android开发之PreferenceScreen使用详解

    是在惭愧,学习android也有一段时间了,今天才是第一次接触PreferenceScreen.记录下来,与大家分享. 本文参考:http://lovezhou.iteye.com/blog/1020 ...