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. ie8 hack

    1.‘\9’: eg:.test { color/*\**/: blue\9 }.header {width:300px;} /* 所有浏览器*/.header {width/*\**/:330px\ ...

  2. document.write 向文档中写内容，包括文本、脚本、元素之类的，但是它在什么时候执行不会覆盖当前页面内容尼？

    当你打开一个页面,浏览器会 调用 document.open() 打开文档 document.write(...) 将下载到的网页内容写入文档 所有内容写完了,就调用 document.close() ...

  3. UVA11388 GCD LCM1 2 -1

    题目: 给你两个数G和L,求a和b,他们的最大公约数为G和最小公倍数为L,输出a最小时的a和b.如果不存在在输出-1. Sample Input   2 1 2 3 4 Output for Samp ...

  4. redis使用Java学习

    一.连接到redis服务 import redis.clients.jedis.Jedis; public class RedisJava { public static void main(Stri ...

  5. 支付宝SDK快速入口链接

    支付宝快捷支付SDK官方网站

  6. UVA442 栈

    C - Matrix Chain Multiplication Crawling in process... Crawling failed Time Limit:3000MS     Memory ...

  7. linux for循环

    一定要记得写后面的分号:http://www.runoob.com/linux/linux-shell-variable.html 这个页面的课程的循环教程是有问题的 for color in yel ...

  8. ORACLE 数据库概述

    1,发展史: 1978年,Orcale诞生 1982年,Orcale3推出了,它是第一个能够运行在大型机和小型机上的关系型数据库 1997年,Orcale公司推出了基于java语言的Orcale8,并 ...

  9. Ftp不能登陆的解决方法

    ftp登陆不了是很经常碰到的事,很多人常常是不加分析就发贴询问.老实说,这样既浪费自己时间,又浪费别人精力,还常常不能得到满意的回答.因此每一位希望从ftp站点发现资源的朋友都有必要学会分析登陆失败的 ...

  10. 写下你的第一个Django应用，第三部分

    这篇指南开始于指南2结束的地方.我们将继续web投票应用和集中注意力在创建公共接口——“view” 理念 一个视图在你的Django应用中一个web页面的“品种”和它通常作为一个特定的函数以及有一个特 ...