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 相关文章推荐
jquery的颜色选择插件实例代码
Oct 02 Javascript
通过$(this)使用jQuery包装后的方法或属性
May 18 Javascript
JavaScript中的slice()方法使用详解
Jun 06 Javascript
jQuery树形下拉菜单特效代码分享
Aug 15 Javascript
jQuery多级手风琴菜单实例讲解
Oct 22 Javascript
浅析Node.js 中 Stream API 的使用
Oct 23 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
Jan 08 Javascript
Node调用Java的示例代码
Sep 20 Javascript
Javascript实现购物车功能的详细代码
May 08 Javascript
Node.js 使用jade模板引擎的示例
May 11 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
Oct 30 Javascript
vue实现防抖的实例代码
Jan 11 Vue.js
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生成xml简单实例代码
2009/12/16 PHP
PHP中全面阻止SQL注入式攻击分析小结
2012/01/30 PHP
eAccelerator的安装与使用详解
2013/06/13 PHP
PHP异常处理Exception类
2015/12/11 PHP
PHP使用curl模拟post上传及接收文件的方法
2016/03/04 PHP
Zend Framework教程之前端控制器Zend_Controller_Front用法详解
2016/03/07 PHP
实现超用户体验 table排序javascript实现代码
2009/06/22 Javascript
用javascript添加控件自定义属性解析
2013/11/25 Javascript
JavaScript中的undefined学习总结
2013/11/30 Javascript
jquery幻灯片插件bxslider样式改进实例
2014/10/15 Javascript
jQuery 插件开发指南
2014/11/14 Javascript
jquery中EasyUI实现异步树
2015/03/01 Javascript
javascript编程异常处理实例小结
2015/11/30 Javascript
jquery插件jquery.confirm弹出确认消息
2015/12/22 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
2017/02/16 Javascript
Layui Form 自定义验证的实例代码
2019/09/14 Javascript
vue 自定义组件的写法与用法详解
2020/03/04 Javascript
python使用urllib模块开发的多线程豆瓣小站mp3下载器
2014/01/16 Python
Linux下使用python自动修改本机网关代码分享
2015/05/21 Python
python机器学习之神经网络(二)
2017/12/20 Python
Selenium的使用详解
2018/10/19 Python
python接口自动化测试之接口数据依赖的实现方法
2019/04/26 Python
python脚本开机自启的实现方法
2019/06/28 Python
Django ORM 查询管理器源码解析
2019/08/05 Python
Python多线程通信queue队列用法实例分析
2020/03/24 Python
如何用Python 加密文件
2020/09/10 Python
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
国际领先的在线时尚服装和配饰店:DressLily
2019/03/03 全球购物
企业管理标语
2014/06/10 职场文书
网络文明传播志愿者活动方案
2014/08/20 职场文书
2014年党员整改措施范文
2014/09/21 职场文书
2015年全国“爱牙日”宣传活动总结
2015/03/23 职场文书
微信搭讪开场白
2015/05/28 职场文书
大学生暑期社会实践的个人总结!
2019/07/17 职场文书
详解MongoDB的条件查询和排序
2021/06/23 MongoDB
Zabbix对Kafka topic积压数据监控的问题(bug优化)
2022/07/07 Servers