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 相关文章推荐
只需20行代码就可以写出CSS覆盖率测试脚本
Apr 24 Javascript
JavaScript调用客户端的可执行文件(示例代码)
Nov 28 Javascript
JavaScript日期时间与时间戳的转换函数分享
Jan 31 Javascript
JS实现的数组全排列输出算法
Mar 19 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
Jul 08 Javascript
js实现按钮控制带有停顿效果的图片滚动
Aug 30 Javascript
Vue.js实战之利用vue-router实现跳转页面
Apr 01 Javascript
JS中去掉array中重复元素的方法
May 26 Javascript
简单实现js轮播图效果
Jul 14 Javascript
js 中rewrap-ajax.js插件实例代码
Oct 20 Javascript
vue生成token保存在客户端localStorage中的方法
Oct 25 Javascript
从零使用TypeScript开发项目打包发布到npm
Feb 14 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
通达OA公共代码 php常用检测函数
2011/12/14 PHP
php获取本地图片文件并生成xml文件输出具体思路
2013/04/27 PHP
zf框架的session会话周期及次数限制使用示例
2014/03/13 PHP
dedecms函数分享之获取某一栏目所有子栏目
2014/05/19 PHP
PHP实现根据图片色界在不同位置加水印的方法
2015/08/08 PHP
Symfony控制层深入详解
2016/03/17 PHP
php $_SESSION会员登录实例分享
2021/01/19 PHP
php 二维数组时间排序实现代码
2016/11/19 PHP
详解PHP5.6.30与Apache2.4.x配置
2017/06/02 PHP
js操作select控件的几种方法
2010/06/02 Javascript
JavaScript中几种常见排序算法小结
2011/02/22 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
2013/07/05 Javascript
jquery.post用法之type设置问题
2014/02/24 Javascript
jquery live()调用不存在的解决方法
2014/02/26 Javascript
浅谈js的setInterval事件
2014/12/05 Javascript
JavaScript中的原型prototype属性使用详解
2015/06/05 Javascript
基于javascript实现单选及多选的向右和向左移动实例
2015/07/25 Javascript
基于javascript如何传递特殊字符
2015/11/30 Javascript
angularjs中的$eval方法详解
2017/04/24 Javascript
vue教程之toast弹框全局调用示例详解
2020/08/24 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
2018/03/22 Javascript
NodeJS搭建HTTP服务器的实现步骤
2018/10/12 NodeJs
Element-ui upload上传文件限制的解决方法
2021/01/22 Javascript
Python参数类型以及常见的坑详解
2019/07/08 Python
Django中的FBV和CBV用法详解
2019/09/15 Python
深入了解python列表(LIST)
2020/06/08 Python
Python读取Excel数据并生成图表过程解析
2020/06/18 Python
大学生求职简历的自我评价
2013/10/14 职场文书
缴纳养老保险的证明
2014/01/10 职场文书
综合实践活动方案
2014/02/14 职场文书
中学生秋季运动会广播稿
2014/09/21 职场文书
三严三实对照检查材料思想汇报
2014/09/28 职场文书
学校推普周活动总结
2015/05/07 职场文书
义卖募捐活动总结
2015/05/09 职场文书
信仰纪录片观后感
2015/06/08 职场文书
回门宴新娘答谢词
2015/09/29 职场文书