<!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. 初学者如何迅速学习web前端开发

    首先告诉你的是,零基础学习开始学习web前端肯定难,web前端的专业程度本身就不简单,学习这事本来就是一件非常煎熬的事情,人都不愿意学习,可是没办法,为了生存掌握一个技能,你必须学,如果你认真的对待, ...

  2. 如何用ESP8266/8285做一个WIFI广告机（虚拟WiFi）

    准备工作 准备一个深圳四博智联科技有限公司的ESP-F 模组.或者四博智联科技的NODEMCU 当我们拿到ESP-F模块后,可以按照以下接线进行测试: 即 VCC.EN 接 3.3v.GPIO15 G ...

  3. redis的特点

    一.Redis 特点 1.Redis 是一个基于内存的高性能key-value数据库, 2.Redis最大的魅力是支持保存多种数据结构,此外单个value的最大限制是1GB,不像 memcached只 ...

  4. Oracle数据库各种名字的区别

    数据库名(DB_NAME).数据库实例名(INSTANCE_NAME).操作系统环境变量(ORACLE_SID).数据库服务名(SERVICE_NAME).数据库域名(DB_DOMAIN)以及全局数据 ...

  5. java往MongDB导入大量数据

    好几月没写博客了~~~ --------------------- 在公司最近在搞用java往MongDB导入数据 现在是我刚导入2000W条数据了 所以就先写上吧,废话也不多说了 MongDB 我本 ...

  6. 贝塞尔（Bezier） 曲线 研究

    贝塞尔曲线最近经常接触到,今天研究了一下. 原理 关于它的原理,网上有很多. 1.一阶 2.二阶 3.多阶 可以看到,多阶可以慢慢降阶为一阶贝塞尔曲线. //一阶 private Vector3 Ba ...

  7. visual c++如何显示行号

    工具 -> 选项 -> 文本编辑器

  8. [RESTful] RESTful是什么，为什么要使用它

    RESTful是什么? 本质:一种软件架构风格 核心:面向资源 解决的问题:降低开发的复杂性,提高系统的可伸缩性 设计概念和准则: 1.网络上所有的事物都可以被抽象为资源 2.每个资源都有唯一的资源标 ...

  9. 从运维的角度理解Iaas、Paas、Saas云计算

    平时我们的运维工作,大致就是了解需求.申请服务器.配置网络.服务器软件安装.应用部署.数据存储.系统调优.平台维护等 按照Iaas.Paas.Saas的三层来分工我们平时的任务: 最底层的Iaas层提 ...

  10. 第一条python语句！