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树插件zTree使用方法详解
May 02 jQuery
jQuery滑动到底部加载下一页数据的实例代码
May 22 jQuery
JQuery EasyUI的一些常用组件
Jul 12 jQuery
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
简述jQuery Easyui一些用法
Aug 01 jQuery
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
AJAX在JQuery中的应用详解
Jan 30 jQuery
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
Jquery异步上传文件代码实例
Nov 13 jQuery
jQuery实现移动端图片上传预览组件的方法分析
May 01 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
APACHE的AcceptPathInfo指令使用介绍
2013/01/18 PHP
PHP图像处理之使用imagecolorallocate()函数设置颜色例子
2014/11/19 PHP
php实现HTML实体编号与非ASCII字符串相互转换类实例
2016/11/02 PHP
Laravel项目中timeAgo字段语言转换的改善方法示例
2019/09/16 PHP
PHP实现简单注册登录系统
2020/12/28 PHP
统一接口:为FireFox添加IE的方法和属性的js代码
2007/03/25 Javascript
一个用js实现控制台控件的代码
2007/09/04 Javascript
js控制的回到页面顶端goTop的代码实现
2013/03/20 Javascript
jQuery实现选项卡切换效果简单演示
2015/12/09 Javascript
js中flexible.js实现淘宝弹性布局方案
2020/06/23 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
2016/06/07 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
2016/11/03 Javascript
Vue.js第二天学习笔记(vue-router)
2016/12/01 Javascript
简单实现js选项卡切换效果
2017/02/09 Javascript
JavaScript获取ul中li个数的方法
2017/02/13 Javascript
JS实现根据密码长度显示安全条功能
2017/03/08 Javascript
JavaScript 中的 this 简单规则
2017/09/19 Javascript
ndm:NPM的桌面GUI应用程序
2018/10/15 Javascript
js数组去重的方法总结
2019/01/18 Javascript
在vue+element ui框架里实现lodash的debounce防抖
2019/11/13 Javascript
Django中URL视图函数的一些高级概念介绍
2015/07/20 Python
基于python实现高速视频传输程序
2019/05/05 Python
python3-flask-3将信息写入日志的实操方法
2019/11/12 Python
python实现图片素描效果
2020/09/26 Python
css3 实现滚动条美化效果的实例代码
2021/01/06 HTML / CSS
HTML5 声明兼容IE的写法
2011/05/16 HTML / CSS
BONIA官方网站:国际奢侈品牌和皮革专家
2016/11/27 全球购物
Nike德国官网:Nike.com (DE)
2018/11/13 全球购物
工程师求职简历的自我评价分享
2013/10/10 职场文书
销售部主管岗位职责
2013/12/18 职场文书
金融行业职业生涯规划范文
2014/01/17 职场文书
社区班子对照检查材料
2014/08/27 职场文书
民主评议党员个人自我评价
2015/03/03 职场文书
观后感的写法
2015/06/19 职场文书
Python import模块的缓存问题解决方案
2021/06/02 Python
十大经典日本动漫排行榜 海贼王第三,犬夜叉仅第八
2022/03/18 日漫