banner淡出效果

<div class="banner">
		<div class="ban"></div>
		<ul class="ban_bar">
			<li><a href="" img="images/banner.jpg"><img src="images/banner_dadian.png" alt=""></a></li>
			<li><a href="" img="images/banner2.jpg"><img src="images/banner_xiaodian.png" alt=""></a></li>
			<li><a href="" img="images/banner3.jpg"><img src="images/banner_xiaodian.png" alt=""></a></li>
			<li><a href="" img="images/banner4.jpg"><img src="images/banner_xiaodian.png" alt=""></a></li>
		</ul>
	</div>

function banner_start(){

	function changeImg(){
		var strPath = arguments[0];
		$(".banner").css("background","url("+ strPath +") center");

		$(".banner .ban").fadeOut("slow",function(){
			$(".banner .ban").css("background","url("+ strPath +") center");
			$(".banner .ban").show();
		});
	}
	$(".banner li a").click(function(){
		changeImg($(this).attr("img"));
		$(".banner li a img").attr("src","images/banner_xiaodian.png");
		$(this).find("img").attr("src","images/banner_dadian.png");
		return false;
	});

	var i = 1;
	setInterval(function(){
		$(".banner li a")[i].click();
		i++;
		i = i % 4;
	},2000);
	$(".banner li a")[0].click();
}
时间: 2024-11-29 02:51:40

banner淡出效果的相关文章

javascript 图片淡入淡出效果 实例源代码

? 1 代码说明:把代码粘贴好之后,需要更改html代码中的图片路径,即可执行成功.<br>后面还有对js代码的详细说明,希望大家好好消化,好好理解.<br><br>html源代码: 1 <head> 2 <title>图片切换</title> 3 <script type="text/javascript" src="图片切换.js"></script> 4 <l

淡入淡出效果 (jQuery)

1jQuery中淡出动画fadeOut 让元素在页面不可见,常用的办法就是通过设置样式的display:none.除此之外还可以一些类似的办法可以达到这个目的.这里要提一个透明度的方法,设置元素透明度为0,可以让元素不可见,透明度的参数是0~1之间的值,通过改变这个值可以让元素有一个透明度的效果.常见的淡入淡出动画正是这样的原理. fadeOut()函数用于隐藏所有匹配的元素,并带有淡出的过渡动画效果 所谓"淡出"隐藏的,元素是隐藏状态不对作任何改变,元素是可见的,则将其隐藏. .fa

学习Jammendo代码的心路历程(一)简单的淡出效果实现

最近在看 Jammendo代码,打算将学习过程简单的记录下来,下面开始第一篇: 打开Jammendo运行之后,出弹出一个对话框,跳过对话框之后,会有一个淡出界面跳转到首页效果的实现.那么这个效果是怎么实现的呢,其实就是Animation中动画淡出的效果——原理大概是layout不透明变成全透明这样一个原理. 我这里用到的自定义endAnimation,是执行的动画效果,这里找到我事先写好的fade_out.xml,也就是一个简单的淡出效果实现: <?xml version="1.0&quo

实现淡入淡出效果的组件,继承自JComponent

由于仅贴出代码,供有缘人参考. import java.awt.AlphaComposite; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import javax.swing.JComponent; import javax.swing.Timer; public abstract cl

(转)winform Form 淡入淡出效果

原文地址:http://blog.csdn.net/a237428367/article/details/5933565 using System.Runtime.InteropServices; public class Win32 { public const Int32 AW_HOR_POSITIVE = 0x00000001; // 从左到右打开窗口 public const Int32 AW_HOR_NEGATIVE = 0x00000002; // 从右到左打开窗口 public c

h5+css3最简单的图片飞入以及淡入淡出效果

正如很多小伙伴们所知道的,楼主最近在开发移动端的响应式布局的自适应页面了,现在分享一个刚写完的小demo html: <!doctype html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-sca

文字淡出效果

1.设置动画 模仿一些软件文字慢慢淡出效果,主要用到移动动画(负责view移动),缩放动画(负责view在移动过程中不断的缩小)和透明度动画(在移动的过程中减少文字透明度). <span style="font-family:Comic Sans MS;font-size:14px;">int[] location = new int[2]; tv_score_animation.getLocationInWindow(location); //获取当前view的位置<

jquery总结06-动画事件03-淡入淡出效果

.fadeout()淡出 .fadein()淡入 .fadeTaggle()淡入淡出切换 .fadeTo()淡入设定透明度 淡入淡出fadeIn与fadeOut都是修改元素样式的opacity属性,但是他们都有个共同的特点,变化的区间要么是0,要么是1 fadeIn:淡入效果,内容显示,opacity是0到1fadeOut:淡出效果,内容隐藏,opacity是1到0 .fadeTo( duration, opacity ,callback)  opacity 可以自己设置 操作元素的显示和隐藏可

【jQuery】利用淡入淡出效果实现兼容IE6的告警提示

其实我觉得告警提示的话,直接用一个Alert就最好的.开门见山,直接让用户明白你当前系统的意思,关键是Alert这东西就是再破的浏览器都必须兼容,不然你它丫的做毛浏览器啊?但是,在现在越来越觉得Alert不美观,而且开始有"弹窗挺吓人"的思潮,因此,告警提示你必须做得好看一点.在Javascript的透明度的操控比较艰难的前提下,jQuery的简单淡入淡出效果是你的选择.之所以选择jQuery,是因为这东西能够很好地兼容IE6. 一.基本目标 当输入框的输入内容的字符数无论中文与英文大