图片切换(非轮播,淡入淡出)--变形金刚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 项目总结

时间: 2024-10-14 09:50:50

图片切换(非轮播,淡入淡出)--变形金刚joy007 项目总结的相关文章

jquery实现图片轮播淡入淡出效果

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">        * {margin:0; padding:0;}        #container {width:605px; h

轮播-淡入淡出

demo: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>焦点图</title> <script type="text/javascript" src="http://s0.ifengimg.com/static/js/jquery-1.7.2.min_c4de

jQuery效果:隐藏、显示、切换、滑动、淡入淡出、动画

jQuery效果 隐藏.显示.切换.滑动.淡入淡出.以及动画 1.隐藏与显示(改变:display:none;) hide()--隐藏 show()--显示 toggle()方法:可以使用它来切换hide()与show()方法 eg1:显示 <style type="text/css"> *{margin:0;padding:0;} .body{font-size:12px;font-family:"微软雅黑";color:#666;} .yym{wid

利用jQuery实现图片无限循环轮播(不借助于轮播插件)

原来我主要是用Bootstrap来实现轮播图的功能,而这次是用javaScript和jQuery来实现图片无限循环轮播! 用到的技术有:html.css.JavaScript(少).jQuery(主要) 效果展示: html代码: <body> <div id="container"><!-- left:-600px 表示:页面加载出现的第一张图片是1.jp --> <div id="list" style="le

iOS:实现图片的无限轮播(二)---之使用第三方库SDCycleScrollView

下载链接:github不断更新地址:https://github.com/gsdios/SDCycleScrollView 使用原理:采用UICollectionView的重用机制和循环滚动的方式实现图片的无限轮播,播放非常顺畅,解决了UISCrollView使用时从最后一张跳到第一张时的生硬状态. 主要类截图: SDCollectionViewCell:用来重用的item,即显示图片的视图: SDCycleScrollView: 对外提供的一个创建轮播器的接口类,使用者就是直接使用这个类来实现

JQuery: JQuery效果(隐藏、显示、切换,滑动,淡入淡出,以及动画)

JQuery:效果 JQuery效果有很多,包括隐藏.显示.切换,滑动,淡入淡出,以及动画等.隐藏:JQuery hide() 显示:JQuery show() 切换:JQuery toggle() 淡入淡出:JQuery fadeIn().JQuery fadeOut().JQuery fadeToggle().JQuery fadeTo() 滑动:JQuery slideDown().JQuery slideUP().JQuery slideToggle() 动画:JQuery animat

jQuery+html5实现的3D动态切换焦点轮播幻灯片

今天爱编程给网友们分享一款基于jQuery+html5实现的3D动态切换焦点轮播幻灯片,支持左右箭头和圆点按钮播放控制,支持多种不同的3D动态切换特效,自适应全屏显示,兼容360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗,不支持IE8及以下浏览器.横向全屏显示,效果图如下: 在线预览   源码下载 实现的代码. 该幻灯片基于jquery,所以要引用jquery库,另个还有两个js库分别是html5zoo.js和lovelygallery.js.这些js在实例下

js 实现图片间隔循环轮播以及没有间隔的循环轮播

链接地址:http://blog.sina.com.cn/s/blog_75cf5f32010199dn.html 最近做了个图片循环轮播的功能.就是几张图片不断的循环滚动显示. 感觉这个方法不错所以把实现过程记录下来: 图片间隔循环轮播: 1.html里面把要进行轮播的图片用一个容器包起来,用js来控制这个容器滚动,当然最外面的容器要设置overflow:hidden;. 2.css里面控制这个容器的位置,实现滚动就需要用到定位. 3.js里面利用jquery的animate动画函数实现滚动.

【实践】纯jquery实现图片滑动无缝轮播,带左右按钮及控制按钮

在此随笔之前,博主已经做过一次图片滑动轮播,如过你也有看过就会知道里面的效果在自动轮播的时候有一个不太美观的效果,就是当最后一张图片滑动切换到第一张图片的时候会看到一个快速向左滑动的效果,这是很不美观的,当然也有网站是这样做.但博主参照过很多网站的图片轮播基本上都是无缝的(一张紧接着一张),所以博主也决定自己做一个. 做这个之前博主还在某客学院看了视频教程,此方法为纯jquery方法,比js混合jq方法易懂简洁所以有必要给大家分享一下 先上html代码以及css代码 <!doctype html