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

<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. 在C#中internal关键字是什么意思？和protected internal区别

    我来补充一下,对于一些大型的项目,通常由很多个DLL文件组成,引用了这些DLL,就能访问DLL里面的类和类里面的方法.比如,你写了一个记录日志的DLL,任何项目只要引用此DLL就能实现记录日志的功能, ...

  2. 《CSS网站布局实录》学习笔记（四）

    第四章 CSS网站元素设计 4.1 网站导航 网站导航是网站中最重要的元素.从形式上看,网站导航主要分横向导航.纵向导航.下拉及多级菜单导航灯3种常见形式. 横向导航:作为门户网站的设计而言,主导航一 ...

  3. android JNI （二） 第一个 android工程

    下载NDK 后 它自带有 sample,初学者 可以导入Eclipse 运行 这里 我是自己创建的一个新工程 第一步: 新建一个Android工程 jni_test(名字自取) 第二步:为工程添加 本 ...

  4. CentOS 7 之安装X Window System

    网上说的直接 yum groupinstall "Desktop"经实验,在我的机器上是无效的.我使用的是: yum groupinstall 'GNOME Desktop' 才o ...

  5. JavaScript escape() 函数

    JavaScript escape() 函数 JavaScript 全局对象 定义和用法 escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串. 语法 escape(str ...

  6. python之socket编程

    本章内容 1.socket 2.IO多路复用 3.socketserver Socket socket起源于Unix,而Unix/Linux基本哲学之一就是“一切皆文件”,对于文件用[打开][读写][ ...

  7. python中列表和字典的高级应用

    1.将序列分解为单独的变量 1.1问题 包含n个元素的元组或列表.字符串.文件.迭代器.生成器,将它分解为n个变量 1.2方案 直接通过赋值操作 要求:变量个数要等于元素个数 当执行分解操作时,有时需 ...

  8. mysql 日期比较

    情景是:距离当前到期时间多少天 可以考虑当前系统时间加上某个天数后,与数据库的字段作比较 1.已知的时间>=CURDATE()+10 2.在数据的查询中,考虑到sql语句的优化问题,应减少通配符 ...

  9. 移动端app测试

    对于手机项目(应用软件),主要是进行系统测试. 而针对手机应用软件的系统测试,我们通常从如下几个角度开展测试工作: 功能模块测试: 交叉事件测试: 性能测试: 安全测试: 容量测试: 兼容性测试: 接 ...

  10. quartz2.2.1-测试01

    工程列表: (1)web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app versio ...