<!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. 第一章04：JDK与JRE 区别

    JDK = 开发工具 JRE = 运行程序 跨平台性 java程序 = 可以在任何系统中运行(不分系统) JVM = java虚拟机(不同系统下载不一样的JDK版本)(安装的时候包含在jre里面)

  2. day13笔记

    1:StringBuffer(掌握) (1)用字符串做拼接,比较耗时并且也耗内存,而这种拼接操作又是比较常见的,为了解决这个问题,Java就提供了 一个字符串缓冲区类.StringBuffer供我们使 ...

  3. 汉明码（Hamming）编码与纠错原理

    一 汉明码的编解码说明 (一)编码 Hamming(12,8) N=12,表示编码后的比特长度 K=8,待编码数据的比特长度 R=N-K=4,校验位的比特长度 D=3 汉明距离:相邻行之间不同比特数据 ...

  4. url参数解析 and 日期格式化

    ~function (pro) { //url解析 function queryURLParameter() { var reg = /([^?&=#]+)=([^?&=#]+)/g, ...

  5. sprigmvc 传值jsp页面

    https://blog.csdn.net/qq_41357573/article/details/84675535#如何将controller层值传递到jsp页面

  6. C#的ArrayList与JS的push，转字符串逗号分隔

    拼接字符串是常用的基本代码,但是还是有很多人习惯用"+"拼接字符串,这样做有以下缺点: 1)为了去掉尾部(或头部)分隔符,写法复杂 2)容易出现BUG报错,比如空值 C#中推荐大家 ...

  7. tensorFlow入门实践（二）模块化

    实现过一个例子之后,对TensorFlow运行机制有了初步的了解,但脑海中还没有一个如何实现神经网络的一个架构模型.下面我们来探讨如何模块化搭建神经网络,完成数据训练和预测. 首先我们将整体架构分为两 ...

  8. mysqldumpslow简单使用方法-mysqldumpslow详细用法

    慢查询日志分析工具mysqldumpslow经常使用的参数:-s,是order的顺序----- al 平均锁定时间-----ar 平均返回记录时间-----at 平均查询时间(默认)-----c 计数 ...

  9. gulp的使用(二)之gulpfile.js文件的配置

    Gulpfile.js是什么文件: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她, ...

  10. Spring 基于构造函数的依赖注入

    基于构造函数依赖注入 sprig通过bean创建对象时,会通过bean提供的参数来选择调用某个构造函数.上例中, <constructor-arg ref="spellChecker& ...