<!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. 用WP Super Cache和七牛为你的WordPress网站加速

    众所周知,WordPress一直都是博客建站的首选程序,而现在也有越来越多的企业网站都选择采用WordPress来搭建. WordPress虽好但其过于臃肿且响应速度慢等缺点也为站长们所诟病,目前网上 ...

  2. ThreadLocal深度解析

    本文基于jdk1.8.0_66写成 0. ThreadLocal简介 ThreadLocal可以提供线程内的局部对象,合理的使用可以避免线程冲突的问题比方说SimpleDateFormat是线程不安全 ...

  3. Python:文件操作技巧(File operation)(转)

    Python:文件操作技巧(File operation) 读写文件 # ! /usr/bin/python #  -*- coding: utf8 -*- spath = " D:/dow ...

  4. hscan扫描工具

    在网上发现一篇关于hscan工具的介绍 文章来源: http://book.51cto.com/art/200810/94967.htm 2.4.3  使用HScan获取信息案例 HScan是一款优秀 ...

  5. HDU 多校1.2

    Balala Power! Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)T ...

  6. 大数据DMP画像系统（转载 简介-龙果学院）

    一.目标 1.掌握画像标签开发技巧 2.掌握数据挖掘技巧 3.了解业内画像和DMP系统的架构和开发 4.大数据结合业务场景落地 系统开发要求 涉及的技术要点:spark .elasticsearch. ...

  7. AHOI2009中国象棋

    首先以行为阶段,根据象棋的规则,在同一行中,至多只能有两个炮,同理:在同一列中,至多只能有两个炮思考一个可以覆盖整个状态空间的dp数组:dp[i]表示到了第i行接下来我们想:某列中的炮能否通过位运算求 ...

  8. 【动态规划】【记忆化搜索】CODEVS 3415 最小和 CodeVS原创

    f(l,r,i)表示第i段截第l位到第r位时,当前已经得到的价格最小值,可以很显然地发现,这个是没有后效性的,因为对之后截得的段都不造成影响. 注意水彩笔数=1的特判. 递归枚举当前段的r求解(∵l是 ...

  9. 【带修莫队】bzoj2120 数颜色

    块大小为n2/3. 把询问和修改分开. 每次两个询问之间的修改进行暴力转移,如果修改在上一次询问的区间里,就会对当前状态形成影响. 好慢. #include<cstdio> #includ ...

  10. 求一个整数个位数之和 Exercise06_02

    import java.util.Scanner; /** * @author 冰樱梦 * 时间:2018年下半年 * 题目:求一个整数个位数之和 * */ public class Exercise ...