<!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>

        .active

        {

            color: Red;

        }

    </style>

    <script src="JS/jquery-1.10.2.min.js" type="text/javascript"></script>

</head>

<body>

    <div id="divOne">

        <ul id="banner">

            <li>

                <img src='http://future.iptid.com/Files/News/52714d00-5a01-4c5a-9a47-41d2ec9d4ca2.jpg' /></li>

            <li style="display: none">

                <img src='http://future.iptid.com/Files/News/a2f39039-d17f-4085-8d99-8c214a474f34.jpg' /></li>

            <li style="display: none">

                <img src='http://future.iptid.com/Files/News/1fd79e78-616f-4fbf-b35f-94703a1017ee.jpg' /></li>

            <li style="display: none">

                <img src='http://future.iptid.com/Files/News/9317e802-7cdb-4acb-823a-49bd9d8e5923.jpg' /></li>

        </ul>

        <div id="dot">

            <ul>

                <li class="active">1 </li>

                <li>2 </li>

                <li>3 </li>

                <li>4 </li>

            </ul>

        </div>

    </div>

    <div id="txtTimer">

    </div>

    <script type="text/javascript">

        var arr = new Array("6000", "8000", "9000", "9000");

                var bannerlength = 0;

                var i = 0;

                var _timer = 0;

                var _stepping = 1000;

                var bannerTimer = null;

                function turnChange() {

                    if (_timer < arr[i]) {

                        _timer += _stepping;

                    }

                    else {

                        _timer = 0;

                        ++i;

                        if (i > bannerlength) {

                            i = 0;

                        }

                        $("#banner li").eq(i).show().siblings().hide();

                        $("#dot li").eq(i).addClass("active").siblings().removeClass("active");

                    }

                    $("#txtTimer").text(_timer);

                };

                $(function () {

                    bannerlength = $("#banner li").length;

                    bannerTimer=setInterval(turnChange, _stepping);

                });

                $(function () {

                    $("#dot li").click(function () {

                        clearInterval(bannerTimer);

                        i = $(this).index();

                        _timer = 0;

                        $("#banner li").eq(i).show().siblings().hide();

                        $("#dot li").eq(i).addClass("active").siblings().removeClass("active");

                        bannerTimer=setInterval(turnChange, _stepping);

                    });

                });

       // setTimeout("show()", arr[i]);

//        function show() {

//            ++i;

//            $("#banner li").eq(i).show().siblings().hide();

//            $("#dot li").eq(i).addClass("active").siblings().removeClass("active");

//            setTimeout("show()", arr[i]);

//        }

//        $(function () {

//            $("#dot li").click(function () {

//                i = $(this).index() - 1;

//                setTimeout("show()", arr[i]);

//            });

//        });

    </script>

</body>

</html>

