html+jq实现简单的图片轮播

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

<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实现简单的图片轮播的更多相关文章

使用jQuery做简单的图片轮播效果
一.本特效主要用到的前端知识点 CSS中绝对定位(absolute)CSS实现垂直居中jQuery中简单的淡入淡出动画效果(fadeIn,fadeOut)定时器(setInterval,clear ...
jq插件处女座图片轮播
好久没写博客了,变得好懒呀,无地自容.最近一直在学sass和jq插件的写法,照猫画虎的谢了一个jq的插件,也算是第一次真正称得上插件的插件 ,废话不多说上代码 (function($) { $.fn ...
JQuery简单实现图片轮播效果
很多页面都需要用到界面轮播,但是用原生js相对来说比较复杂,用jQuery实现效果比较迅速,写个简单的demo 1.首先在HTML页面要放置轮播图案位置插入div,这里写了轮播图片数量为3张,所以定义 ...
纯JS写最简单的图片轮播
非常简单的一个大图轮播,通过将控制显示位置来进行轮播效果,写来给正在学习的新手朋友们参考交流. 先看效果:(实际效果没有这么快) 先看布局: <div id="display" ...
【原生JS】写最简单的图片轮播
非常简单的一个大图轮播,通过将控制显示位置来进行轮播效果,写来给正在学习的新手朋友们参考交流. 先看效果:(实际效果没有这么快) 先看布局: <div id="display" ...
用Vue实现一个简单的图片轮播
本文已收录至https://github.com/likekk/studyBlog欢迎大家star,共同学习,共同进步.如果文章有错误的地方,欢迎大家指出.后期将在将GitHub上规划前端学习的路线和 ...
使用Handler和Timer+Timertask实现简单的图片轮播
布局文件就只放了一个简单的ImageView,就不展示了. 下面是Activity package com.example.administrator.handlerthreadmessagedemo ...
js实现简单的图片轮播
js代码如下 <script type="text/javascript"> var n=1; var map=new Array(); map[0]=new Imag ...
纯CSS3代码实现简单的图片轮播
以4张图片为例:1.基本布局:将4张图片左浮动横向并排放入一个div容器内,图片设置统一尺寸,div宽度设置4个图片的总尺寸,然后放入相框容器div,相框设置1个图片的大小并设置溢出隐藏,以保证正确显 ...

随机推荐

JavaScript 之使用 XMLHttpRequest 上传文件
<div id="div1"> <input type="file" id="uploadfile" style=&quo ...
zepto源码研究 - ajax.js（请求过程中的各个事件分析）
简要:ajax请求具有能够触发各类事件的功能,包括:触发全局事件,请求发送前事件,请求开始事件,请求结束事件等等,贯穿整个ajax请求过程,这是非常有用的,我们可以利用这些事件来做一些非常有意思的事情 ...
你好，C++（28）用空间换时间 5.2 内联函数 5.3 重载函数
5.2 内联函数通过5.1节的学习我们知道,系统为了实现函数调用会做很多额外的幕后工作:保存现场.对参数进行赋值.恢复现场等等.如果函数在程序内被多次调用,且其本身比较短小,可以很快执行完毕,那么 ...
pragram once
#pragma once [1]#pragma once这个宏有什么作用? 为了避免同一个文件被include多次,C/C++中有两种宏实现方式:一种是#ifndef方式,一种是#pragma o ...
《python基础教程》笔记之字典
字典创建字典由多个键值对组成,每个键和对应值之间用冒号隔开,项之间用逗号隔开,而整个字典用一对大括号括起来,如 >>> phonebook={'alice':'0123', 'Be ...
C#数据类型汇总
通用类型系统 C#中,变量是值还是引用仅取决于数据类型所有的数据类型都是对象.因为它们具有自己ide方法和属性 int int_value = 101; //调用*int_value*的比较方法与整 ...
QT文档如何使用
http://blog.csdn.net/chenlong12580/article/details/7389588
hibernate 映射<三>一对一外键键关联
bean 关系: 正向工程: 反向工程: 逆向生成步骤: 生成的xml: ... from hbm_one2one_pk.person person0_ left outer join hbm_one ...
JS Map 简单实现
/* * MAP对象,实现MAP功能 * * 接口: * size() 获取MAP元素个数 * isEmpty() 判断MAP是否为空 * clear() 删除MAP所有元素 * put(key, v ...
在QTreeWidget中删除QTreeWidgetItem
我就想删除topLevelItem stackoverflow上是这样说的: http://stackoverflow.com/questions/9392051/how-do-i-delete-a ...

html+jq实现简单的图片轮播

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

随机推荐

热门专题