<html>
<head>
<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>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>

<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()", 2000);
$("#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>

</head>
<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="p1.jpg" height="300px" width="480px" title="橡树小屋的blog" alt="橡树小屋的blog"/></a>
<a href="#" target="_blank"><img src="p2.jpg" height="300px" width="480px" title="橡树小屋的blog" alt="橡树小屋的blog"/></a>
<a href="#" target="_blank"><img src="p3.jpg" height="300px" width="480px" title="橡树小屋的blog" alt="橡树小屋的blog"/></a>
<a href="#" target="_blank"><img src="p4.jpg" height="300px" width="480px" title="橡树小屋的blog" alt="橡树小屋的blog"/></a>
</div>
</div>
</body>
</html>

Jquery实现图片轮播源码的更多相关文章

  1. jQuery个性化图片轮播效果

    jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...

  2. PgwSlideshow-基于Jquery的图片轮播插件

    0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...

  3. jQuery.YesShow - 图片轮播插件（带图片放大功能）

    jQuery.YesShow - 图片轮播插件(带图片放大功能) 使用简单,原文件只要这样就可以了:<div id="yes">         <ul> ...

  4. （转）jquery实现图片轮播

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示

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

  6. 基于jquery的图片轮播 （IE8以上）

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. jQuery实现图片轮播

    之前有碰到过jQuery实现列表自动滚动,这次的图片轮播在原理上与之相同,只有一些细微的差别,就是需要在图片的右下角显示当前图片的序号,效果如下: 先看一看html代码,以及对应的css代码: < ...

  8. 原生js和jquery实现图片轮播特效

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  9. 原生js和jquery实现图片轮播特效(转)

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

随机推荐

  1. gentoo

    http://www.aboutyun.com/thread-8522-1-1.html        .java.io.IOException: Connection reset by peer c ...

  2. Unity3D中的第三人称镜头的脚本控制

    原地址:http://blog.csdn.net/mobanchengshuang/article/details/27591271 好久没有敲Blog了,谢谢大家的留言.关注.私信等支持,但是我好像 ...

  3. Qt for PC，Qt for iOS，Qt for Android （居士的博客）

    http://blog.csdn.net/Esonpo/article/details/38081607 http://blog.csdn.net/Esonpo/article/details/380 ...

  4. linux移植简介[MS2]

    一:修改Makefile 1添加编译选项,2添加时钟 二:图形化配置(make menuconfig) 此时生成zlmage,  可以跑起来 三:对NandFlash配置,yaffs2 文件系统配置, ...

  5. 【HDOJ】2155 小黑的镇魂曲

    线段树+SPFA最短路可以过.或者DP也能过.需要注意的是xl的范围是错的,测试用例中xl可能为0,他妈的,因为这个一直莫名其妙的wa.1. spfa建图增加一倍的点即可(讨论左端点和右端点). /* ...

  6. [Hadoop源码解读]（四）MapReduce篇之Counter相关类

    当我们定义一个Counter时,我们首先要定义一枚举类型: public static enum MY_COUNTER{ CORRUPTED_DATA_COUNTER, NORMAL_DATA_COU ...

  7. BZOJ_1625_ [Usaco2007_Dec]_宝石手镯_(01背包)

    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1625 01背包裸题. p.s.随便点开一道就是水题... 分析 ... #include &l ...

  8. BZOJ_1007_ [HNOI2008]_水平可见直线_(单调栈+凸包)

    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1007 给出一些直线,沿着y轴从上往下看,能看到多少条直线. 分析 由于直线相交,会遮挡住一些直 ...

  9. WordPress Checkout插件跨站脚本漏洞和任意文件上传漏洞

    漏洞名称: WordPress Checkout插件跨站脚本漏洞和任意文件上传漏洞 CNNVD编号: CNNVD-201311-015 发布时间: 2013-11-04 更新时间: 2013-11-0 ...

  10. Guid 的几种形式

    Guid.NewGuid().ToString()得几种格式显示 1.Guid.NewGuid().ToString("N") 结果为:       38bddf48f43c485 ...