使用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用noConflict代替$的实现方法
Apr 12 jQuery
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
jquery实现企业定位式导航效果
Jan 01 jQuery
jQuery Dom元素操作技巧
Feb 04 jQuery
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
jQuery轮播图功能制作方法详解
Dec 03 jQuery
JQuery复选框全选效果如何实现
May 08 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
基于mysql的论坛(3)
2006/10/09 PHP
九个你必须知道而且又很好用的php函数和特点
2013/08/08 PHP
Laravel 5框架学习之Eloquent (laravel 的ORM)
2015/04/08 PHP
php对文件夹进行相关操作(遍历、计算大小)
2015/11/04 PHP
PHP dirname简单使用代码实例
2020/11/13 PHP
利用js实现选项卡的特别效果的实例
2013/03/03 Javascript
JS定时关闭窗口的实例
2013/05/22 Javascript
javascript设置金额样式转换保留两位小数示例代码
2013/12/04 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
2013/12/27 Javascript
JavaScript中的无阻塞加载性能优化方案
2014/10/10 Javascript
JavaScript数组常用方法
2015/03/02 Javascript
JS数组array元素的添加和删除方法代码实例
2015/06/01 Javascript
浅析node连接数据库(express+mysql)
2015/11/30 Javascript
详解Bootstrap glyphicons字体图标
2016/01/04 Javascript
javascript 动态脚本添加的简单方法
2016/10/11 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
2020/06/01 Javascript
python安装教程
2018/02/28 Python
Appium+python自动化怎么查看程序所占端口号和IP
2019/06/14 Python
选择python进行数据分析的理由和优势
2019/06/25 Python
对Django中static(静态)文件详解以及{% static %}标签的使用方法
2019/07/28 Python
Python使用scrapy爬取阳光热线问政平台过程解析
2019/08/14 Python
解决pytorch GPU 计算过程中出现内存耗尽的问题
2019/08/19 Python
使用python制作一个解压缩软件
2019/11/13 Python
python用quad、dblquad实现一维二维积分的实例详解
2019/11/20 Python
在Python中等距取出一个数组其中n个数的实现方式
2019/11/27 Python
Python实现线性判别分析(LDA)的MATLAB方式
2019/12/09 Python
django实现HttpResponse返回json数据为中文
2020/03/27 Python
基于python调用jenkins-cli实现快速发布
2020/08/14 Python
科颜氏香港官方网店:Kiehl’s香港
2021/03/07 全球购物
保险专业大专生求职信
2013/10/26 职场文书
青年岗位能手事迹材料
2014/12/23 职场文书
委托收款证明
2015/06/23 职场文书
医院消毒隔离制度
2015/08/05 职场文书
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
2022/04/06 Vue.js
Win10 最新稳定版本 21H2开始推送
2022/04/19 数码科技
MySQL数据库事务的四大特性
2022/04/20 MySQL