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中使用outerHTML的2种解决方法
Jun 07 Javascript
下拉框select的绑定示例
Sep 04 Javascript
javascript学习笔记(四)function函数部分
Sep 30 Javascript
jQuery多级弹出菜单插件ZoneMenu
Dec 18 Javascript
angular.foreach 循环方法使用指南
Jan 06 Javascript
AngularJS上拉加载问题解决方法
May 23 Javascript
深入理解Commonjs规范及Node模块实现
May 17 Javascript
[js高手之路]寄生组合式继承的优势详解
Aug 28 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
Sep 29 Javascript
JS实现中文汉字按拼音排序的方法
Oct 09 Javascript
详解webpack 入门与解析
Apr 09 Javascript
Vue路由切换时的左滑和右滑效果示例
May 29 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
ninety plus是什么?ninety plus咖啡好吗?
2021/03/04 新手入门
ThinkPHP实现二级循环读取的方法
2014/11/03 PHP
mysql_escape_string()函数用法分析
2016/04/25 PHP
掌握PHP垃圾回收机制详解
2019/03/13 PHP
不要小看注释掉的JS 引起的安全问题
2008/12/27 Javascript
Jquery 组合form元素为json格式,asp.net反序列化
2009/07/09 Javascript
jquery键盘事件介绍
2011/01/31 Javascript
js实现select组件的选择输入过滤代码
2014/10/14 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
2015/08/20 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
2016/04/19 Javascript
完美JQuery图片切换效果的简单实现
2016/07/21 Javascript
AngularJS 依赖注入详解及示例代码
2016/08/17 Javascript
微信小程序实现滴滴导航tab切换效果
2018/07/24 Javascript
JS实现求5的阶乘示例
2019/01/21 Javascript
node中使用es6/7/8(支持性与性能)
2019/03/28 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
2019/07/19 Javascript
javascript实现滚动条效果
2020/03/24 Javascript
python如何定义带参数的装饰器
2018/03/20 Python
Python字典创建 遍历 添加等实用基础操作技巧
2018/09/13 Python
Django 路由系统URLconf的使用
2018/10/11 Python
Python+selenium 获取浏览器窗口坐标、句柄的方法
2018/10/14 Python
对python 匹配字符串开头和结尾的方法详解
2018/10/27 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
python GUI库图形界面开发之PyQt5控件QTableWidget详细使用方法与属性
2020/02/25 Python
解决pycharm导入本地py文件时,模块下方出现红色波浪线的问题
2020/06/01 Python
Python控制台实现交互式环境执行
2020/06/09 Python
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
婚礼主持结束词
2014/03/13 职场文书
感恩教育月活动总结
2014/07/07 职场文书
奥巴马经典演讲稿
2014/09/13 职场文书
2015新年寄语大全
2014/12/08 职场文书
2015年度优秀员工推荐信
2015/03/23 职场文书
2015年酒店工作总结
2015/04/28 职场文书
JavaScript原始值与包装对象的详细介绍
2021/05/11 Javascript
JAVA API 实用类 String详解
2021/10/05 Java/Android