jQuery实现的自定义轮播图功能详解


Posted in jQuery onDecember 28, 2018

本文实例讲述了jQuery实现的自定义轮播图功能。分享给大家供大家参考,具体如下:

jquery实现轮播图

web网页上的首页,经常会出现轮播图。

第三方的轮播图存在效果单一,扩展性低等问题。

自定义录播图特点:

1.功能全面
2.可维护性高
3.扩展性高
4.易于兼容其他前端框架

效果图:

jQuery实现的自定义轮播图功能详解

实现思路:

1.布局

通过叠罗汉方式将图片展示区、上一张下一张点击区,指示灯展示区层叠显示
主画布wrap层在最低层,其次是图片展示区,上一张下一张点击区覆盖图片展示区,
指示灯展示区覆盖图片展示区。

2.CSS样式

将wrap层相对布局,图片展示区、上一张下一张点击区、指示灯展示区层设置为绝对布局。
wrap层作为包涵体,对图片展示区、上一张下一张点击区、指示灯展示区层进行层叠布局。
通过display:flex设置盒子弹性布局对指示灯展示区层进行居中排列
通过display:block和dispaly:inline-block讲行级元素转换成块级元素

3.js

(1)web界面渲染后,开启图片从左向右切换的定时器
(2)鼠标移入轮播器后关闭定时器,鼠标移除轮播器后,开启定时器。
(3).点击上一张,关闭定时器,图片从右向左移动一张,鼠标移开上一张,开启定时器。
(4).点击下一张,关闭定时器,图片从坐向右移动一张,鼠标移开下一张,开启定时器。
(5).鼠标移入到指示灯,关闭定时器,图片切换到指示灯所指示的位置,鼠标移开指示灯,开启定时器。

布局图:

jQuery实现的自定义轮播图功能详解

实现代码:

shufflingfigure.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>轮播图</title>
  <meta name="keywords" content="轮播图,banner" >
  <meta name="description" content="自定义轮播图">
  <link type="text/css" rel="stylesheet" href="css/shufflingfigure.css" rel="external nofollow" >
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script type="text/javascript" src="js/shufflingfigure.js"></script>
</head>
<body>
  <div id="wrap" >
    <!--图片区域-->
    <div class="pic">
      <img src="http://demo.3water.com/js/2018/html5-css3-3d-img-flash-codes/images/Guardians-of-the-Galaxy-Poster-High-Res.jpg">
      <img src="http://demo.3water.com/js/2018/html5-css3-3d-img-flash-codes/images/Blade-Runner-poster-art-Harrison-Ford.jpg">
      <img src="http://demo.3water.com/js/2018/html5-css3-3d-img-flash-codes/images/2017_alien_covenant_4k-5120x2880-1920x1080.jpg">
      <img src="http://demo.3water.com/js/2018/html5-css3-3d-img-flash-codes/images/robocop-1987-wallpaper-2.jpg">
      <img src="http://demo.3water.com/js/2018/html5-css3-3d-img-flash-codes/images/sJALsDXak4EehSg2F2y92rt5hPe.jpg">
    </div>
    <!--左右按钮-->
    <div class="btn">
      <span class="prev"><</span>
      <span class="next">></span>
    </div>
    <!--小圆点-->
    <div class="lib">
      <span class="on" ></span>
      <span ></span>
      <span ></span>
      <span ></span>
      <span ></span>
    </div>
  </div>
</body>
</html>

shufflingfigure.css:

*{
  margin: 0;
  padding: 0;
}
#wrap{
  position: relative;
  width:600px ;
  height: 260px;
  margin: 50px auto;
}
#wrap .pic{
  width: 600px;
  height: 260px;
  position: relative;
  cursor: pointer;
}
#wrap .pic img{
  position:absolute;
  width:600px ;
  height: 260px;
}
#wrap .btn span{
  position: absolute;
  top: 50%;
  display: block;
  width: 50px;
  height: 90px;
  margin-top: -45px;
  background: rgba(0,0,0,.5);
  font-size: 20px;
  text-align: center;
  line-height: 90px; /*设置垂直居中*/
  cursor: pointer;
}
#wrap .btn span.next{
  position: absolute;
  right: 0;
}
#wrap .lib{
  position: absolute;
  bottom: 10px;
  left: 50%;
  margin-left: -65px;
  display: flex;  /*弹性盒子模型*/
  flex-direction: row; /*主轴为行*/
  justify-content:space-between;/*主轴方向排列方式*/
  align-items: center; /*辅轴方向排列方式*/
  width:130px ;
  height: 30px;
  background: rgba(0,0,0,.5);
}
#wrap .lib span {
  display: block;
  width: 10px;
  height: 10px;
  background: #fff;
  margin: 5px;
  border-radius: 50%;  /*设置圆角设置圆形*/
  cursor: pointer;
}
#wrap .lib span.on{
  background: red;
}

shufflingfigure.js:

/**
 * Created by Administrator on 2017/4/6.
 */
