<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片轮播</title>
</head>
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>

<style type="text/css">

#banner {
position:relative;
width:478px;
height:286px;
border:1px solid #eee;
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:#0f0}
/*#banner_list a{position:absolute;} */

/*<!-- 让四张图片都可以重叠在一起-->*/

</style>
<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="imgs/p1.jpg" title="橡树小屋的blog" alt="橡树小屋的blog" /></a>
<a href="#" target="_blank"><img src="imgs/p5.jpg" title="橡树小屋的blog" alt="橡树小屋的blog" /></a>
<a href="#" target="_blank"><img src="imgs/p3.jpg" title="橡树小屋的blog" alt="橡树小屋的blog" /></a>
<a href="#" target="_blank"><img src="imgs/p4.jpg" title="橡树小屋的blog" alt="橡树小屋的blog" /></a>
</div>
</div>
</body>
<script type="text/javascript">
// $(function(){
// $("#banner_list").css("opacity","1.0"); //设置透明度
// });
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()", 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>
</html>

邓_html_图片轮播的更多相关文章

  1. 原生js+css3实现图片自动切换，图片轮播

    运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

  2. 纯javaScript、jQuery实现个性化图片轮播

    纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...

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

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

  4. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

  5. 基于面向对象的图片轮播（js原生代码）

    无论你想走多远,你都需要不断地走下去.前端最精华的便是原生的js,这也是我们前端工程师的技术分层的重要指标,也提现这你的代码能力,开发的水平.废话不多说,进入今天的主要分享————基于面向对象思想的图 ...

  6. jquery 图片轮播demo实现

    转载注明出处!!! 转载注明出处!!! 转载注明出处!!! 图片轮播demo,弄清楚过程其实是一个很简单的东西,看网上都没有什么实质性的代码,就自己把过程捋了一遍实现了. 这次因为随手写的,所以没有做 ...

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

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

  8. 一分钟搞定AlloyTouch图片轮播

      一分钟搞定AlloyTouch图片轮播 轮播图也涉及到触摸和触摸反馈,同时,AlloyTouch可以把惯性运动打开或者关闭,并且设置min和max为运动区域,超出会自动回弹.除了一般的竖向滚动,A ...

  9. 12款经典的白富美型—jquery图片轮播插件—前端开发必备

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

随机推荐

  1. ubuntu14 搭建单机版hadoop2.6

    1. 如果你的集群尚未安装所需软件,你得首先安装它们. 以Ubuntu Linux为例: $ sudo apt-get install ssh $ sudo apt-get install rsync ...

  2. 无法打开文件“freeglut.lib”解决方法：

    资源: 链接:https://pan.baidu.com/s/1eSctT5K 密码:174s VS2010问题: 无法打开文件"freeglut.lib"解决方法: (1)下载f ...

  3. C# .net中json字符串和对象之间的转化方法

    http://blog.csdn.net/xuexiaodong009/article/details/46998069 json作为作为一种最常用的数据,应用很广泛,在.net中如何把一个对象转化为 ...

  4. java内存溢出问题

    相信有一定java开发经验的人或多或少都会遇到OutOfMemoryError的问题,这个问题曾困扰了我很长时间,随着解决各类问题经验的积累以及对问题根源的探索,终于有了一个比较深入的认识. 在解决j ...

  5. Robot Framework学习笔记（六）------RIDE界面说明

    RIDE是一款专门用来编辑Robot Framework用例的软件,用Python编写并且开源. 1.测试项目.测试套件Edit 标签 测试项目和测试套件所提供的 Edit 标签的功能是一样的. 在 ...

  6. GpG使用指南

    1. 简介 1991年,程序员Phil Zimmermann为了避开政府监视,开发了加密软件PGP.这个软件非常好用,迅速流传开来,成了许多程序员的必备工具.但是,它是商业软件,不能自由使用.所以,自 ...

  7. gitlab markdown支持页面内跳转

    markdown语法: [to_be_link](#id_name) 标题: ## 2.aaa <a name="id_name"></a> 参考: htt ...

  8. 记录一次APP的转让流程

    由于业务需要,需要将开发的App从一个账号(A账号)转移到另一个账号(B账号),这里简单介绍一下转让流程.主要包括两大步骤: 转让方(A账号)提出转让申请 接收方(B账号)接受转让App 如果不想看这 ...

  9. 【mp3】洗脑循环了！龙珠超 自在极意功 【究极の圣戦】串田アキラ 背景纯音乐

    自在极意功情况下发动自带bgm 曲名:究极の圣戦 首先是视频: http://dwz.cn/6Tj2Lq 然后是mp3:度盘下载>> 老外翻唱: 个人翻唱:全民k歌>>

  10. express框架开发案例

    express是基于Node.js平台的web应用开发框架,用express框架开发web项目可以直接构建整个项目框架并且将前端页面跟后台贯穿起来,用起来还是灵活的:最近刚开始学习,写篇博客总结下,涉 ...