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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>JQuery实现图片轮播效果 </title>

<script src="http://img.jb51.net/jslib/jquery/jquery14.js" type="text/javascript"></script>

<style type="text/css"><!--

#banner {position:relative; width:478px; height:286px; border:1px solid #666; overflow:hidden; font-size:16px}

#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:4px; 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; z-index:1002;

margin:0; padding:0; bottom:3px; right:5px; height:20px}

#banner ul li { padding:0 8px; line-height:18px;float:left;display:block;color:#FFF;border:#e5eaff 1px solid;background-color:#6f4f67;cursor:pointer; margin:0; font-size:16px;}

#banner_list a{position:absolute;} <! 让四张图片都可以重叠在一起

--></style>

</head> 

<body> 

<p>【实例演示】</p>

<div id="banner">

<div id="banner_bg"></div>

<!--标题背景-->

<div id="banner_info"></div>

<!--标题--> 

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

</ul>

<div id="banner_list">

<a href="#" target="_blank"><img src="http://files.jb51.net/demoimg/201008/o_p1.jpg" title="橡树小屋的blog" alt="橡树小屋的blog" /></a>

<a href="#" target="_blank"><img src="http://files.jb51.net/demoimg/201008/o_p3.jpg" title="橡树小屋的blog" alt="橡树小屋的blog" /></a>

<a href="#" target="_blank"><img src="http://files.jb51.net/demoimg/201008/o_p4.jpg" title="橡树小屋的blog" alt="橡树小屋的blog" /></a>

<a href="#" target="_blank"><img src="http://files.jb51.net/demoimg/201008/o_p5.jpg" title="橡树小屋的blog" alt="橡树小屋的blog" /></a>

</div>

</div>

<script type="text/javascript">// <![CDATA[

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);

$(this).css({"background":"#be2424",'color':'#000'}).siblings().css({"background":"#6f4f67",'color':'#fff'});

});

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>

</body>

</html> 

详细出处参考：http://www.jb51.net/article/24681.htm

（转）jquery实现图片轮播的更多相关文章

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

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

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

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

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

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

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

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

  5. jQuery实现图片轮播

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

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

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

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

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

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

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

  9. html css+div+jquery实现图片轮播

    一直想自己动手做一个图片轮播的控件,查查网上的资料大多引用已经做好的组件,其原理算法不是很清楚,于是自己用jquery写了一个.先看下效果图: 主要界面实现思路如下: 1.新建一个div宽度为100% ...

随机推荐

  1. ASP.NET Core 2.2 基础知识(十一) ASP.NET Core 模块

    ASP.NET Core 应用与进程内的 HTTP 服务器实现一起运行.该服务器实现侦听 HTTP 请求,并在一系列请求功能被写到 HttpContext 时,将这些请求展现到应用中. ASP.NET ...

  2. Android开机过程

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha Android开机过程 BootLoder引导,然后加载Linux内核. 0号进程ini ...

  3. Codeforces 311E Biologist

    Discription SmallR is a biologist. Her latest research finding is how to change the sex of dogs. In ...

  4. 【哈希表】CODEVS1230 元素查找

    #include<cstdio> #include<vector> using namespace std; typedef vector<int>::iterat ...

  5. 【二分】bzoj2083 [Poi2010]Intelligence test

    v[x]记录了x值的出现位置序列. 对每个b中的元素,每次在v[b[i]]中二分. 因此要记录上一次二分到了a数组的哪个位置. #include<cstdio> #include<v ...

  6. java 面向接口编程的理解

    初学者可能在学习中会有很多疑惑,为什么要这样,明明可以那样实现,这样做的好处又是什么? 可能会的人觉得很简单很容易理解,甚至可能觉得问的问题很智障,但对于小白来说可能是苦思冥想都不得其解的. 自己身为 ...

  7. 【MySQL笔记】数据定义语言DDL

    1.创建基本表   create table <表名> (<列名><数据类型>[列级完整性约束条件]                                 ...

  8. 使用IDEA创建package

    1)使用IDEA创建java工程 什么也不选,直接点击Next 无脑继续下一步 点击“Finish”完成工程的创建. 2)在使用IDEA创建了工程之后,首先选中“src”文件夹,然后 紧接着输入包名 ...

  9. Linux下CURL设置请求超时时间

    使用CURL时,有两个超时时间:一个是连接超时时间,另一个是数据传输的最大允许时间. 连接超时时间用--connect-timeout参数来指定,数据传输的最大允许时间用-m参数来指定. 例如: cu ...

  10. delphi执行cmd命令和bat文件

    转载地址:http://blog.csdn.net/hutao1101175783/article/details/42807063 cmd:='echo d | Xcopy '+BasePath+' ...