<!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. 前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）

    写在前面 参考答案及资源在看云平台发布,如果大家想领取资源以及查看答案,可直接前去购买.一次购买永久可看,文档长期更新!有什么意见与建议欢迎您及时联系作者或留言回复! 文档描述 本文是关注微信小程序的 ...

  2. xcode10关于clang -lstdc++.6.0.9报错问题

    因为xcode10已经废弃了libstdc++.6.0.9这个库,所以只需要在你的工程中删除这个库,然后添加libc++这个库就可以了.别的没什么,如果xcode10报错mutable开头的,大部分是 ...

  3. Java NIO学习之Buffer

    Bufer的capacity,position和limit: capacity: 表示buffer的容量. position: 写数据到Buffer中时: 表示当前的位置.初始的position值为0 ...

  4. shell练习题6

    需求如下: 有日志access.log,部分内容如下: 127.0.0.1 - - [03/Jul/2018:00:00:01 +0800] "GET / HTTP/1.1" 20 ...

  5. org.apache.commons.vfs 配置文件里面 密码包含 @

    登录ftp的用户名 sftpuser ,密码 @sftpuser 在配置文件里面 需要 把 @ 转义 成 %40 ftppath=sftp://sftpuser:%40sftpuser@127.0.0 ...

  6. 最近学习了Sqlite3数据库，写一下操作应用以及命令

    首先使用Flask-SQLAlchemy管理数据库 使用pip安装:pip install flask-sqlalchemy 接着要配置数据库,定义模型 关于数据库的操作就不再写了.... 使用Fla ...

  7. npm install报错npm ERR! Maximum call stack size exceeded解决

    给npm降级或者升级 比如: 降级 : npm install -g npm@6.1.0 升级 : npm install -g npm  升级到最新版

  8. PHP 位运算

    $a & $b    a,b二进制后,取得每对应为都有1的部分,然后再转换为十进制 $a | $b      a,b二进制后,取得每对应为只要有1的部分,然后再转换为十进制 $a >&g ...

  9. Unity存储路径

    一.在项目根目录中创建Resources文件夹来保存文件 可以使用Resources.Load("文件名字,注:不包括文件后缀名");把文件夹中的对象加载出来注:此方可实现对文件实 ...

  10. Find Longest common string

    动态规划法: 用二维矩阵来的每个元素来代表两个字符串的字符匹配情况, LCS[i, j]= LCS[i-1, j-1] + 1  , if X[i-1] == Y[J-1]. LCS[i, j] =0 ...