JQuery实现图片轮播效果


Posted in jQuery onMay 08, 2017

用JQuery操作DOM确实很方便,并且JQuery提供了非常人性化的API应付我们的各种需求,大大简化了js的代码。

制作原理:

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

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

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

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

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

代码说明:

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

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

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

程序源码

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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><img src="imgs/img_1.jpg" title="图片" alt="图片"/></a>
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><img src="imgs/img_2.jpg" title="图片" alt="图片"/></a>
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><img src="imgs/img_3.jpg" title="图片" alt="图片"/></a>
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><img src="imgs/img_4.jpg" title="图片" alt="图片"/></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>

javascript代码:

<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 相关文章推荐
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
jQuery选择器之子元素选择器详解
Sep 18 jQuery
jQuery实现checkbox的简单操作
Nov 18 jQuery
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
jQuery实现简单聊天室
Feb 08 jQuery
jQuery中的deferred对象和extend方法详解
May 08 #jQuery
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 #jQuery
jQuery动态追加页面数据以及事件委托详解
May 06 #jQuery
jquery点赞功能实现代码 点个赞吧!
May 29 #jQuery
jQuery extend()详解及简单实例
May 06 #jQuery
jquery仿微信聊天界面
May 06 #jQuery
简单实现jQuery弹幕效果
May 06 #jQuery
You might like
PHP中如何定义和使用常量
2013/02/28 PHP
利用浏览器的Javascript控制台调试PHP程序
2014/01/08 PHP
PHPstorm快捷键(分享)
2017/07/17 PHP
php学习笔记之mb_strstr的基本使用
2018/02/03 PHP
PHP实现微信提现(企业付款到零钱)
2019/08/01 PHP
理解Javascript_03_javascript全局观
2010/10/11 Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
2012/05/23 Javascript
javascript中节点的最近的相关节点访问方法
2013/03/20 Javascript
jQuery中:empty选择器用法实例
2014/12/30 Javascript
jquery实现触发时更新下拉列表内容的方法
2015/12/02 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
2016/09/17 Javascript
Node.js连接postgreSQL并进行数据操作
2016/12/18 Javascript
angular基于ng-alain定义自己的select组件示例
2018/02/23 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
2019/09/11 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
2020/04/13 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
2020/12/03 Vue.js
[01:06]DOTA2小知识课堂 Ep.02 吹风竟可解梦境缠绕
2019/12/05 DOTA
Python判断变量是否已经定义的方法
2014/08/18 Python
Python获取任意xml节点值的方法
2015/05/05 Python
Python3实现的简单验证码识别功能示例
2018/05/02 Python
Python实现的求解最小公倍数算法示例
2018/05/03 Python
python 实现selenium断言和验证的方法
2019/02/13 Python
Python logging设置和logger解析
2019/08/28 Python
Python 多线程,threading模块,创建子线程的两种方式示例
2019/09/29 Python
基于Django统计博客文章阅读量
2019/10/29 Python
python 使用shutil复制图片的例子
2019/12/13 Python
python中append函数用法讲解
2020/12/11 Python
使用CSS变量实现炫酷惊人的悬浮效果
2019/04/26 HTML / CSS
JBL澳大利亚官方商店:扬声器、耳机和音响系统
2018/05/24 全球购物
大学生应聘推荐信范文
2013/11/19 职场文书
乡镇消防工作实施方案
2014/03/27 职场文书
初中生物教学随笔
2015/08/15 职场文书
一道JS算法面试题——冒泡、选择排序
2021/04/21 Javascript
「租借女友」第2季樱泽墨角色PV&新视觉图公开
2022/03/21 日漫
Nginx报错104:Connection reset by peer问题的解决及分析
2022/07/23 Servers
JS前端使用canvas实现物体的点选示例
2022/08/05 Javascript