JQuery实现图片轮播效果


Posted in Javascript onSeptember 15, 2015

【原理简述】

JQuery实现图片轮播效果

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

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

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

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

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

【代码说明】

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

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

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

例:找到每个div的所有同辈元素中带有类名为selected的元素。

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

执行 $("div").siblings(),结果

[ <p>Hello</p>, <p>And Again</p> ]

【程序源码】
HTML部分:

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

CSS部分:

<style type="text/css">
#banner {position:relative; width:478px; height:286px; border:1px solid #666; 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:#900}
#banner_list a{position:absolute;} <!-- 让四张图片都可以重叠在一起-->
</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实现图片轮播的全部思路过程,希望对大家的学习有所帮助。

Javascript 相关文章推荐
javascript 打印页面代码
Mar 24 Javascript
jquery 日期分离成年月日的代码
May 14 Javascript
JavaScript接口实现代码 (Interfaces In JavaScript)
Jun 11 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
Nov 13 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
Jan 02 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
Jul 27 Javascript
总结几道关于Node.js的面试问题
Jan 11 Javascript
vue2.0实战之基础入门(1)
Mar 27 Javascript
详解vue-cli官方脚手架配置
Jul 20 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
Sep 28 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
Nov 26 Javascript
Vue Render函数创建DOM节点代码实例
Jul 08 Javascript
jQuery实现可展开合拢的手风琴面板菜单
Sep 15 #Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
Sep 15 #Javascript
jquery图片轮播特效代码分享
Apr 20 #Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
Sep 15 #Javascript
jQuery焦点图切换特效代码分享
Sep 15 #Javascript
jquery点击缩略图切换视频播放特效代码分享
Sep 15 #Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
Sep 15 #Javascript
You might like
PHP错误提示的关闭方法详解
2013/06/23 PHP
怎样搭建PHP开发环境
2015/07/28 PHP
php将数组存储为文本文件方法汇总
2015/10/28 PHP
Yii2.0高级框架数据库增删改查的一些操作
2015/11/16 PHP
实例讲解PHP中使用命名空间
2019/01/27 PHP
理解Javascript_13_执行模型详解
2010/10/20 Javascript
jquery无缝向上滚动实现代码
2013/03/29 Javascript
jquery实现metro效果示例代码
2013/09/06 Javascript
javascript事件模型实例分析
2015/01/30 Javascript
动态创建按钮的JavaScript代码
2016/01/29 Javascript
JavaScript预解析及相关技巧分析
2016/04/21 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
2016/09/04 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
2017/04/24 jQuery
EasyUI的TreeGrid的过滤功能的解决思路
2017/08/08 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
2019/09/27 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
2019/09/29 Javascript
vue和小程序项目中使用iconfont的方法
2020/05/19 Javascript
Python3实现连接SQLite数据库的方法
2014/08/23 Python
python的类变量和成员变量用法实例教程
2014/08/25 Python
Python中统计函数运行耗时的方法
2015/05/05 Python
Python 获取当前所在目录的方法详解
2017/08/02 Python
python 产生token及token验证的方法
2018/12/26 Python
python+requests实现接口测试的完整步骤
2020/10/27 Python
使用HTML5和CSS3制作一个模态框的示例
2018/03/07 HTML / CSS
五分钟学会HTML5的WebSocket协议
2019/11/22 HTML / CSS
英国花园家具中心:Garden Furniture Centre
2017/08/24 全球购物
美国环保婴儿用品公司:The Honest Company
2017/11/23 全球购物
美国滑雪和滑雪板商店:Buckman
2018/03/03 全球购物
泰国网上购物:Shopee泰国
2018/09/14 全球购物
Cotton On香港网站:澳洲时装连锁品牌
2018/11/01 全球购物
食品流通安全承诺书
2014/05/22 职场文书
关于读书的演讲稿800字
2014/08/27 职场文书
个人查摆剖析材料
2014/10/04 职场文书
雷锋观后感
2015/06/10 职场文书
小学运动会加油稿
2015/07/22 职场文书
2019下半年英语教师的教学工作计划(3篇)
2019/09/25 职场文书