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 相关文章推荐
firefox中JS读取XML文件
Dec 21 Javascript
js报错 Object doesn't support this property or method的原因分析
Mar 31 Javascript
Javascript变量作用域详解
Dec 06 Javascript
Jquery getJSON方法详细分析
Dec 26 Javascript
javascript操纵OGNL标签示例代码
Jun 16 Javascript
Js apply方法详解
Feb 16 Javascript
jQuery获取table下某一行某一列的值实现代码
Apr 07 jQuery
Angular2使用Angular-CLI快速搭建工程(二)
May 21 Javascript
判断滚动条滑到底部触发事件(实例讲解)
Nov 15 Javascript
vue-openlayers实现地图坐标弹框效果
Sep 24 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
关于JavaScript轮播图的实现
Nov 20 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
全国FM电台频率大全 - 23 四川省
2020/03/11 无线电
PHP脚本的10个技巧(4)
2006/10/09 PHP
Zend Framework路由器用法实例详解
2016/12/11 PHP
Firefox getBoxObjectFor getBoundingClientRect联系
2008/10/26 Javascript
jQuery 动态酷效果实现总结
2009/12/27 Javascript
JS 实现完美include载入实现代码
2010/08/05 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
2013/06/26 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
2013/12/14 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
2020/04/20 Javascript
表单元素值获取方式js及java方式的简单实例
2016/10/15 Javascript
详解Vue-基本标签和自定义控件
2017/03/24 Javascript
JS实现微信里判断页面是否被分享成功的方法
2017/06/06 Javascript
Vue.js 踩坑记之双向绑定
2018/05/03 Javascript
基于JS实现带动画效果的流程进度条
2018/06/01 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
2020/02/11 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
2020/08/13 Javascript
Python抓取淘宝下拉框关键词的方法
2015/07/08 Python
python实现简单购物商城
2016/05/21 Python
Python 文件操作的详解及实例
2017/09/18 Python
python3 对list中每个元素进行处理的方法
2018/06/29 Python
学python安装的软件总结
2019/10/12 Python
python实现一个猜拳游戏
2020/04/05 Python
Python的in,is和id函数代码实例
2020/04/18 Python
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
2016/05/09 HTML / CSS
乌克兰网上服装店:Bolf.ua
2018/10/30 全球购物
PHP高级工程师面试问题推荐
2013/01/18 面试题
校园活动策划书范文
2014/01/10 职场文书
个人简历中的自我评价怎么写
2014/01/26 职场文书
年终奖发放方案
2014/06/02 职场文书
本科生求职信
2014/06/17 职场文书
四年级数学上册教学计划
2015/01/20 职场文书
全国助残日活动总结
2015/05/11 职场文书
入党转正介绍人意见
2015/06/03 职场文书
2016大学生国家助学贷款承诺书
2016/03/25 职场文书
六一儿童节致辞稿(3篇)
2019/07/11 职场文书
Mysql 如何实现多张无关联表查询数据并分页
2021/06/05 MySQL