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.masonry瀑布流效果
May 25 jQuery
jQuery实现拖动效果的实例代码
Jun 25 jQuery
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
Jquery让form表单异步提交代码实现
Nov 14 jQuery
jQuery实现消息弹出框效果
Dec 10 jQuery
jQuery实现简单弹幕制作
Dec 10 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
jQuery中live方法的重复绑定说明
2011/10/21 Javascript
jquery插件开发方法(初学者)
2012/02/03 Javascript
jquery.form.js用法之清空form的方法
2014/03/07 Javascript
深入理解Javascript里的依赖注入
2014/03/19 Javascript
利用js制作html table分页示例(js实现分页)
2014/04/25 Javascript
Jquery焦点图实例代码
2014/11/25 Javascript
jQuery实现tab选项卡效果的方法
2015/07/08 Javascript
获取input标签的所有属性的方法
2016/06/28 Javascript
js获取元素下的第一级子元素的方法(推荐)
2017/03/05 Javascript
angular 用拦截器统一处理http请求和响应的方法
2017/06/08 Javascript
Node.js中你不可不精的Stream(流)
2018/06/08 Javascript
Nuxt.js SSR与权限验证的实现
2018/11/21 Javascript
使vue实现jQuery调用的两种方法
2019/05/12 jQuery
vue+iview框架实现左侧动态菜单功能的示例代码
2020/07/23 Javascript
深入理解NumPy简明教程---数组1
2016/12/17 Python
Python如何快速实现分布式任务
2017/07/06 Python
浅谈python迭代器
2017/11/08 Python
使用numpy和PIL进行简单的图像处理方法
2018/07/02 Python
Python TCP通信客户端服务端代码实例
2019/11/21 Python
python django中8000端口被占用的解决
2019/12/17 Python
浅谈django 模型类使用save()方法的好处与注意事项
2020/03/28 Python
爱尔兰电子产品购物网站:Komplett.ie
2018/04/04 全球购物
电子商务专业个人的自我评价
2013/12/19 职场文书
医院门卫岗位职责
2013/12/30 职场文书
烹饪自我鉴定
2014/03/01 职场文书
中文专业自荐书
2014/06/29 职场文书
党的群众路线教育实践活动个人对照检查剖析材料
2014/09/23 职场文书
KTV门卫岗位职责
2014/10/09 职场文书
师范生见习报告范文
2014/11/03 职场文书
2015年行风建设工作总结
2015/05/15 职场文书
春节晚会开场白
2015/05/29 职场文书
运动会200米广播稿
2015/08/19 职场文书
Nginx开启Brotli压缩算法实现过程详解
2021/03/31 Servers
nginx location中多个if里面proxy_pass的方法
2021/03/31 Servers
Spring Boot 整合 Apache Dubbo的示例代码
2021/07/04 Java/Android
Mysql中@和@@符号的详细使用指南
2022/06/05 MySQL