【效果如图】

【原理简述】

这里大概说一下整个流程:

1,将除了第一张以外的图片全部隐藏,

2,获取第一张图片的alt信息显示在信息栏,并添加点击事件

3,为4个按钮添加点击侦听,点击相应的按钮,用fadeOut,fadeIn方法显示图片

4,设置setInterval,定时执行切换函数

【代码说明】

filter(":visible") :获取所有可见的元素

unbind():从匹配的元素中删除绑定的事件

siblings:取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合

【程序源码】

首先引入JS文件:

    <script src="bootstrap/js/jquery-1.11.2.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>

HTML部分:

<div id="banner">
<ul>
<li class="on"><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
</ul>
<div id="banner_list">
<a href="#" target="_self"><img src="img/a1.jpg" width="280" height="160" /></a>
<a href="#" target="_self"><img src="img/a2.jpg" width="280" height="160" /></a>
<a href="#" target="_self"><img src="img/a3.jpg" width="280" height="160" /></a>
<a href="#" target="_self"><img src="img/a4.jpg" width="280" height="160" /></a>
<a href="#" target="_self"><img src="img/a5.jpg" width="280" height="160" /></a>
<a href="#" target="_self"><img src="img/a6.jpg" width="280" height="160" /></a>
</div>
</div>

CSS部分:

<style type="text/css">
#banner {position:relative; width:280px; height:160px; border:1px solid #666; overflow:hidden;}
#banner ul { width:138px; height:18px;position:absolute;list-style-type:none;filter: Alpha(Opacity=80);opacity:0.8;z-index:1002;
margin:0; padding:0; bottom:3px; right:5px; line-height: 18px; text-align: center;}
#banner ul li { width: 18px; height: 18px; margin:0px 2px;float:left;display:block;color:#FFF;
           border:#e5eaff 1px solid;background:#6C6D6E;cursor:pointer}
#banner ul li.on { background:#900}
#banner ul li a { color: white;}
#banner ul li a:hover{text-decoration: none;}
#banner_list a{position:absolute;} <!-- 让六张图片都可以重叠在一起-->
#banner_list{position:absolute; right: 5px; bottom: 5px;}
</style>

JS部分:

<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()", 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>

使用JQuery实现图片轮播效果的更多相关文章

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

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

  2. [转]jQuery实现图片轮播效果,jQuery实现焦点新闻

    本文转自:http://blog.csdn.net/tsyj810883979/article/details/8986157 效果图: 实现代码: <!DOCTYPE html> < ...

  3. JQuery实现图片轮播效果源码

    ======================整体结构======================== <div class="banner"> <ul class ...

  4. (转)jquery实现图片轮播

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

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

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

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

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

  7. CSS3图片轮播效果

    原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且 ...

  8. JQ 实现轮播图(3D旋转图片轮播效果)

    轮播图效果如下: 代码: <!DOCTYPE html> <html xmlns="/www.w3.org/1999/xhtml"> <head> ...

  9. 用jquery实现图片轮播

    用jquery简单实现图片轮播效果,代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta ...

随机推荐

  1. 桌面远程连接阿里云服务器(windows)后丧失了双向文件复制粘贴功能的解决方案(第一条博客!)

    近日应公司要求,需在windows服务器上架设一个交易中介软件. 过程之一:将软件压缩文件传到服务器上. 问题:在“运行”对话框通过输入'mstsc' 创建远程连接以后,出现本地桌面与服务器之间无法物 ...

  2. 【心得】Lattice后端使用经验小结(ECP5UM,DDR3,Diamond3.10,Reveal逻辑分析)

    [博客导航] [导航]FPGA相关 背景 下边的内容,适合初次使用Lattice的.具备FPGA开发经验的同学. 1.初次使用,还真遇到不少的坑,Lattice的工具也有不少优缺点,通过总结,希望能缩 ...

  3. c++11の关联容器

    一.关联容器 C++的容器类型可以分为顺序容器和关联容器两大类.对于关联容器,主要有map和set,对于这两种,根据不同的维度,衍生出了8种容器 map                        ...

  4. Clion快捷键

    快捷键配置 File->Setting->Keymap->Keymaps 选择Visual Studio风格 代码提示的匹配模式 File->Setting->Edito ...

  5. JavaScript判断对象是否是NULL

    这个方法是我踩了很多坑之后找到的,对数组等类型的对象都很好使,果断收藏! function isEmpty(obj) { // 检验 undefined 和 null if (!obj &&a ...

  6. MySQL二进预编译制安装

    +++++++++++++++++++++++++++++++++++++++++++标题:MySQL二进预编译制安装时间:2019年2月25日内容:MySQL二进制预编译安装重点:MySQL二进制预 ...

  7. ecshop 商品属性显示方法

    功能:在商品列表上,点击放大镜,显示商品所有属性以及其价格,效果如下: 方法/步骤: 1.编辑\admin\templates\goods_list.htm 模板,在 <!-- 商品搜索 --& ...

  8. Spring Boot 集成Swagger

    Spring Boot 集成Swagger - 小单的博客专栏 - CSDN博客https://blog.csdn.net/catoop/article/details/50668896 Spring ...

  9. mongodb备份还原

    备份:mongodump mongodump常用参数 --db:指定导出的数据库 --collection:指定导出的集合 --excludeCollection:指定不导出的集合 --host :远 ...

  10. python学习日记(初识递归与算法)

    递归函数 定义 递归的定义——在一个函数里再调用这个函数本身 递归的最大深度——997,即栈溢出. 使用递归函数需要注意防止栈溢出.在计算机中,函数调用是通过栈(stack)这种数据结构实现的,每当进 ...