jquery图片轮播，单张图片轮播时间不同的更多相关文章

  1. 分享jquery实现百叶窗特效的图片轮播

    首先非常感谢网友嘉翼的无私分享,这是他刚在网站扣下来的特效,第一时间与大家分享,jquery实现百叶窗特效的图片轮播 使用方法: 1.引用css文件,css文件里面已经做了注释,基本只需要修改宽高就好 ...

  2. 超级详细 一听就会：利用JavaScript jQuery实现图片无限循环轮播(不借助于轮播插件)

    前言 作为一个前端工程师,无论公司是什么行业,无论你做什么端,基本都会遇到一个避不开的动画效果:循环轮播.做轮播并不难,市场上的轮播插件有很多,其中比较著名的是swiper,使用也非常简单.但轮播插件 ...

  3. 利用JavaScript jQuery实现图片无限循环轮播(不借助于轮播插件)-----转载

    前言 作为一个前端工程师,无论公司是什么行业,无论你做什么端,基本都会遇到一个避不开的动画效果:循环轮播.做轮播并不难,市场上的轮播插件有很多,其中比较著名的是swiper,使用也非常简单.但轮播插件 ...

  4. jQuery仿京东首页广告图片切换图片轮播

    1.效果图如下: 2.源码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  5. iview Carousel 轮播图自适应宽高；iview 轮播图 图片重叠问题；iview tabs 高度互相影响问题；vue this问题；

    最终效果图: 一.轮播图中图片自适应宽高:  <Carousel loop v-bind:height="imgHeight+'px'" v-model="caro ...

  6. JS图片自动和可控的轮播切换特效

    点击这里查看效果:http://hovertree.com/texiao/js/1.htm HTML文件代码如下: <!DOCTYPE html> <html xmlns=" ...

  7. WPF技术触屏上的应用系列（四）: 3D效果图片播放器（图片立体轮放、图片立体轮播、图片倒影立体滚动）效果实现

    原文:WPF技术触屏上的应用系列(四): 3D效果图片播放器(图片立体轮放.图片立体轮播.图片倒影立体滚动)效果实现 去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7 ...

  8. Js实现图片点击切换与轮播

    Js实现图片点击切换与轮播 图片点击切换 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  9. js/html/css做一个简单的图片自动（auto）轮播效果//带注释

    FF(firefox)/chrom/ie稳定暂无bug...注意:请自己建立一个images文件,放入几张900*238的图片(注意图片格式和名字与程序中一致). 1. [图片] 1.JPG 2. [ ...

  10. 用jQuery基于原生js封装的轮播

    我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...

随机推荐

  1. JS获取两个日期的月份差

    function getMonthBetween(startDate,endDate){ startDate=new Date(startDate.replace(/-/g,'/')); endDat ...

  2. php中引用符号(&)的使用详解

    php的引用就是在变量或者函数.对象等前面加上&符号,在PHP 中引用的意思是:不同的名字访问同一个变量内容,下面介绍如何使用PHP的引用 与C语言中的指针是有差别的．C语言中的指针里面存储的 ...

  3. mac下的几个命令-黑苹果之路

    涉及一些文件操作的命令: 1.去掉/加上windows下文件的系统.只读.隐藏等属性,用chflags,nounchg/unchg,nohidden/hidden 2.去掉文件的@属性(这个属性经常导 ...

  4. 使用 Cocos2d-x 3.1.1 创建 Windows Phone 8 游戏开发环境

    cocos2d-x 是目前流行的游戏游戏开发框架,目前最新的版本是 3.1.1, 网上有些教程已经比较老了,本文将会介绍如何使用最新的 3.1.1 创建 Windows Phone 8 开发环境. 本 ...

  5. 004.ASP.NET MVC中的HTML Helpers

    原文链接:http://www.codeproject.com/Articles/794579/ASP-NET-MVC-HTML-Helpers-A-MUST-KNOW 1.什么是HTML Helpe ...

  6. APP完整的启动流程

    0.加载+load方法 1.执行Main函数 2.执行UIApplicationMain函数. 3.创建UIApplication对象,并设置UIApplicationMain对象的代理.UIAppl ...

  7. #define的一些

    // 生成一个字符串 #define NSString(...) [NSString stringWithFormat:__VA_ARGS__]

  8. phpDoc使用说明

    技术文档可以使人们更好得使用他人的代码库,然而,作为开发人员,编写文档确是一件让人头疼的事情.PHPDoc是PHP文档注释的一个标准,它可以实现为代码生成API文档. PHPDoc注释规范: 块注释的 ...

  9. 洛谷P1461 海明码 Hamming Codes

    P1461 海明码 Hamming Codes 98通过 120提交 题目提供者该用户不存在 标签USACO 难度普及/提高- 提交  讨论  题解 最新讨论 暂时没有讨论 题目描述 给出 N,B 和 ...

  10. C++ 中的返回值

    C++中大致有三种返回值:值拷贝(副本),值引用和指针,返回什么类型的值要根据当时情况而定. 如果返回的是大型对象的副本,那么在每一次的函数调用后返回,都会调用该对象类型的拷贝构造函数构造一个新的副本 ...