<!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. Disruptor源码分析

    本文将介绍Disruptor的工作机制,并分析Disruptor的主要源码 基于的版本是3.3.7(发布于2017.09.28) 水平有限,如有谬误请留言指正 0. 什么是Disruptor? Dis ...

  2. POJ 1163.The Triangle-动态规划

    The Triangle Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 50122   Accepted: 30285 De ...

  3. (4)java基础知识

    一.注释 java的注释方法主要有三种 1.单行注释 // 2.多行注释 /*  内容 */ 3.文档注释 /** * * */ 这种方法注释用于生成一份API文档,主要说明 方法的功能.参数.返回值 ...

  4. Spring Struts里用到的设计模式

    Bean工厂的Factory模式 AOP的Proxy模式

  5. [BZOJ 3152] 组合子逻辑

    Link: BZOJ 3152 传送门 Solution: 喜闻乐见,gyz出的语文题,题意要看半小时 题意:使用最少的括号将序列分割,对于每个括号中的序列,设最左边的数为$num$,序列中元素个数为 ...

  6. 【枚举】bzoj1709 [Usaco2007 Oct]Super Paintball超级弹珠

    由于子弹的轨迹是可逆的,因此我们可以枚举所有敌人的位置,然后统计他们能打到的位置,这些位置也就是能打到他们的位置咯. O(n*k). #include<cstdio> using name ...

  7. Mysql-库的基本操作

    一 .系统数据库 二 .创建数据库 三 .数据库相关操作 一. 系统数据库 information_schema: 虚拟库,不占用磁盘空间,存储的是数据库启动后的一些参数,如用户表信息.列信息.权限信 ...

  8. 5.10（java学习笔记）容器的同步控制与只读设置

    1.容器的同步控制 像我们平常使用的容器有些是不同步的即线程不安全,例如HashMap等,在多线程时可能出现并发问题. 而有些容器又是同步的,例如Hashtable. 有些时候我们需要将这些不同步的容 ...

  9. Java静态static工具类线程安全问题研究

    针对静态方法有以下一些前提: 静态方法和实例方法的区别是静态方法只能引用静态变量,静态方法通过类名来调用,实例方法通过对象实例来调用 每个线程都有自己的线程栈,栈与线程同时创建,每一个虚拟机线程都有自 ...

  10. 在WPF中合并两个ObservableCollection

    WPF中的ObservableCollection是一个非常常用的集合对象,我们可以通过将它绑定到ListBox之类的集合控件上时,当集合发生变更时,会同步更新到界面上.但是,有的时候我们需要合并两个 ...