使用JQuery实现图片轮播效果的实例(推荐)


Posted in jQuery onOctober 24, 2017

【效果如图】

使用JQuery实现图片轮播效果的实例(推荐)使用JQuery实现图片轮播效果的实例(推荐)使用JQuery实现图片轮播效果的实例(推荐)使用JQuery实现图片轮播效果的实例(推荐)

【原理简述】

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

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

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

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

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

【代码说明】

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

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

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

【程序源码】

首先引入JS文件:

  <script src="bootstrap/js/jquery-1.11.2.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <link href="bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" type="text/css"/>

HTML部分:

<div id="banner"> 
   <ul>
    <li class="on"><a href="">1</a></li>
    <li><a href="">2</a></li>
    <li><a href="">3</a></li>
    <li><a href="">4</a></li>
    <li><a href="">5</a></li>
    <li><a href="">6</a></li>
   </ul>
   <div id="banner_list">
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_self"><img src="img/a1.jpg" width="280" height="160" /></a>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_self"><img src="img/a2.jpg" width="280" height="160" /></a>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_self"><img src="img/a3.jpg" width="280" height="160" /></a>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_self"><img src="img/a4.jpg" width="280" height="160" /></a>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_self"><img src="img/a5.jpg" width="280" height="160" /></a>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_self"><img src="img/a6.jpg" width="280" height="160" /></a>
   </div>
  </div>

CSS部分:

<style type="text/css">
 #banner {position:relative; width:280px; height:160px; border:1px solid #666; overflow:hidden;}
 #banner ul { width:138px; height:18px;position:absolute;list-style-type:none;filter: Alpha(Opacity=80);opacity:0.8;z-index:1002;
    margin:0; padding:0; bottom:3px; right:5px; line-height: 18px; text-align: center;}
 #banner ul li { width: 18px; height: 18px; margin:0px 2px;float:left;display:block;color:#FFF;




 border:#e5eaff 1px solid;background:#6C6D6E;cursor:pointer} 
 #banner ul li.on { background:#900}
 #banner ul li a { color: white;}
 #banner ul li a:hover{text-decoration: none;}
 #banner_list a{position:absolute;} <!-- 让六张图片都可以重叠在一起-->
 #banner_list{position:absolute; right: 5px; bottom: 5px;}
 </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实现图片轮播效果的实例(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
jquery replace方法去空格
May 08 jQuery
jQuery实现拖动效果的实例代码
Jun 25 jQuery
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
jQuery实现王者荣耀手风琴效果
Jan 17 jQuery
jquery select插件异步实时搜索实例代码
Oct 20 #jQuery
利用jQuery实现简单的拖曳效果实例代码
Oct 20 #jQuery
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 #jQuery
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 #jQuery
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 #jQuery
jquery实现图片跟随鼠标的实例
Oct 17 #jQuery
jquery一键控制checkbox全选、反选或全不选
Oct 16 #jQuery
You might like
经典的星际争霸,满是回忆的BGM
2020/04/09 星际争霸
php教程之魔术方法的使用示例(php魔术函数)
2014/02/12 PHP
PHP类中的魔术方法(Magic Method)简明总结
2014/07/08 PHP
php实现统计网站在线人数的方法
2015/05/12 PHP
PHP中功能强大却很少使用的函数实例小结
2016/11/10 PHP
PHP数组array类常见操作示例
2020/05/15 PHP
Jquery中Ajax 缓存带来的影响的解决方法
2011/05/19 Javascript
javascript测试题练习代码
2012/10/10 Javascript
JavaScript prototype属性深入介绍
2012/11/27 Javascript
js的隐含参数(arguments,callee,caller)使用方法
2014/01/28 Javascript
JS计算网页停留时间代码
2014/04/28 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
2015/09/07 Javascript
简单的JS时钟实例讲解
2016/01/13 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
2016/12/01 Javascript
JS实现的RGB网页颜色在线取色器完整实例
2016/12/21 Javascript
原生js实现打字动画游戏
2017/02/04 Javascript
使用JavaScript生成罗马字符的实例代码
2018/06/08 Javascript
详解vue中router-link标签所必备了解的属性
2019/04/15 Javascript
Vue+element+cookie记住密码功能的简单实现方法
2020/09/20 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
2021/01/27 Javascript
python实现在无须过多援引的情况下创建字典的方法
2014/09/25 Python
基于Python如何使用AIML搭建聊天机器人
2016/01/27 Python
python爬取微信公众号文章
2018/08/31 Python
python 实现返回一个列表中出现次数最多的元素方法
2019/06/11 Python
基于python实现检索标记敏感词并输出
2020/05/07 Python
django美化后台django-suit的安装配置操作
2020/07/12 Python
2013年办公室秘书的个人自我鉴定
2013/10/24 职场文书
电子商务应届生求职信
2013/11/16 职场文书
2014年信用社工作总结
2014/11/25 职场文书
2014年稽查工作总结
2014/12/20 职场文书
2015年社区文体活动总结
2015/03/25 职场文书
2015年司机工作总结
2015/04/23 职场文书
2015年工程部工作总结
2015/04/30 职场文书
升学宴学生致辞
2015/07/27 职场文书
学校食堂管理制度
2015/08/04 职场文书
2016高校自主招生自荐信范文
2016/01/28 职场文书