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

<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. ngrok内网穿透(微信调试:只试用于微信测试账号)

    一.简介 ngrok:https://ngrok.com 功能:就是把外网地址映射到本地的内网地址 缺点: 1.免费版生成的域名是随机的(由于我是用于调试,就没什么关系,如果是正式生产环境可能需要一个 ...

  2. YOU邮件

    include("class.phpmailer.php");include("class.smtp.php");//获取一个外部文件的内容$mail      ...

  3. bat 小工具

    @echo ************************************************************************:start@echo offset /p ...

  4. 导出函数结构 EXPORT_DIRECTORY

    typedef struct _IMAGE_EXPORT_DIRECTORY { DWORD Characteristics; DWORD TimeDateStamp; //输出表的创建时间 WORD ...

  5. jsp js java

    Java技术 J a v a是一种 简单易用. 完全面向对象. 具有平台无关性且 安全可靠的主要面向I n t e r n e t的开发工具. 自从1 9 9 5年正式问世以来,J a v a的快速发 ...

  6. 复杂事件处理引擎—Esper工作原理

    前面对Esper进行了概述,包括事件类型.事件流.事件窗口以及EPL相关内容.当然,上面的知识,对于简单的Esper开发,应该已经足够,能够根据自己业务需求,做出一个满足需要的Esper应用.但是,真 ...

  7. [工具]前端自动化工具grunt+bower+yoman

    安装过程 安装nodejs 安装grunt,bower,yoeman 命令:(-g 表示全局安装,否则安装到当前目录下) npm install -g grunt-cli npm install -g ...

  8. hdu 3681 Prison Break

    http://acm.hdu.edu.cn/showproblem.php?pid=3681 题意:一个n*m的矩阵,'F'是起点.机器人从F出发,走到G可以充电,走到Y关掉开关,D不能走进,要求把所 ...

  9. Yii 引入 js和css

    //向控制器指定的页面注册新的css文件 Yii::app()->clientScript->registerCssFile(Yii::app()->baseUrl.'/css/my ...

  10. rsyslog imfile 模块说明

    stop() { echo -n $"Shutting down system logger: " killproc -p "${PIDFILE}" -d 30 ...