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. oracle datetime

    to_date('" + Convert.ToDateTime(TCRQ).ToString("yyyy-MM-dd")+"','YYYY-MM-DD'), C ...

  2. http断点续传原理

    断点续传一是断点,一续传. 断点是在下载时,将下载文件分多片,同时进行多片一起下载,如果任务被暂停,暂停的位置就是断点. 续传就是未完成的下载再次开始时,会从上次的断点继续传送. 在下载(或上传)过程 ...

  3. SQL获取选中时间的交集

    如上图:t1,t2代表要选择的时间段,t3,t4代表系统时间. 那么如果要获取选中时间段所有的交集为: 条件1 and ((t3>t1 and t1>t2) or (t3<t2 an ...

  4. Xcode快捷键 ---- 提高效率

    Mac中主要有四个修饰键,分别是Command,Control,Option和Shift.     1. ⌘ + L 搜索行数,输入行数,调到指定行数   2.⌘ + shift + O 查询flie ...

  5. UI基础视图----UIScrollView总结

    UIScrollView是UIKit框架下的很重要的视图类,是UIView的子类.UILabel,UIImageView,UIWebView分别用于展示文字,图片,网页,UILabel通过属性text ...

  6. :before与:after伪类的应用

    1.小三角样式

  7. jQuery图片延迟加载插件

    在一些图片较多的页面上,如果图片都一起加载网页的速度会比较慢,而且也浪费流量. 使用图片延时加载插件就解决这些问题. 方法: 引入jquery和插件文件 <script src="jq ...

  8. win8、win8.1官方版本、及安装密钥

    云盘地址:Windows 8 简体中文专业版+核心版 MSDN 正式版(32位)http://pan.baidu.com/s/1eQgiAiQSHA1:0C4A168E37E38EFB59E88443 ...

  9. ps2keyboard demo code for 8052

    #pragma code symbols debug objectextend #include <reg51.h> /* special function register declar ...

  10. qt之窗口换肤（一个qss的坑：当类属性发现变化时需要重置qss，使用rcc资源文件）

    1.相关文章 Qt 资源系统qt的moc,uic,rcc命令的使用 2.概要    毕业两年了,一直使用的是qt界面库来开发程序,使用过vs08.10.13等开发工具,并安装了qt的插件,最近在做客户 ...