window.onload=function () {
  /**定义*/
  /*点击 下一张按钮 被点击的时候 图片进行切换 小圆点切换*/
  var $pic=$(".pic"); /*获取图片点击区域*/
  var $next=$(".next");/*获取下一张的按钮*/
  var $prev=$(".prev");/*获取上一张的按钮*/
  var $img=$(".pic img");  /*获取pic下所有的img*/
  var $lib=$(".lib span"); /*获取所有的小圆点*/
  var index=0;  //定义当前图片下标
  var length=$img.length;  //图片个数
  //图片从左向右切换
  function changeImage() {
    index++;
    index=index%length;
    $img.eq(index).fadeIn(300).siblings().fadeOut(300);
    $lib.eq(index).addClass('on').siblings().removeClass('on');
  }
  //图片从右向左切换
  function changeImageRighttoLeft() {
    index--;
    index=index<0?length:index;
    $img.eq(index).fadeIn(300).siblings().fadeOut(300);
    $lib.eq(index).addClass('on').siblings().removeClass('on');
  }
  //开启图片从左向右切换定时器
  var intervalHandle = setInterval(changeImage,2000);
  /**逻辑*/
  //下一张点击时图片向右移动一张
  $next.click(function () {
    clearInterval(intervalHandle);
    changeImage();
  })
  //下一张移除焦点时开启定时器
  $next.hover(function () {
  },function () {
    clearInterval(intervalHandle);
    intervalHandle = setInterval(changeImage,2000);
  });
  //上一张点击时图片向左移动一张
  $prev.click(function () {
    clearInterval(intervalHandle);
    changeImageRighttoLeft();
  })
  //上一张移除焦点时开启定时器
  $prev.hover(function () {
  },function () {
    clearInterval(intervalHandle);
    intervalHandle = setInterval(changeImage,2000);
  });
  $lib.hover(function () {/*移入小圆点上*/
    //关闭图片切换定时器
    clearInterval(intervalHandle);
    index=$(this).index();
    $img.eq(index).fadeIn(300).siblings().fadeOut(300);
    $lib.eq(index).addClass('on').siblings().removeClass('on');
  },function () {
    intervalHandle = setInterval(changeImage,2000);
  });
  $pic.hover(function () {
    clearInterval(intervalHandle);
  },function () {
    intervalHandle = setInterval(changeImage,2000);
  });
  //图片点击事件
  $pic.click(function () {
      alert("index:"+index);
  });
}

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
jquery实现图片上传前本地预览
Apr 28 jQuery
jQuery extend()详解及简单实例
May 06 jQuery
jquery图片放大镜效果
Jun 23 jQuery
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
JQuery 又谈ajax局部刷新
Nov 27 jQuery
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
jQuery 筛选器简单操作示例
Oct 02 jQuery
jQuery实现简单聊天室
Feb 08 jQuery
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
jQuery实现的简单日历组件定义与用法示例
Dec 24 #jQuery
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 #jQuery
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 #jQuery
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 #jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 #jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 #jQuery
JQuery实现ajax请求的示例和注意事项
Dec 10 #jQuery
You might like
使用PHP批量生成随机用户名
2008/07/10 PHP
php递归创建目录的方法
2015/02/02 PHP
PHP获取POST数据的几种方法汇总
2015/03/03 PHP
php正则表达式获取内容所有链接
2015/07/24 PHP
php常用字符串长度函数strlen()与mb_strlen()用法实例分析
2019/06/25 PHP
微信小程序发送订阅消息的方法(php 为例)
2019/10/30 PHP
jquery.validate使用攻略 第一部
2010/07/01 Javascript
IE下使用cloneNode注意事项分享
2012/11/22 Javascript
jQuery中replaceWith()方法用法实例
2014/12/25 Javascript
JavaScript中神奇的call()方法
2015/03/12 Javascript
动态加载jQuery的方法
2015/06/16 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
2015/12/19 Javascript
javascript实现数字倒计时特效
2016/03/30 Javascript
jQuery实现的瀑布流加载效果示例
2016/09/13 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
2017/09/20 Javascript
javascript使用正则实现去掉字符串前面的所有0
2018/07/23 Javascript
Vue文件配置全局变量的实例
2018/09/06 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
2019/12/04 Javascript
vue实现登录拦截
2020/06/29 Javascript
详解Python中的循环语句的用法
2015/04/09 Python
在Python程序中操作文件之flush()方法的使用教程
2015/05/24 Python
Python实现的简单算术游戏实例
2015/05/26 Python
tensorflow输出权重值和偏差的方法
2018/02/10 Python
Python使用百度api做人脸对比的方法
2019/08/28 Python
python线程的几种创建方式详解
2019/08/29 Python
python对指定字符串逆序的6种方法(小结)
2020/04/02 Python
Python使用configparser读取ini配置文件
2020/05/25 Python
最新PyCharm从安装到PyCharm永久激活再到PyCharm官方中文汉化详细教程
2020/11/17 Python
Pycharm plot独立窗口显示的操作
2020/12/11 Python
英国领先的男装设计师服装独立零售商:Repertoire Fashion
2020/10/19 全球购物
采购主管的岗位职责
2013/12/17 职场文书
25岁生日感言
2014/01/13 职场文书
学位证书委托书
2014/09/30 职场文书
联欢会开场白
2015/06/01 职场文书
2016公司年会主持词
2015/07/01 职场文书
mysql 获取相邻数据项
2022/05/11 MySQL