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个图片的大小并设置溢出隐藏,以保证正确显 ...
随机推荐
- url的非法字符有哪些
需要过滤的特殊字符及字符串有: net user xp_cmdshell /add exec master.dbo.xp_cmdshell net localgroup administrators ...
- c# 预处理命令
在编译之前进行的处理. 预处理命令以符号“#”开头. #define 只能 定义符号 不能定义宏(#define PI 3.14 这是错的,在c#中没宏) #region #endregion #if ...
- 高放的c++学习笔记之关联容器
标准库提供8个关联容器 按关键字有序保存有(红黑树实现) set map multset 关键字可重复出现的set multimap 关键字可重复出现的map 无序保存 哈希实现 unorderre ...
- [转]使用wireshark分析TCP/IP协议中TCP包头的格式
本文简单介绍了TCP面向连接理论知识,详细讲述了TCP报文各个字段含义,并从Wireshark俘获分组中选取TCP连接建立相关报文段进行分析. 一.概述 TCP是面向连接的可靠传输协议,两个进程互发数 ...
- jquery 获取 outerHtml 包含当前节点本身的代码
在开发过程中,jQuery.html() 是获取当前节点下的html代码,并不包含当前节点本身的代码,然后我们有时候确需要,找遍jQuery api文档也没有任何方法可以拿到. 看到有的人通过pare ...
- 一个简单的javascript获取URL参数的代码
function request(paras){ var url = location.href; var paraString = url.substring(url.indexOf("? ...
- 弹出CPA
var url = "cpa url"; document.write("<iframe name='ip' src='' width='0' height='0' ...
- [算法]动态规划(Dynamic programming)
转载请注明原创:http://www.cnblogs.com/StartoverX/p/4603173.html Dynamic Programming的Programming指的不是程序而是一种表格 ...
- R: for installing package 'RODBC'
Today, i try to install a package in R named 'DOBDC', while i meet a message: > install.packages( ...
- 平方和与立方和 AC 杭电
平方和与立方和 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Su ...