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 ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
详解JQuery基础动画操作
Apr 12 jQuery
jQuery操作cookie的示例代码
Jun 05 jQuery
jQuery弹框插件使用方法详解
May 26 jQuery
深入分析jQuery.one() 函数
Jun 03 jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
JQuery使用数组遍历跳出each循环
Sep 01 jQuery
jQuery冲突问题解决方法
Jan 19 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实现的简单网络硬盘
2015/07/29 PHP
使用phpQuery获取数组的实例
2017/03/13 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
一个挺有意思的Javascript小问题说明
2011/09/26 Javascript
JS window对象的top、parent、opener含义介绍
2013/12/03 Javascript
javascript动态添加、修改、删除对象的属性与方法详解
2014/01/27 Javascript
深入理解javascript构造函数和原型对象
2014/09/23 Javascript
Python脚本后台运行的几种方式
2015/03/09 Javascript
Javascript的表单验证-揭开正则表达式的面纱
2016/03/18 Javascript
用jquery获取自定义的标签属性的值简单实例
2016/09/17 Javascript
AngularJS1.X学习笔记2-数据绑定详解
2017/04/01 Javascript
js构建二叉树进行数值数组的去重与优化详解
2018/03/26 Javascript
小程序云开发部署攻略(图文教程)
2018/10/30 Javascript
Vue全局loading及错误提示的思路与实现
2019/08/09 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
2019/12/06 Javascript
微信小程序聊天功能的示例代码
2020/01/13 Javascript
Python中的异常处理学习笔记
2015/01/28 Python
Python基于smtplib实现异步发送邮件服务
2015/05/28 Python
Python实现优先级队列结构的方法详解
2016/06/02 Python
python利用sklearn包编写决策树源代码
2017/12/21 Python
python 爬虫一键爬取 淘宝天猫宝贝页面主图颜色图和详情图的教程
2018/05/22 Python
python实现京东订单推送到测试环境,提供便利操作示例
2019/08/09 Python
pygame实现飞机大战
2020/03/11 Python
iPython pylab模式启动方式
2020/04/24 Python
关于Python3爬虫利器Appium的安装步骤
2020/07/29 Python
美国派对用品及装饰品网上商店:Shindigz
2016/07/30 全球购物
美国社交购物市场:MassGenie
2019/02/18 全球购物
五一家具促销方案
2014/01/10 职场文书
2014年综治宣传月活动总结
2014/04/28 职场文书
物业管理专业自荐信
2014/07/01 职场文书
中秋节国旗下演讲稿
2014/09/05 职场文书
党员学习正风肃纪思想汇报
2014/09/12 职场文书
公务员检讨书
2014/11/01 职场文书
大学生安全教育主题班会
2015/08/12 职场文书
导游词之西安骊山
2019/12/03 职场文书
MySQL触发器的使用
2021/05/24 MySQL