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 相关文章推荐
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
Sep 27 Javascript
基于jquery的一行代码轻松实现拖动效果
Dec 28 Javascript
JS和Jquery获取和修改label的值的示例代码
Jan 15 Javascript
javascript屏蔽右键代码
May 15 Javascript
JavaScript中操作字符串小结
May 04 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
Jun 28 Javascript
AngularJS指令详解及示例代码
Aug 16 Javascript
JavaScript设置名字输入不合法的实现方法
May 23 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
前端vue-cli项目中使用img图片和background背景图的几种方法
Nov 13 Javascript
详细分析vue响应式原理
Jun 22 Javascript
js+canvas实现转盘效果(两个版本)
Sep 13 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生成SessionID和图片校验码的思路和实现代码
2009/03/10 PHP
PHP Memcached应用实现代码
2010/02/08 PHP
使用php方法curl抓取AJAX异步内容思路分析及代码分享
2014/08/25 PHP
浅谈php中的循环while、do...while、for、foreach四种循环
2016/11/05 PHP
PHP快速推送微信模板消息
2017/04/14 PHP
用php+ajax新建流程(请假、进货、出货等)
2017/06/11 PHP
JavaScript学习点滴 call、apply的区别
2010/10/22 Javascript
Javascript 倒计时源代码.(时.分.秒) 详细注释版
2011/05/09 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
2014/08/11 Javascript
JavaScript获取元素尺寸和大小操作总结
2015/02/27 Javascript
Javascript实现获取及设置光标位置的方法
2015/07/21 Javascript
React.js入门学习第一篇
2016/03/30 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
2017/09/11 jQuery
微信小程序实现简单input正则表达式验证功能示例
2017/11/30 Javascript
JS函数节流和函数防抖问题分析
2017/12/18 Javascript
jquery在启动页面时,自动加载数据的实例
2018/01/22 jQuery
JavaScript设计模式之责任链模式实例分析
2019/01/16 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
2019/11/11 jQuery
JavaScript 链表定义与使用方法示例
2020/04/28 Javascript
React实现阿里云OSS上传文件的示例
2020/08/10 Javascript
[17:45]DOTA2 HEROES教学视频教你分分钟做大人-军团指挥官
2014/06/11 DOTA
python里对list中的整数求平均并排序
2014/09/12 Python
python实现查询苹果手机维修进度
2015/03/16 Python
Python多线程编程简单介绍
2015/04/13 Python
python应用Axes3D绘图(批量梯度下降算法)
2020/03/25 Python
python将unicode和str互相转化的实现
2020/05/11 Python
Python 高效编程技巧分享
2020/09/10 Python
Python爬虫模拟登陆哔哩哔哩(bilibili)并突破点选验证码功能
2020/12/21 Python
约瑟夫·特纳男装:Joseph Turner
2017/10/10 全球购物
工作自荐信
2013/12/11 职场文书
采购员的工作职责
2013/12/26 职场文书
业务部主管岗位职责
2014/01/29 职场文书
幼儿园安全检查制度
2014/01/30 职场文书
劳模先进事迹材料
2014/12/24 职场文书
2015年中学体育教师工作总结
2015/10/23 职场文书
仅用一句SQL更新整张表的涨跌幅、涨跌率的解决方案
2021/05/06 MySQL