html

<body>

<div id="banner">

<div id="banner_bg"></div><!--标题背景-->

<div id="banner_info"></div><!--标题-->

<ul>

<li class="on">1</li>

<li>2</li>

<li>3</li>

<li>4</li>

</ul>

<div id="banner_list">

<a href="#" target="_blank"><img src="imgs/p1.jpg" title="橡树小屋的blog" alt="橡树小屋的blog"/></a>

<a href="#" target="_blank"><img src="imgs/p5.jpg" title="橡树小屋的blog" alt="橡树小屋的blog"/></a>

<a href="#" target="_blank"><img src="imgs/p3.jpg" title="橡树小屋的blog" alt="橡树小屋的blog"/></a>

<a href="#" target="_blank"><img src="imgs/p4.jpg" title="橡树小屋的blog" alt="橡树小屋的blog"/></a>

</div>

</div>

</body>

css

<style type="text/css">

#banner {position:relative; width:478px; height:286px; border:1px solid #666; overflow:hidden;}

#banner_list img {border:0px;}

#banner_bg {position:absolute; bottom:0;background-color:#000;height:30px;filter: Alpha(Opacity=30);opacity:0.3;z-index:1000;

cursor:pointer; width:478px;}

#banner_info{position:absolute; bottom:0; left:5px;height:22px;color:#fff;z-index:1001;cursor:pointer}

#banner_text {position:absolute;width:120px;z-index:1002; right:3px; bottom:3px;}

#banner ul {position:absolute;list-style-type:none;filter: Alpha(Opacity=80);opacity:0.8; border:1px solid #fff;z-index:1002;

margin:0; padding:0; bottom:3px; right:5px;}

#banner ul li { padding:0px 8px;float:left;display:block;color:#FFF;border:#e5eaff 1px solid;background:#6f4f67;cursor:pointer}

#banner ul li.on { background:#900}

#banner_list a{position:absolute;} <!-- 让四张图片都可以重叠在一起-->

</style>

jquery

< script type = "text/javascript" >

	var t = n = 0,

		count;

$(document).ready(function() {

	count = $("#banner_list a").length;

	$("#banner_list a:not(:first-child)").hide();

	$("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt'));

	$("#banner_info").click(function() {

		window.open($("#banner_list a:first-child").attr('href'), "_blank")

	});

	$("#banner li").click(function() {

		var i = $(this).text() - 1; //获取Li元素内的值，即1，2，3，4

		n = i;

		if (i >= count) return;

		$("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt'));

		$("#banner_info").unbind().click(function() {

			window.open($("#banner_list a").eq(i).attr('href'), "_blank")

		})

		$("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);

		document.getElementById("banner").style.background = "";

		$(this).toggleClass("on");

		$(this).siblings().removeAttr("class");

	});

	t = setInterval("showAuto()", 4000);

	$("#banner").hover(function() {

		clearInterval(t)

	}, function() {

		t = setInterval("showAuto()", 4000);

	});

})

function showAuto() {

	n = n >= (count - 1) ? 0 : ++n;

	$("#banner li").eq(n).trigger('click');

} < /script>

　　

jquery渐隐轮播的更多相关文章

  1. 12款经典的白富美型—jquery图片轮播插件—前端开发必备

    图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...

  2. Nivo Slider - 世界上最棒的 jQuery 图片轮播插件

    Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如 ...

  3. jquery图片轮播插件slideBox

    效果预览: 源代码下载: jQuery图片轮播(焦点图)插件jquery.slideBox 特点:兼容IE6+,Chrome,Firefox,Opera,safari,可左右,可上下,可快可慢,可指定 ...

  4. Jquery 图片轮播实现原理总结

    Jquery 图片轮播实现原理总结 以前要做图片轮播效果的时候,总是在网上找一段jquery的复制粘贴进去,只索取不奉献,今个就把我对这个的实现原理讲解一下. 首先说下,我在网上找的例子全是用的UL ...

  5. 用jQuery实现轮播图效果，js中的排他思想

    ---恢复内容开始--- jQuery实现轮播图不用单独加载. 思路: a. 通过$("#id名");选择需要的一类标签,获得一个伪数组 b.由于是伪数组的原因,而对数组的处理最多 ...

  6. 用js和jQuery做轮播图

    Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...

  7. CSS+jQuery实现轮播

    CSS+jQuery实现轮播 CSS jQuery 前端  实现功能: 自动轮播: 鼠标放在上面停止轮播: 鼠标放在上面显示左右切换的按钮: 鼠标放在小圆圈上显示对应的图片: 轮播效果图 style. ...

  8. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  9. Jquery插件---渐隐轮播

    //需求:打开网页时,每秒钟自动切换下一张图片内容.也可以用鼠标点导航按钮进行图片切换 //代码如下 <!DOCTYPE html> <html lang="en" ...

随机推荐

  1. ado.net数据库操作（1）

    这些都是网上搜索到的,我把他放在自己的博客里,作为笔记 1.1创建数据库连接(sqlserver) <%@ Import Namespace="System.Data" %& ...

  2. arc engine - IName

    IName对象是一个代表性对象.通过使用IName对象,可以访问它所代表的对象的一些基本属性,而不用将整个对象调入内存.我们用IWorkspace 获得一个Workspace,那可是会调入内存的,而I ...

  3. 洛谷 P3383 【模板】线性筛素数

    P3383 [模板]线性筛素数 题目描述 如题,给定一个范围N,你需要处理M个某数字是否为质数的询问(每个数字均在范围1-N内) 输入输出格式 输入格式: 第一行包含两个正整数N.M,分别表示查询的范 ...

  4. C#限制转换后的double小数点留1位

    glb_timer1WaitSeconds += 0.1; string s = string.Format("{0:f1}", glb_timer1WaitSeconds);

  5. Ruby和Rails开发环境安装

    更新包管理 sudo apt-get update 安装curl sudo apt-get install curl *安装rvm via curl \curl -L https://get.rvm. ...

  6. Hadoop基本原理之一：MapReduce

    1.为什么需要Hadoop 目前,一块硬盘容量约为1TB,读取速度约为100M/S,因此完成一块硬盘的读取需时约2.5小时(写入时间更长).若把数据放在同一硬盘上,且全部数据均需要同一个程序进行处理, ...

  7. CSS Hacks 总结

    CSS hack由于不同的浏览器,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,我们就需要针对不同的浏览器去写不同的CSS,让他能在不同的浏览器中也能得到我们想要的页面效果. CSS ha ...

  8. WP Super Cache 安装与设置方法

    1.首先,永久连接不能使用默认格式 2.修改永久链接格式,中文推荐采用 /%post_id%.html (这下你知道我的.orz哪里来了吧) 如果你和我一样蛋疼愿意为每篇文章写一个英语的post sl ...

  9. PHP第三节笔记

    ●为什么要安装web服务器,和怎么样去了解发送和接受到什么? 1.因为我们的浏览器要取数据,数据是从服务器取出来的. 2.我们可以通过httpwatch工具来获取发送和接收的数据,有利于我们了解的更加 ...

  10. R语言数据处理

    写在前面:数据处理是数据分析与挖掘必不可少的步骤.下面列出一些常用的数据处理操作. 一.类型转换 用class()查看数据的类型,用as.类型名()进行类型转换. > num <- as. ...