jQuery封装轮播图插件
// 布局要求,必须有一个容器,图片和两个按钮,布局方式自定,小圆点样式固定
// <div class="all">
// <img src="img/bg1.jpg" >
// <img src="img/bg2.jpg" >
// <img src="img/bg3.jpg" >
// <img src="img/bg4.jpg" >
// <img src="img/bg5.jpg" >
// <input type="button" name="" value="<<" />
// <input type="button" name="" value=">>" />
// </div> // 使用方法的参数
// $(".all").banner({
// imgs: $('.all').find('img'), // 必选,轮播的图片
// prev: $('.all').find('input').eq(0), // 必选,上一页按钮
// next: $('.all').find('input').eq(1), // 必选, 下一页按钮
// points: true, // 可选,小圆点,默认true
// autoplay: true, // 可选, 默认为true,自动轮播
// delay: 300, // 可选,默认为3000
// current: 3, // 可选, 默认是第0张图片显示
// duration: 300 // 可选, 默认为300 -- 动画时长
// }); ;(function($){
"use strict";
class Banner{
constructor(ele,obj) {
// 接受一个元素和一个参数对象
var {imgs,prev,next,points,autoplay,delay,current,duration}=obj;
// 处理数据
this.index=(current||1)-1;
this.img=imgs;
this.prev=prev;
this.next=next;
this.points= points===false?false:true;
this.autoplay= autoplay===false?false:true; // 控制动画时长
if(this.autoplay){
this.delay=delay||1000;
}else{
this.delay=1000000000;
}
this.duration=duration||500;
// 在用户有要求的情况下生成小按钮的容器
if(this.points){
ele.append($("<ul class='banner-ul'>"));
} // 样式,减少用户一些使用的繁琐操作
ele.css({
overflow: "hidden"
})
this.img.css({
position: "absolute",
top: 0,
left: "100%"
})
this.img.eq(this.index).css("left",0);
this.next.css("z-index",34);
this.prev.css("z-index",34); this.ul=ele.children("ul.banner-ul");
this.ele=ele; this.init();
// 根据用户需求判定是否自动轮播
if(this.autoplay)
this.time();
}
// 自动轮播功能
time(){
clearInterval(this.tt);
this.tt=setInterval(()=>{
this.kg=true;
this.init2();
},this.delay)
}
init(){
var that=this;
// 为前一张后一张两个按钮添加事件
this.prev.on("click",function(){
that.kg=false;
that.init2();
});
this.next.on("click",function(){
that.kg=true;
that.init2();
});
// 需要小圆点的情况下生成小圆点
if(this.points){
for(var i=0;i<this.img.length;i++){
this.ul.append($("<li>"));
}
this.li=this.ul.children("li"); // 添加样式
this.ul.css({
position: "absolute",
left:"43%",
display: "flex",
width: "14%",
"justify-content": "space-around",
bottom: "10px",
padding: 0,
})
this.li.css({
display: "block",
width: "40px",
height: "3px",
"z-index":30
})
// 给当前和其他添加样式
this.li.eq(this.index).css("background","red");
this.li.eq(this.index).siblings().css("background","#0ff");
this.init1();
}
}
init1(){
var that=this;
// 给每个小圆点移入事件,鼠标移入时切换图片
this.ul.on("click","li",function(){
if(that.index<$(this).index()){
that.qian=that.index;
that.kg=true;
}else if(that.index==$(this).index()){
return 0;
}else{
that.hou=that.index;
that.kg=false;
}
that.index=$(this).index();
that.move();
});
}
init2(){
// 计算索引
if(this.kg)
if(this.index==this.img.length-1)
{this.index=0;
this.qian=this.img.length-1;}
else
{this.index++;
this.qian=this.index-1}
else
if(this.index==0)
{this.index=this.img.length-1;
this.hou=0;}
else
{this.index--;
this.hou=this.index+1}
this.move();
}
move(){
clearInterval(this.tt);
if(this.points){
// 清理其他小圆点特殊样式
for(var j=0;j<this.li.length;j++)
this.li.eq(j).css("background","#00FFFF");
// 给当前小圆点加特殊样式
this.li.eq(this.index).css("background","red");
}
var w=parseInt(this.img.eq(1).width());
// 动画,轮播图的图片的具体效果
if(this.kg){
this.img.eq(this.qian).css("left",0).stop().animate({left:-1*w},this.duration);
this.img.eq(this.index).css("left",w+"px").stop().animate({left:0},this.duration);
}else{
this.img.eq(this.hou).css("left",0).stop().animate({left:w},this.duration);
this.img.eq(this.index).css("left",-1*w+"px").stop().animate({left:0},this.duration);
}
// 结尾时将清理掉的计时器重新绑定
if(this.autoplay)
clearInterval(this.tt);
this.tt=setInterval(()=>{
this.kg=true;
this.init2();
},this.delay)
}
}
// 绑定banner方法
$.fn.extend({
banner (obj) {
new Banner(this,obj);
}
});
})(jQuery);
jQuery封装轮播图插件的更多相关文章
- jquery, js轮播图插件Swiper3
轮播图插件Swiper3 HTML代码 如果只是简单的使用轮播图,直接复制我的html代码就可以. 如果想要高级一些,就自己去看文档吧 <!DOCTYPE html> <html l ...
- 封装一个简单的原生js焦点轮播图插件
轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...
- jquery的fadeTo方法的淡入淡出轮播图插件
由于对基于jquery的简单插件开发有了一定的了解,慢慢的也对基于jquery的插件开发有了兴趣,在上班结束之后就研究各种插件的思路逻辑.最近开发了一款基于jquery的fadeTo方法的轮播图插件, ...
- 原生JS面向对象思想封装轮播图组件
原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...
- 学习笔记: js插件 —— SuperSlide 2 (轮播图插件,PC用)
SuperSlide 2 轮播图插件,较老.但还好用. 适用于PC,是绑定到jquery上的方法: $.slide(); 如果在实际中找不到.slide方法,请检查jquery等.js文件的引入次序 ...
- 原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
- 图片轮播图插件的使用 unslider!!!
1.百度图片轮播图unslider,第一个就会出现jquery unslider轮播图,点击进去,下载网站提供的文件,解压,内部有我们需要使用的各种js,图片等. 2.在自己的eclipse或者int ...
- 用jQuery实现轮播图效果,js中的排他思想
---恢复内容开始--- jQuery实现轮播图不用单独加载. 思路: a. 通过$("#id名");选择需要的一类标签,获得一个伪数组 b.由于是伪数组的原因,而对数组的处理最多 ...
- 第124天:移动web端-Bootstrap轮播图插件使用
Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Car ...
随机推荐
- 脚本_监控 HTTP 服务器的状态
#!bin/bash#功能:监控 HTTP 服务器的状态(测试返回码) #作者:liusingbon#设置变量,url 为你需要检测的目标网站的网址(IP 或域名)url=http://192.168 ...
- Java疯狂讲义笔记——Lambda表达式
Java8新增的Lambda表达式 [特性]支持将代码块作为方法参数,Lambda表达式允许使用更简洁的代码来创建只有一个抽象方法的接口(这种接口被称为函数式接口)的实例. [组成部分]1,形参列表 ...
- 没有dockerfile的情况下如何查看docker的镜像信息
前言 参考资料 https://baijiahao.baidu.com/s?id=1564406878758073&wfr=spider&for=pc 很实用的功能哈.. 步骤 1.先 ...
- webpack对icon-font图片的处理
一.对图片的处理 安装url-loader 然后再loaderli配置这样会把图片打包成base64格式 { test: /\.(gif|png|jpg)\??.*$/, loader: 'url-l ...
- scipy与sklearn下载与安装
一.scipy下载与安装 scipy下载地址:http://www.lfd.uci.edu/~gohlke/pythonlibs/#opencv提供各种包whl文件 下载之后放到Scripts文件中 ...
- 2018-2019-2 20175120 实验四《Android程序设计》实验报告
任务一:Android Studio的安装测试 任务要求:参考<Java和Android开发学习指南(第二版)(EPUBIT,Java for Android 2nd)>第二十四章: 参考 ...
- error MSB8008: 指定的平台工具集(v110)未安装或无效
转自VC错误:http://www.vcerror.com/?p=318 问题描述: 平台工具集(v110)是vs2012下用的,你是用vs2010打开工程,它默认是用v100, 所以这个工程可能用v ...
- 大数据学习笔记之Hadoop(三):MapReduce&YARN
文章目录 一 MapReduce概念 1.1 为什么要MapReduce 1.2 MapReduce核心思想 1.3 MapReduce进程 1.4 MapReduce编程规范(八股文) 1.5 Ma ...
- drf 分页,获取fk,choise,m2m等字段数据(序列化)
1.什么是restful规范 是一套规则,用于程序之间进行数据交换的约定. 他规定了一些协议,对我们感受最直接的的是,以前写增删改查需要写4个接口,restful规范的就是1个接口,根据method的 ...
- LeetCode刷题: 【120】三角形最小路径和
1. 题目: 给定一个三角形,找出自顶向下的最小路径和.每一步只能移动到下一行中相邻的结点上. 例如,给定三角形: [ [2], [3,4], [6,5,7], [4,1,8,3] ] 自顶向下的最小 ...