使用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 ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
jquery Form轻松实现文件上传
May 24 jQuery
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
jQuery创建及操作xml格式数据示例
May 26 jQuery
jquery实现动态添加附件功能
Oct 23 jQuery
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
jquery.pager.js分页实现详解
Jul 29 jQuery
jQuery实现可编辑的表格
Dec 11 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
PHP5 安装方法
2006/10/09 PHP
phpmyadmin中配置文件现在需要绝密的短语密码的解决方法
2007/02/11 PHP
PHP memcache扩展的三种安装方法
2009/04/26 PHP
wamp下修改mysql访问密码的解决方法
2013/05/07 PHP
PHP简单生成缩略图相册的方法
2015/07/29 PHP
php命令行(cli)模式下报require 加载路径错误的解决方法
2015/11/23 PHP
Laravel框架实现定时发布任务的方法
2018/08/16 PHP
jQuery 树形结构的选择器
2010/02/15 Javascript
JavaScript prototype 使用介绍
2013/08/29 Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
2016/08/19 Javascript
js仿手机页面文件下拉刷新效果
2016/10/14 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
2016/11/03 Javascript
AngularJS封装指令方法详解
2016/12/12 Javascript
一个可复用的vue分页组件
2017/05/15 Javascript
js实现简单掷骰子小游戏
2019/10/24 Javascript
Vue通过provide inject实现组件通信
2020/09/03 Javascript
[06:11]2014DOTA2国际邀请赛 专访团结一心的VG战队
2014/07/21 DOTA
[06:24]DOTA2 2015国际邀请赛中国区预选赛第二日TOP10
2015/05/27 DOTA
介绍Python的Django框架中的QuerySets
2015/04/20 Python
wxpython中Textctrl回车事件无效的解决方法
2016/07/21 Python
Python控制台输出时刷新当前行内容而不是输出新行的实现
2020/02/21 Python
Python GUI库PyQt5图形和特效样式QSS介绍
2020/02/25 Python
用python读取xlsx文件
2020/12/17 Python
Python中全局变量和局部变量的理解与区别
2021/02/07 Python
CSS3实现翘边的阴影效果的代码示例
2016/06/13 HTML / CSS
求高于平均分的学生学号及成绩
2016/09/01 面试题
学校司机岗位职责
2013/11/14 职场文书
求职信的七个关键技巧
2014/02/05 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
物业前台接待岗位职责
2015/04/03 职场文书
植物园观后感
2015/06/11 职场文书
爱护环境建议书
2015/09/14 职场文书
解决xampp安装后Apache无法启动
2022/03/21 Servers
python获取字符串中的email
2022/03/31 Python
MySQL创建管理HASH分区
2022/04/13 MySQL
解决springboot druid数据库连接失败后一直重连的方法
2022/04/19 Java/Android