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实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
jQuery实现动态删除LI的方法
May 30 jQuery
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
详解jQuery如何实现模糊搜索
May 10 jQuery
JQuery animate动画应用示例
May 14 jQuery
详解jQuery中的prop()使用方法
Jan 05 jQuery
jquery实现吸顶导航效果
Jan 08 jQuery
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 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
根德YB400的电路分析
2021/03/02 无线电
php替换超长文本中的特殊字符的函数代码
2012/05/22 PHP
Laravel 5.4向IoC容器中添加自定义类的方法示例
2017/08/15 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
解决laravel 表单提交-POST 异常的问题
2019/10/15 PHP
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
2013/01/23 Javascript
js变换显示图片的实例
2013/04/16 Javascript
javascript中call和apply方法浅谈
2013/09/27 Javascript
node.js中的fs.mkdirSync方法使用说明
2014/12/17 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
2015/09/14 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
2016/04/29 Javascript
温习Javascript基础语法之词法结构
2016/05/31 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
2016/06/08 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
2016/08/30 Javascript
angular源码学习第一篇 setupModuleLoader方法
2016/10/20 Javascript
JS滚动到指定位置导航栏固定顶部
2017/07/03 Javascript
原生JS实现小小的音乐播放器
2017/10/16 Javascript
浅谈Angular文字折叠展开组件的原理分析
2017/11/24 Javascript
浅谈js获取ModelAndView值的问题
2018/03/28 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
2018/05/30 jQuery
Vue2.0 $set()的正确使用详解
2020/07/28 Javascript
Python实现的多线程端口扫描工具分享
2015/01/21 Python
python 打印对象的所有属性值的方法
2016/09/11 Python
python使用yield压平嵌套字典的超简单方法
2019/11/02 Python
python GUI库图形界面开发之PyQt5滑块条控件QSlider详细使用方法与实例
2020/02/28 Python
美国在线购买空气净化器、除湿器、加湿器网站:AllergyBuyersClub
2021/03/16 全球购物
如何找出EMP表里面SALARY第N高的employee
2013/12/05 面试题
打架检讨书100字
2014/01/08 职场文书
工商管理专业毕业生自我鉴定2014
2014/10/04 职场文书
2014年优质护理服务工作总结
2014/11/14 职场文书
观后感的写法
2015/06/19 职场文书
有关朝花夕拾的读书笔记
2015/06/29 职场文书
2015年秋季运动会前导词
2015/07/20 职场文书
关于JavaScript 中 if包含逗号表达式
2021/11/27 Javascript
Python基本知识点总结
2022/04/07 Python
Java代码规范与质量检测插件SonarLint的使用
2022/08/05 Java/Android