<!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>
    <title></title>
    <style>
        #imgContainer
        {
            width: 990px;
            height: 540px;
            border: 1px solid red;
            /*设置绝对定位，子元素的绝对定位是相对于父元素的*/
            position : absolute;
            left:10px;
            top:10px;
        }
        #imgContainer img
        {
            width: 990px;
            height: 540px;
            position: absolute;
            left: 0px;
            top: 0px;
        }
        #imgContainer div
        {
            position: absolute;
        }
        #imgContainer .imgTip
        {
            border: 1px solid blue;
            background-color: green;
            color:white;
            padding: 3px;
            width: 10px;
            cursor: pointer;
            z-index: 100;
            bottom: 10px;
        }
    </style>
    <script src="scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script>
        var changeImgId;//自动轮换图片的编号
        //定义一个图片集合，指定图片的路径信息
        var list = ['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg'];
        $(function () {
            $.each(list, function (index) {
                //根据数组生成所有的img图片
                $('<img src="' + this + '"/>')
                .appendTo('#imgContainer');
                //根据图片生成数字提示
                $('<div class="imgTip">' + (index + 1) + '</div>')
                .css('right', (4 - index) * 20 + 'px')
                .appendTo('#imgContainer');
            });
            //设置低1张图片显示
            $('#imgContainer>img:gt(0)').hide();
            //设置提示数字的事件
            $('#imgContainer>.imgTip').hover(function () {
                //指向数字
                //根据索引找到图片对象
                $('#imgContainer>img').eq(parseInt($(this).text()) - 1)
                //将指向索引的对应的图片以动画的形式展示出来，
                    .slideDown(1000)
                //将其他图片以动画的形式隐藏
                    .siblings('img')
                    .fadeOut(1000);
                //设置指向div的背景色
                $(this).css('background-color', 'blue')
                    .siblings('.imgTip').css('background-color', 'green');
                //清除自动播放的计时器
                clearInterval(changeImgId);
                //更改图片索引
                imgIndex = parseInt($(this).text()) - 1;
            }, function () {
                //移开数字
                changeImgId = setInterval(changeImg, 2000);
            });
            //完成自动切换图片功能
            changeImgId = setInterval(changeImg, 2000);
            //默认让第一个数字背景为蓝色
            $('#imgContainer>.imgTip:eq(0)').css('background-color', 'blue');
        });
        var imgIndex = 0;
        //切换图片的代码
        function changeImg() {
            imgIndex++;
            if (imgIndex >= list.length) {
                imgIndex = 0;//若果是最后一张，就变成第一张
            }
            $('#imgContainer>img').eq(imgIndex)
            //将指向索引的对应的图片以动画的形式展示出来，
                    .slideDown(1000)
            //将其他图片以动画的形式隐藏
                    .siblings('img')
                    .fadeOut(1000);
            //将指定的数字索引的div设置背景色
            $('#imgContainer>.imgTip').eq(imgIndex)
                .css('background-color', 'blue')
                .siblings('.imgTip').css('background-color', 'green');
        };
    </script>
</head>
<body>
    <div id="imgContainer"></div>
</body>
</html>

Jquery的动态切换图片的更多相关文章

  1. 基于jQuery左右滑动切换图片代码

    分享一款基于jQuery左右滑动切换图片代码.这是一款基于jQuery实现的左右滑动切换焦点图代码.效果图如下: 在线预览   源码下载 实现的代码: <div class="v_ou ...

  2. Core Animation一些Demo总结 （动态切换图片、大转盘、图片折叠、进度条等动画效果）

    前一篇总结了Core Animation的一些基础知识,这一篇主要是Core Animation 的一些应用,涉及到CAShapeLayer.CAReplicatorLayer等图层的知识. 先看效果 ...

  3. 新闻动态切换图片html(flash)

    效果图: 代码: <table id="table_zi"> <tr> <td class="width330"> < ...

  4. 给img添加类名可以动态切换图片

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  5. js动态切换图片

    <script language =javascript > $(function () { initAds(); }); function initAds() { var curInde ...

  6. Jquery点击数字切换图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. jQuery箭头切换图片 - 学习笔记

    jQuery箭头切换图片 布局 3d位移 变形原点 jQuery transform:translate3d(x,y,z):        x 代表横向坐标移向量的长度       y 代表纵向坐标移 ...

  8. 原生js点击按钮切换图片

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. JQuery实现点击按钮切换图片(附源码)--JQuery基础

    JQuery实现切换图片相对比较简单,直接贴代码了哈,有注释噢!疑问请追加评论哈,不足之处还请大佬们指出! 1.案例代码: demo.html: <!DOCTYPE html><ht ...

随机推荐

  1. grep用法

    正则表达式只是一种表示法,只要工具支持这种表示法, 那么该工具就可以处理正则表达式的字符串.vim.grep.awk .sed 都支持正则表达式,也正是因为由于它们支持正则,才显得它们强大:在以前上班 ...

  2. BatchPreparedStatementSetter，用法

    spring批量更新数据 ---- BatchPreparedStatementSetter (2007-04-15 15:41:29) 转载▼ 标签: spring batchpreparedsta ...

  3. Android Stdio 无法打开模拟器

    安装好了各种版本的AVD,有个版本4.1,API版本16,219MB的模拟器是可以打开的,但是基本不能用,只能看到首界面,跳转什么的完全不行. 除此之外其它高版本的模拟器都不能用(API版本>2 ...

  4. C++二维数组、指针、对象数组、对象指针

    项目中用到,随手记一下: 1.二维数组.与指针 创建二维数组指针的方式: a.已知一维的大小 1 int **array=new int *[rows]; 2 (for int i=0;i<ro ...

  5. PCF学习知识

    1. 去PCF官网注册一个免费账号,地址是: https://login.run.pivotal.io/login 2.安装PCF的命名,cf cli. 地址https://pivotal.io/pl ...

  6. Java学习——方法

    在这一次的学习中我觉得首先要了解: 什么是方法呢 方法又怎么定义与调用 上面这段代码是我们经常写到的,其实它就是一个方法,其中 public 是修饰符 void是返回值类型 main就是方法名 arg ...

  7. js中的正则

    闭包: 函数在调用的时候会形成私有的作用域,对内部的变量起到保护的作用,这就是闭包: 变量销毁: 1.人为销毁 : var a = 12:   a = null: 2.孜然销毁 : 函数在调用完之后, ...

  8. openSUSE XFCE桌面 多媒体解码器安装

    openSUSE15 leap 在终端命令行安装编解码器: 添加必要的软件源 zypper addrepo -f http://packman.inode.at/suse/openSUSE_Leap_ ...

  9. react-native-svg的使用

    今天学习一下react-native-svg,一如既往,在安装该库的时候,就有一大堆坑等你填. 首先,我新建一个rn项目,按照官方说明先导入库 npm install react-native-svg ...

  10. 使用Axure做验证码之校验验证码（二）

    本次作业,输入验证码,并校验验证码是否正确.上篇文章,介绍了如何获取验证码,本次作业在上次作业的基础上,做进一步的深究. 1.在上次作业中,增加新的元件: 文本框,命名:输入验证码: 增加热区,命名为 ...