背景大图隔几秒切换(非轮播,淡入淡出)--变形金刚joy007 项目总结
工作日想了好久,周日回家才想出来的。。。

图片切换(非轮播,淡入淡出)
1.切换2.停止
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<style type="text/css">
div{ position: absolute; left: 0px; top: 0px;}
.div1{ width: 800px; height: 400px; background-color: #ff3366;display: none}
.div2{ width: 800px; height: 400px; background-color: #33ff66;} a{ position: absolute; right: 0px;}
</style>
<script type="text/javascript" src="scripts/jquery-1.8.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
});
var c = setTimeout("show1()",1000); function show1(){
console.log(Math.random());
$(".div1").fadeIn(1000);
$(".div2").fadeOut(1000);
c = setTimeout("show2()",2000)
} function show2(){
console.log("may i " + Math.random());
$(".div1").fadeOut(1000);
$(".div2").fadeIn(1000);
c = setTimeout("show1()",1000)
} function clearTimer(){
alert("clearTimer");
clearTimeout(c)
} </script>
</head> <body> <div class="div1"></div>
<div class="div2"></div> <a href="#" onclick="clearTimer()">aaaaa</a> </body> </html>
背景大图隔几秒切换(非轮播,淡入淡出)--变形金刚joy007 项目总结的更多相关文章
- 图片轮播(淡入淡出)--JS原生和jQuery实现
图片轮播(淡入淡出)--js原生和jquery实现 图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成j ...
- 定时器图片轮播淡入淡出基本功能已实现,正在修改BUG中。。(附图效果和源代码)
用JQ写的源码如下: 实现功能: 1,图片自动按顺序轮播,轮播选中的图片透明度为1,其他为0.1: 2,鼠标停在的图片上透明度为1,其他为0.1: 3,鼠标离开,继续轮播,起始位置为鼠标停在的图片的下 ...
- jQuery+html5实现的3D动态切换焦点轮播幻灯片
今天爱编程给网友们分享一款基于jQuery+html5实现的3D动态切换焦点轮播幻灯片,支持左右箭头和圆点按钮播放控制,支持多种不同的3D动态切换特效,自适应全屏显示,兼容360.FireFox.Ch ...
- Js实现图片点击切换与轮播
Js实现图片点击切换与轮播 图片点击切换 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...
- 纯css就能实现可点击切换的轮播图,feel起来很丝滑
前言 轮播图经常会在项目里用到,但是实际上用到的轮播图都是比较简单的,没有复杂的特效,这个时候如果去引入swiper那些库的话,未免就有点杀鸡焉用牛刀了. 所以不如自己手写一个,而今天我要分享的一种写 ...
- jQuery效果:隐藏、显示、切换、滑动、淡入淡出、动画
jQuery效果 隐藏.显示.切换.滑动.淡入淡出.以及动画 1.隐藏与显示(改变:display:none;) hide()--隐藏 show()--显示 toggle()方法:可以使用它来切换hi ...
- JQuery: JQuery效果(隐藏、显示、切换,滑动,淡入淡出,以及动画)
JQuery:效果 JQuery效果有很多,包括隐藏.显示.切换,滑动,淡入淡出,以及动画等.隐藏:JQuery hide() 显示:JQuery show() 切换:JQuery toggle() ...
- js实现相册翻页,滚动,切换,轮播功能
我们在做web开发的时候,前台的效果要求是很高的,因为对于不懂程序的用户来说,前台的视觉冲击,无疑是对我们产品的第一印象. 在完成web图片各种功能上,很多框架有很绚丽的效果,但今天我们来看看用原生的 ...
- 使用angular路由切换后 轮播以及iscrollJs失效的问题
我们在使用angular的时候,路由总是最让人头疼的地方. 在这里为大家解决一些用angular来回切换遗留下的小问题 比如我们在使用ng-route时如果主页面含有轮播图,当你切换到其他页面再切回主 ...
随机推荐
- 走进Linux之systemd启动过程
Linux系统的启动方式有点复杂,而且总是有需要优化的地方.传统的Linux系统启动过程主要由著名的init进程(也被称为SysV init启动系统)处理,而基于init的启动系统被认为有效率不足的问 ...
- UVA 442 二十 Matrix Chain Multiplication
Matrix Chain Multiplication Time Limit:3000MS Memory Limit:0KB 64bit IO Format:%lld & %l ...
- [HDOJ1016]Prime Ring Problem
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1016 原题: A ring is compose of n circles as shown in d ...
- Java开发中经典的小实例-(while(参数){})
import java.util.Scanner;public class Test_while { public static void main(String[] args) { ...
- JS——时间日期控件
原文:http://blog.sina.com.cn/s/blog_621768f30100qmfz.html 今天找到一个还不错的日历控件 下载地址:http://www.my97.net/dp/d ...
- python_way ,day1 编译安装python3、基础及流程控制
本节内容: 1,Python介绍发展史 2,安装 3,Hello World 4,程序 5,变量,字符编码 6,用户输入 7,模块初识 一.python介绍 python的创始人为吉多·范罗苏姆(Gu ...
- jquery动画遮罩
以前一直以为遮罩都是鼠标移上去,改变透明度实现的,后来看到过这样的一个遮罩动画,然后今天自己写了一个,因为弹出的遮罩是圆形的,所以从美观上来说,这个遮罩效果更适合于方形图片. <div clas ...
- MTK Camera 开机启动流程(转载)
一.MTK平台Camera框架 MTK平台的Camera的架构见下图, 这里主要介绍kernel部分和HAL层部分. 1.Kernel 部分主要有两块: 1.1.image sensordriver, ...
- Ajax异步调用使用
//验证通知号重复 function checkinformcodeagage() { var informcode = $("#txtinformcode").val(); if ...
- Python IDE专用编辑器PyCharm下载及配置安装过程(Ubuntu环境)
这几天在折腾Python环境,显示把笔记本安装Ubuntu Linux环境系统,然后基本的Python环境都安装完毕之后需要安装传说中在其平台中最好的代码编辑和管理工具PyCharm,于是就根据网上的 ...