<!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. java ee 思维导图

    http://download.csdn.net/download/g290095142/10149996 这是原地址,我觉得很棒,就下载下来用xmind看了看,发现很全面的.

  2. 在eclispe上git 代码滚回

    1.项目 - 鼠标右键 - team - show in history: 2.history窗口 - 选择需要回滚到的版本 - reset - hard:3.项目 - 鼠标右键 - team - p ...

  3. java算法01 - 链表

    1.链表 在Java中实现链表,每个节点都有一个值,然后把它链接到下一个节点.下面来看一下节点的实现 class Node<E> { private E e; private Node&l ...

  4. SharePoint Framework 在web部件中使用已存在的JavaScript库 - JavaScript库的格式

    博客地址:http://blog.csdn.net/FoxDave JavaScript库格式 不同的JavaScript库的编译和打包方式各不相同.一些是以模块的方式打包的,而另一些是以纯脚本运行在 ...

  5. 获取input标签的值

    取文本框值 AfterTiltle: $("[name='AfterTiltle']").val(), 取下拉列表值 AfterType: $("[name='After ...

  6. 简单搭个webapp开发框架

    集成开发工具idea 服务器容器Tomcat 第三方依赖管理maven 暂时不集成 (spring+springmvc+mybatis(数据持久层存取)+dubbo+zookeeper(集群调度)) ...

  7. flock

    为了确保操作的有效性和完整性,可以通过锁机制将并发状态转换成串行状态.作为锁机制中的一种,PHP的文件锁也是为了应对资源竞争.假设一个应用场景,在存在较大并发的情况下,通过fwrite向文件尾部多次有 ...

  8. linux 计划任务 访问某个URL

    1.进入crontab文件的编写状态: crontab -e 2.进入编辑器后,按下 “ i ” 键,进入编辑模式,在编辑模式下,我们写上我们这次需要访问执行的脚本: 59 23 * * * /usr ...

  9. C++编程入门

    学习一门新的程序设计语言的最好方法就是练习编写程序. 每个C++程序都包含一个或多个函数,其中一个必须命名为main.操作系统通过调用main来运行C++程序. 一个函数定义包含四个部分:返回类型:函 ...

  10. 使用Axure做验证码之获取验证码（一）

    本次作业,制作验证码,仅完成获取验证码操作,如下: 分析: 左图为矩形,主要展示验证码(本例设置4位验证码),其中验证码为字母和数字组合: 右图为文本输入框,主要设置点击事件,即点击文本文字,矩形框中 ...