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. JavaScript获取元素样式

    原生的JavaScript获取写在标签内部的样式很简单: <div class="test" id="test" style="width:10 ...

  2. 提高jQuery执行效率

    1. 使用最新版本的jQuery jQuery的版本更新很快,你应该总是使用最新的版本.因为新版本会改进性能,还有很多新功能. 下面就来看看,不同版本的jQuery性能差异有多大.这里是三条最常见的j ...

  3. FineUI上传文件应用(三)

    一.文件上传控件 <x:FileUpload runat="server" ID="file" EmptyText="请选择文件" L ...

  4. LNMP优化

        LNMP优化 LNMP优化从系统安全,系统资源占用率,及web服务并发负载这三个方面体现,并   且主要体现在web服务并发负载这一方面.     1:首先进行linux优化加固  Linux ...

  5. gitweb随记

    1.安装gitweb,命令安装即可 apt-get install gitweb 2.clone cgi $ git clone git://git.kernel.org/pub/scm/git/gi ...

  6. String类的使用说明

    (1)Length()取一个字符串的长度:public int length(); public calss StringLength1{ public static void main(String ...

  7. OpenCV——ANN神经网络

    ANN-- Artificial Neural Networks 人工神经网络 //定义人工神经网络 CvANN_MLP bp; // Set up BPNetwork's parameters Cv ...

  8. 最小生成树prim算法———模板

    codevs.cn 最优布线问题 #include<cstdio>#include<cstring> bool u[101]; int g[101][101],minn[101 ...

  9. string 与char* char[]之间的转换

    1.首先必须了解,string可以被看成是以字符为元素的一种容器.字符构成序列(字符串).有时候在字符序列中进行遍历,标准的string类提供了STL容器接口.具有一些成员函数比如begin().en ...

  10. Python核心编程(第九章)--文件和输入输出

    文件内建函数: open()函数提供了初始化输入/输出操作的通用接口 open()基本语法:file_object = open(filename,access_mode='r',buffering= ...