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

<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. starting Intent from ProcessRecord with revoked permission android.permission.CALL_PHONE 的错误

    昨天写个电话拨号器,很简单就一个Edittext和一个button,用来输入号码并且点击按钮拨打电话,但是写好以后报的是安全错误,我上网查了下,原来是缺少授权,于是我在AndroidManifest. ...

  2. 使用ecshop电子商务系统的100个小问题

    1:如何修改网站"欢迎光临本店" 回答:languages\zh_cn\common.php文件中, $_LANG['welcome'] = '欢迎光临本店';将他修改成你需要的字 ...

  3. curl 转载

    CURLOPT_RETURNTRANSFER 选项: curl_setopt($ch, CURLOPT_RETURNTRANSFER,1); 如果成功只将结果返回,不自动输出任何内容. 如果失败返回F ...

  4. 关于@font-face的一些问题

    @font-face 能够加载服务器端的字体文件,让客户端显示客户端所没有安装的字体.[微软的IE 5已经是开始支持这个属性,但是只支持微软自有的.eot (Embedded Open Type) 格 ...

  5. 手机端禁止iPhone字体放大

    /*禁止iphone字体放大 */ html { -webkit-text-size-adjust: none; }

  6. Python自动化运维之9、模块之sys、os、hashlib、random、time&datetime、logging、subprocess

    python模块 用一砣代码实现了某个功能的代码集合. 类似于函数式编程和面向过程编程,函数式编程则完成一个功能,其他代码用来调用即可,提供了代码的重用性和代码间的耦合.而对于一个复杂的功能来,可能需 ...

  7. python_基本语法_01

    离毕业工作还有几个月,本来想早点去公司实习,无奈gb学校不给放.好吧,既然这样,就学门语言. 参考与 http://www.cnblogs.com/vamei ,我是跟着这位博客牛人的博客教程学的,具 ...

  8. Number对象

    <script type="text/javascript"> /* Number对象. 创建Number对象的方式: 方式1: var 变量= new Number( ...

  9. nginx读书日志

    2016.12.20 nginx 功能特性: 既可以作为http服务器,也可以作为反向代理服务器或者邮件服务器 基本服务:处理静态文件,处理索引文件以及支持自动索引 nginx服务器中主要由proxy ...

  10. app 测试点

    以下所有测试最后必须在真机上完整的执行1.安装.卸载测试 在真机上的以及通过91等第三方的安装与卸载 安装在手机上还是sd卡上 2.启动app测试3.升级测试 数字签名.升级覆盖安装.下载后手动覆盖安 ...