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 相关文章推荐
用jQuery实现检测浏览器及版本的脚本代码
Jan 22 Javascript
突发奇想的一个jquery插件
Nov 19 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
Sep 29 Javascript
JavaScript分页功能的实现方法
Apr 25 Javascript
javascript实现控制的多级下拉菜单
Jul 05 Javascript
jquery可定制的在线UEditor编辑器
Nov 17 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
Aug 05 Javascript
详解Vue.js分发之作用域槽
Jun 13 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
Jun 21 Javascript
微信小程序progress组件使用详解
Jan 31 Javascript
详解如何使用router-link对象方式传递参数?
May 02 Javascript
ES6 proxy和reflect的使用方法与应用实例分析
Feb 15 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 高级课程笔记 面向对象
2009/06/21 PHP
PHP5中Cookie与 Session使用详解
2013/04/30 PHP
php文件上传你必须知道的几点
2015/10/20 PHP
浅谈PHP中的那些魔术常量
2020/12/02 PHP
JQuery 技巧和窍门整理(8个)
2010/04/22 Javascript
用JS控制回车事件的代码
2011/02/20 Javascript
EditPlus注册码生成器(js代码实现)
2013/03/25 Javascript
js随机生成网页背景颜色的方法
2015/02/26 Javascript
jQuery()方法的第二个参数详解
2015/04/29 Javascript
浅析Node.js中的内存泄漏问题
2015/06/23 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
2016/09/04 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
2017/04/27 jQuery
详解如何优雅地在React项目中使用Redux
2017/12/28 Javascript
Vue拖拽组件开发实例详解
2018/05/11 Javascript
vue.js input框之间赋值方法
2018/08/24 Javascript
js实现json数组分组合并操作示例
2019/02/12 Javascript
vue双向绑定及观察者模式详解
2019/03/19 Javascript
微信小程序通过一个json实现分享朋友圈图片
2019/09/03 Javascript
小程序跨页面交互的作用与方法详解
2020/01/07 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
2020/11/09 Javascript
[01:32]TI奖金增速竟因它再创新高!DOTA2勇士令状不朽珍藏Ⅰ饰品欣赏
2018/05/18 DOTA
Python中operator模块的操作符使用示例总结
2016/06/28 Python
利用 python 对目录下的文件进行过滤删除
2017/12/27 Python
基于python3实现socket文件传输和校验
2018/07/28 Python
Python 余弦相似度与皮尔逊相关系数 计算实例
2019/12/23 Python
python中wx模块的具体使用方法
2020/05/15 Python
实现ECharts双Y轴左右刻度线一致的例子
2020/05/16 Python
python基于opencv实现人脸识别
2021/01/04 Python
HTML5: Web 标准最巨大的飞跃
2008/10/17 HTML / CSS
DJI美国:消费类无人机领域的领导者
2018/04/27 全球购物
俄罗斯披萨、寿司和面食送货到家服务:2 Берега
2019/12/15 全球购物
女大学生个人求职信
2013/12/09 职场文书
临时工聘用合同协议书
2014/10/29 职场文书
深入理解redis中multi与pipeline
2021/06/02 Redis
使用Docker容器部署rocketmq单机的全过程
2022/04/03 Servers
悬疑名作《朋友游戏》动画无字ED宣传片 新角色公开
2022/04/13 日漫