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

<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. 遍历页面上所有TextBox，并赋值为String.Empty

    //不含母板页 foreach (System.Web.UI.Control txtobj in this.Page.Controls)   {     if (txtobj.GetType().Na ...

  2. 配置Windows Server 2008 允许多用户远程桌面连接

    开启远程桌面后,远程访问windows server 2008服务器时,默认只支持一个用户名同时只能创建一个远程连接,新建连接登录后会将前一个就踢掉,有没有办法像windows server 2005 ...

  3. 控制弹出div显示在鼠标附近的位置

    前一个页面: $("#txt_ocname").click(function () { art.dialog.open("/SelPosAll.aspx", { ...

  4. js子窗口修改父窗口内容

    在框架中,我用 JavaScript 获取 JSON 数据,组织成 HTML 代码,最后将其填充至上层文档的一个元素中.按照一般的写法,我们需要用到类似如下的语句: 1.window.parent.d ...

  5. new date() 函数在浏览器中的兼容问题！！

    引言: 同一种语言javascript,在不同的浏览器中,存在语言兼容性问题,本质上是由于不同的浏览器是支持的语言标准和实现上各有差异.本文将基于new Date来创建Date对象来分析这个问题. v ...

  6. Remoting通讯实例

    Remoting通讯可以实现不同应用程序域之间的通信(可以为一台机器不同程序,也可以不同机器上的不同程序) 实例步骤: (1)编写透明代理类 新建一个类库,命名空间:MyRemoting 在该类库中建 ...

  7. the introduction of scrapy1.1 tools

    scrapy xxcommand:输出xxcommand的相关信息 help:scrapy的基本命令,用于查看帮助信息 version:查看版本信息,可见-V参数查看各组件的版本信息: startpr ...

  8. Properties配置文件

    package file; import java.io.FileOutputStream; import java.io.FileReader; import java.io.FileWriter; ...

  9. BufferedReader

    Reader FileReader BufferedReader package file; import java.io.BufferedReader; import java.io.File; i ...

  10. 为什么c程序里一定要写main函数

    一. 学习过程 编写程序f.c: 对其进行编译,正常通过,再对其进行连接,出现错误: 显示的出错信息为: 翻译成中文是:在c0s模块没有定义符号’_main’. 那么这个错误信息可能与文件c0s.ob ...