今天上班没事,就自己琢磨着写一下图片轮播,可是没想到,哈哈竟然写出来啦,下面就贴出来代码,作为纪念保存下下哈:

<body style="text-align: center;">

    <div id="img" style="background: gray;opacity: 1;width: 100%;height: 600px;margin: 0 auto;position: relative;overflow: hidden;">

        <div class="img1" style="width: 100%;height: 100%;position: absolute;left: -100%">

            <img src="1.jpeg" style="background: yellow;width: 100%;height: 600px">

        </div>

        <div class="img2 ratato" style="float: left;position: absolute;width: 100%;height: 100%;left: 0">

            <img src="2.jpg" style="background: red;width: 100%;height: 600px">

        </div>

        <div class="img3" style="float: left;position: absolute;width: 100%;height: 100%;left: 100%">

            <img src="3.jpg" style="background: blue;width: 100%;height: 600px">

        </div>

    </div>

    <div>

        <a href="javascript:void(0);" onclick="up()">上一页</a>

        <a href="javascript:void(0);" onclick="next()">下一页</a>

    </div>

    <script type="text/javascript">

        var img1,img2,img3;//定义全局变量用来接收DOM对象

        var t1,t2,t3,t;

        $(function(){

            t = setTimeout(function(){

                test();

            },4000)//延迟函数,带dom'准备就绪时间,延迟4秒执行test函数

            // clearTimeout(t);

            function test(){

                $('.img2').animate({

                    left:'100%'

                })//将class为img2的div通过动画向右移动整个容器的宽度,下面动画同理可得

                $('.img1').animate({

                    left:'0px'

                })

                img3 = $('.img3').remove();

                $("#img").prepend(img3);

                img3.css('left','-100%')

                t1 = setTimeout(function(){

                    test1();

                },4000)

            }

            function test1(){

                $('.img3').animate({

                    left:'0px'

                })

                $('.img1').animate({

                    left:'100%'

                })

                img2 = $('.img2').remove();

                $('#img').prepend(img2);

                img2.css('left','-100%')

                t2 = setTimeout(function(){

                    test2()

                },4000);

            }

            function test2(){

                img2.animate({

                    left:'0px'

                })

                img3.animate({

                    left:'100%'

                })

                img1 = $('.img1').remove();

                img1.css('left','-100%');

                $('#img').prepend(img1);

                t3 = setTimeout(function(){

                    test()

                },4000)

            }

        })

        // function up(){

        //     clearTimeout(t);

        //     clearTimeout(t1,t2,t3,t);

        //     var a = $('#img').children().eq(1);

        //     a.children().eq(0).attr('class','ratato');

        //     // a.attr('class','ratato');

        //     // a.animate({

        //     //     left:'-100%'

        //     // })

        //     // a.next().animate({

        //     //     left:'0px'

        //     // });

        //     // var next = a.prev().remove();

        //     // // alert(next.attr('class'));

        //     // a.next().after(next);

        //     // next.css(

        //     //     'left','100%'

        //     // )

        // }

        // function next(){

        // }

    </script>

</body>

html+jq实现简单的图片轮播的更多相关文章

  1. 使用jQuery做简单的图片轮播效果

      一.本特效主要用到的前端知识点 CSS中绝对定位(absolute)CSS实现垂直居中jQuery中简单的淡入淡出动画效果(fadeIn,fadeOut)定时器(setInterval,clear ...

  2. jq插件处女座 图片轮播

    好久没写博客了,变得好懒呀,无地自容.最近一直在学sass和jq插件的写法,照猫画虎的谢了一个jq的插件,也算是第一次真正称得上插件的插件 ,废话不多说 上代码 (function($) { $.fn ...

  3. JQuery简单实现图片轮播效果

    很多页面都需要用到界面轮播,但是用原生js相对来说比较复杂,用jQuery实现效果比较迅速,写个简单的demo 1.首先在HTML页面要放置轮播图案位置插入div,这里写了轮播图片数量为3张,所以定义 ...

  4. 纯JS写最简单的图片轮播

    非常简单的一个大图轮播,通过将控制显示位置来进行轮播效果,写来给正在学习的新手朋友们参考交流. 先看效果:(实际效果没有这么快) 先看布局: <div id="display" ...

  5. 【原生JS】写最简单的图片轮播

    非常简单的一个大图轮播,通过将控制显示位置来进行轮播效果,写来给正在学习的新手朋友们参考交流. 先看效果:(实际效果没有这么快) 先看布局: <div id="display" ...

  6. 用Vue实现一个简单的图片轮播

    本文已收录至https://github.com/likekk/studyBlog欢迎大家star,共同学习,共同进步.如果文章有错误的地方,欢迎大家指出.后期将在将GitHub上规划前端学习的路线和 ...

  7. 使用Handler和Timer+Timertask实现简单的图片轮播

    布局文件就只放了一个简单的ImageView,就不展示了. 下面是Activity package com.example.administrator.handlerthreadmessagedemo ...

  8. js实现简单的图片轮播

    js代码如下 <script type="text/javascript"> var n=1; var map=new Array(); map[0]=new Imag ...

  9. 纯CSS3代码实现简单的图片轮播

    以4张图片为例:1.基本布局:将4张图片左浮动横向并排放入一个div容器内,图片设置统一尺寸,div宽度设置4个图片的总尺寸,然后放入相框容器div,相框设置1个图片的大小并设置溢出隐藏,以保证正确显 ...

随机推荐

  1. <customErrors>节点说明1

    <customErrors>节点用于定义一些自定义错误信息的信息.此节点有Mode和defaultRedirect两个属性, 其中defaultRedirect属性是一个可选属性,表示应用 ...

  2. Linux shell 脚本中”2>&1″的含义解释

    脚本是:nohup /mnt/Nand3/H2000G  >/dev/null  2>&1 &   对于& 1 更准确的说应该是文件描述符 1,而1 一般代表的就是 ...

  3. 关于——NSThread

    创建.启动线程 NSThread *thread = [[NSThread alloc] initWithTarget:self selector:@selector(run) object:nil] ...

  4. CIPAddressCtrl控件

    CIPAddressCtrl m_ipCtrl; 1.获取控件IP值 int GetAddress(byte& byteFirst, byte& byteTwo, byte& ...

  5. 3.4 C与汇编程序的相互调用

    为了提高代码执行效率,内核源代码中有些地方直接使用了汇编语言编制.这就会涉及在两种语言编制的程序之间相互调用的问题. 函数调用包括从一块代码到另一块代码之间的双向数据传递和执行控制转移.数据传递通过函 ...

  6. Socket 接收本地短连接并转发为长连接 多线程

    import java.io.IOException; import java.io.InputStream; import java.io.OutputStream; import java.io. ...

  7. getAttribute：取得属性； setAttribute：设置属性。

    input.setAttribute("title"); 当它是一个值,就是取值. input.setAttribute("title", "hell ...

  8. DEVICE_OBJECT结构参数

    typedef struct DECLSPEC_ALIGN(MEMORY_ALLOCATION_ALIGNMENT) _DEVICE_OBJECT { CSHORT Type; USHORT Size ...

  9. UCOS 杂项 笔记

    1.  建立任务和建立数据队列  哪个先建立? 经过试验得知,数据队列和任务的建立先后没有顺序,都可以正常运行. 2.关于主函数的面试问题. 主函数写法有:   int  main()    和voi ...

  10. bootstrap--- 两种bootstrap multiselect组件大比拼

    http://www.cnblogs.com/landeanfen/p/5013452.html 1.第一种可以兼容IE,第二种不能兼容