<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. MUH and Cube Walls

    Codeforces Round #269 (Div. 2) D:http://codeforces.com/problemset/problem/471/D 题意:给定两个序列a ,b, 如果在a中 ...

  2. 介绍一个超好用的HICHARTS扩展插件

    因为需要,所以HIGHCHARTS了解一下是很有必要的. 但原始应用确实效率不行. 刚好,现在有个需求是从一系列的JSON里抽出表格数据,再显示图形. jquery.highchartsTable.j ...

  3. PHP basename() 函数

    定义和用法 basename() 函数返回路径中的文件名部分. 语法 basename(path,suffix) 参数 描述 path 必需.规定要检查的路径. suffix 可选.规定文件扩展名.如 ...

  4. jmeter linux使用经验小结

    1. 确认务必安装了JDK,并且把路径配置OK.否则执行会报错. 2. 当做负载机时,在hosts 配置上    你的ip   你的hostname  或者使用./bin/jmeter-server ...

  5. github Git 原理简介

    由于Git是一个DVCS(Distributed Version Control System,分布式版本控制系统),不同于传统的CVS/SVN版本系统那样必须由一个中央服务器来管理所有的版本记录,它 ...

  6. 【Linux安全】查看是否存在特权用户以及是否存在空口令用户

    查看是否存在特权用户 通过判断uid是否为0来查找系统是否存在特权用户,使用命令awk即可查出. [root@pentester ~]# awk -F: '$3==0 {print $1}' /etc ...

  7. 【Linux远程管理】RDP协议远程管理

    RDP(Remote Desk Protocol).远程桌面协议,常用的Windows操作系统的远程桌面管理就就是基于该协议. 而在Linux下,我们也是可以找到开源的rdp server的,这就是x ...

  8. Android 图片从网页中获取并动态加载到listview中

    实现功能: 效果图: 代码:这里

  9. 【HDOJ】Power Stations

    DLX.针对每个城市,每个城市可充电的区间构成一个plan.每个决策由N*D个时间及N个精确覆盖构成. /* 3663 */ #include <iostream> #include &l ...

  10. Sublime Text主题下载、安装与配置

    从下面地址下载主题包,以下载第一个为例,解压缩并重命名为Theme – Flatland 备注:下载好的文件中  .sublime-theme后缀的表示界面主题(theme),.tmTheme表示颜色 ...