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 模仿 html5 placeholder

    <form action="?action=deliver" method="post" class="deliver-form"&g ...

  2. iOS 关于时间戳的一些细节

    最近遇到一个bug,在iPhone上获取当前的时间戳,没有问题,而用iPad来测试的时候,出现了时间戳不对.当时的代码 (需要精确到毫秒,所以*1000) NSTimeInterval t = [[N ...

  3. Mac添加或修改环境变量

    方式1. 终端添加或修改 命令:pico, vim等 方式:pico .bash_profile 方式2. 文本方式添加或修改 1)打开 touch ~/.bash_profile open -t ~ ...

  4. DataTable 导出Excel 下载 (NPOI)

        public class ExcelHelper { public void DownLoadExcelNew(System.Data.DataTable data, Hashtable h, ...

  5. 阅读书目_2014H1

    1.<程序员修炼之道 专业程序员必知的33个技巧>(完成) 注:更多是面向程序员全工作流程的. 2.linux shell脚本攻略 适合初学,但不方便作为参考手册查阅. 3.编写可读代码的 ...

  6. Javascript个人理解

    一. 生成对象的原始模式 假定我们把猫看成一个对象,它有"名字"和"颜色"两个属性. var Cat = { name : '', color : '' } 现 ...

  7. 正式学习React(五) react-redux源码分析

    磨刀不误砍柴工,咱先把react-redux里的工具函数分析一下: 源码点这里  shallowEqual.js export default function shallowEqual(objA, ...

  8. IOS 面试 --- 动画 block

    1 谈谈对Block 的理解?并写出一个使用Block执行UIVew动画? 答案:Block是可以获取其他函数局部变量的匿名函数,其不但方便开发,并且可以大幅提高应用的执行效率(多核心CPU可直接处理 ...

  9. 如何用googletest写单元测试

    http://www.uml.org.cn/c++/201203293.asp googletest是一个用来写C++单元测试的框架,它是跨平台的,可应用在windows.linux.Mac等OS平台 ...

  10. 如何删除textarea的移动版Safari的阴影?

    如何删除textarea的移动版Safari的阴影? 在iphone的Safari上运行网页,textarea无法使用box-shadow样式,而且顶部有内阴影,如何清除? 添加评论 分享   赞同1 ...