js图片轮播插件的封装


Posted in Javascript onJuly 21, 2017

本文为大家分享了js图片轮播插件的具体代码,供大家参考,具体内容如下

我封装的这个轮播插件只需要获取到图片和按钮就可以啦。

css 样式

.body{
  width: 700px;
  margin: 100px auto;
  position: relative;
  height: 300px;
  overflow: hidden;
 }
 .body img{
  width: 700px;
  position: absolute;
  display: none;
 }
 .body ul{
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);

 }
 .body li{
  list-style: none;
  float: left;
  width: 15px;
  height: 15px;
  border-radius: 50px;
  background: none;
  border: 2px solid #fff;
  margin-right: 10px;
  cursor: pointer;
 }
 .active{
  background-color: #fff !important;

 }
 .body a{
  text-decoration: none;
  position: absolute;
  display: block;
  top: 50%;
  transform: translateY(-50%);
  height: 50px;
  width: 30px;
  background-size: 100% 60%;
  background-color: rgba(0,0,0,0.3);
 }
 .left{
  left: 0;
  background: url('../img/left.png') no-repeat center center;
 }
 .right{
  right: 0;
  background: url('../img/right.png') no-repeat center center;
 }

页面结构 html 代码

<body>
 <div class="body">
  <img src="img/1.jpg">
  <img src="img/2.jpg">
  <img src="img/3.jpg">

<ul>
   <li class="active"></li>
   <li></li>
   <li></li>
  </ul>
  <a href="javascript:;" class="left"></a>
  <a href="javascript:;" class="right"></a>
 </div>

js部分,插件调用

<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
 <script type="text/javascript" src="js/slider.js"></script>
 <script type="text/javascript">
 $.slider({
  imgElement:$(".body img"),
  liElement:$(".body li"),
  leftBtn:$(".left"),
  rightBtn:$(".right"),
  time:2000
 })
</script>

封装的插件

(function($){
 function slider(options){
  this.opts=$.extend({},slider.defaluts,options);
  this._imgSlider();
 }
 //设置默认值
 slider.defaluts={
  imgElement:null,
  liElement:null,
  leftBtn:null,
  rightBtn:null,
  time:2000
 }
 slider.prototype._imgSlider=function(){
  var opts=this.opts,
   index=0,
   len=opts.imgElement.length,
   timeInter=null;
  if(opts.imgElement=='') return;
  opts.imgElement.eq(0).show();
  showTime();
   //当鼠标经过 轮播停止,移开继续
   opts.imgElement.hover(function() {
    clearInterval(timeInter);
   }, function() {
    showTime();
   });

  //点击li 显示对应的图片
  opts.liElement.click(function(){
   var id=$(this).index();
   show(id);
  });
  //向左向右
  opts.leftBtn.click(function(){
   clearInterval(timeInter);
   --index;
   index=Math.max(0,index);
   show(index);
   showTime();
  });
  opts.rightBtn.click(function(){
   clearInterval(timeInter);
   ++index;
   index=Math.min(len-1,index);
   show(index);
   showTime();
  });


  function showTime(){
   timeInter=setInterval(function(){
    index++;
    if(index>len){
     index=0;
    }
    show(index);
   },opts.time);
  }
  function show(index){
   opts.imgElement.eq(index).fadeIn(1000).siblings('img').fadeOut(1000);
   opts.liElement.eq(index).addClass('active').siblings('li').removeClass('active');
  }

 }
 $.extend({
  slider:function(options){
   new slider(options);
  }
 })
})(jQuery)

效果图

js图片轮播插件的封装

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Asp.Net alert弹出提示信息的几种方法总结
Jan 29 Javascript
jquery解决客户端跨域访问问题
Jan 06 Javascript
jQuery操作JSON的CRUD用法实例
Feb 25 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
Apr 03 Javascript
JavaScript事件详细讲解
Jun 27 Javascript
前端JS面试中常见的算法问题总结
Dec 23 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
Jan 21 Javascript
canvas实现图像截取功能
Feb 06 Javascript
Angular中实现树形结构视图实例代码
May 05 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
Mar 05 Javascript
微信小程序仿通讯录功能
Apr 09 Javascript
详解JS函数防抖
Jun 05 Javascript
Javascript es7中比较实用的两个方法示例
Jul 21 #Javascript
AngularJS中使用three.js的实例详解
Jul 21 #Javascript
Axios学习笔记之使用方法教程
Jul 21 #Javascript
Vue学习笔记进阶篇之函数化组件解析
Jul 21 #Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
Jul 21 #Javascript
基于JavaScript实现数码时钟效果
Mar 30 #Javascript
bootstrap多层模态框滚动条消失的问题
Jul 21 #Javascript
You might like
PHP中使用BigMap实例
2015/03/30 PHP
Thinkphp 空操作、空控制器、命名空间(详解)
2017/05/05 PHP
php实现自定义中奖项数和概率的抽奖函数示例
2017/05/26 PHP
js getElementsByTagName的简写方式
2010/06/27 Javascript
JQuery+JS实现仿百度搜索结果中关键字变色效果
2011/08/02 Javascript
40款非常有用的 jQuery 插件推荐(系列一)
2011/12/21 Javascript
JavaScript实现动态创建CSS样式规则方案
2014/09/06 Javascript
jQuery中prepend()方法用法实例
2014/12/25 Javascript
JavaScript动态修改背景颜色的方法
2015/04/16 Javascript
jQuery查找节点并获取节点属性的方法
2016/09/09 Javascript
javascript帧动画(实例讲解)
2017/09/02 Javascript
layui问题之模拟select点击事件的实例讲解
2018/08/15 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
2018/12/13 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
2019/09/10 jQuery
jquery轻量级数字动画插件countUp.js使用详解
2019/10/17 jQuery
vue+node 实现视频在线播放的实例代码
2020/10/19 Javascript
[48:20]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python2.x中str与unicode相关问题的解决方法
2015/03/30 Python
Python使用BeautifulSoup库解析HTML基本使用教程
2016/03/31 Python
Python使用urllib2模块抓取HTML页面资源的实例分享
2016/05/03 Python
python3 selenium自动化 下拉框定位的例子
2019/08/23 Python
Flask框架路由和视图用法实例分析
2019/11/07 Python
纯CSS3实现地球自转实现代码(图文教程附送源码)
2012/12/26 HTML / CSS
浅谈基于HTML5的在线视频播放方案
2016/02/18 HTML / CSS
保安拾金不昧表扬信
2014/01/15 职场文书
加拿大探亲邀请信
2014/01/28 职场文书
幼儿园门卫制度
2014/01/29 职场文书
大学生军训自我鉴定
2014/02/12 职场文书
劲霸男装广告词改编版
2014/03/21 职场文书
六一节目主持词
2014/04/01 职场文书
群教个人对照检查材料
2014/08/20 职场文书
2014年内勤工作总结
2014/11/24 职场文书
一次性工伤赔偿协议书范本
2014/11/25 职场文书
考试作弊检讨书怎么写?
2014/12/21 职场文书
React Hook用法示例详解(6个常见hook)
2021/04/28 Javascript
【海涛七七解说】DCG第二周:DK VS 天禄
2022/04/01 DOTA