支持PC拖动的轮播图
支持PC拖动的轮播图,本插件依赖于jquery,请先引入jquery。
JavaScript 图片展示处理
共6Star
详细介绍
$B
支持PC拖动的轮播图,本插件依赖于jquery,请先引入jquery。
快速上手
首先你需要调整好你的HTML及CSS,使得一个外层容器固定大小,里面一个内层容器,内层容器中放图片即可,内层容器不用考虑层级;
简单的例子:
css code:
img {
width: 450px;
height: 250px;
float: left;
}
#contentbox {
width: 450px;
overflow: hidden;
position: relative;
height: 250px;
margin:auto;
}
#content {
width: 2250px;
overflow: hidden;
position: absolute;
left: 0;
}
html code:
<div id="contentbox">
<div id="content" draggable="false">
<img src='images/$B3.png' draggable="false">
<img src='images/$B1.png' draggable="false">
<img src='images/$B2.png' draggable="false">
<img src='images/$B3.png' draggable="false">
<img src='images/$B1.png' draggable="false">
</div>
<div class="btn">
<button id="left">左</button><button id="right">右</button>
</div>
</div>
从上面的code可以看出,轮播图的外层容器是id为contentbox的div,这个容器是轮播图的展示可视区域的大小;
然后里面的容器是id为content的div,这个容器装入5张图片,并且图片都是横向排列,
这个时候就可以使用$B进行制作轮播图了!
调用$B.init()传入配置信息;
$B.init({
contentBox:'#contentbox', //配置外层容器
content:"#content", //配置内层移动容器
infinity:true, //是否开启循环
autoPlay:true, //是否自动轮播
pcDrag:true, //是否开启支持PC拖拽轮播
dragTime:400, //滑动动画速度
moveTime:2000 //自动播放速度
});
至此你的轮播图就实现了
配置项:
上面已经谈到外层容器和内层容器,接下来说下$B.init();
里面接收7个参数:
contentBox
string,配置外层容器,可以填写id,class,注意是jquery选择器的写法;
content
string,配置内层容器必须包括img轮播图,与contentBox一样为jquery选择器写法;
infinity
boolean,配置轮播图是否开始循环模式,可选参数,默认为false;注意:为保证轮播图的流畅,开启infinity必须在首长图片插入最后一张图片,在原本计划最后一张图片后插入第一张图片
autoPlay
boolean,配置轮播图是否自动播放,可选参数,默认为false;
pcDrag
boolean,配置轮播图是否可以在PC端进行鼠标拖拽进行切换,可选参数,默认为false;
dragTime
number,时间为毫秒,配置轮播图动作释放时的速度时间,可选参数,默认为500;
moveTime
number,时间为毫秒,配置轮播图播放时间间隔,可选参数,默认为3000;
定义按钮操作轮播图左右切换:
$B.clickLeft()
直接调用方法即可,轮播图会向右移动,显示左面的一张;
$B.clickRight()
直接调用方法即可,轮播图会向左移动,显示右面的一张;
效果
下载code 执行index.html 即可
进阶
在需要点击轮播图标识符进行切换的时候可以采用修改$B.index来实现
我们看下面这段代码
html code:
<div id="contentbox">
<div id="content" draggable="false">
<img src='images/$B3.png' draggable="false">
<img src='images/$B1.png' draggable="false">
<img src='images/$B2.png' draggable="false">
<img src='images/$B3.png' draggable="false">
<img src='images/$B1.png' draggable="false">
</div>
<div class="btn">
<button id="left">左</button><button id="right">右</button>
</div>
<div class="msbtn">
<ul>
<li class="active"></li>
<li></li>
<li></li>
</ul>
</div>
</div>
需要使用class为msbtn下面的li来实现标示轮播图的功能,这个时候就需要使用$B.index来进行标识
js code:
$(".msbtn li").each(function(i,val){
$(val).click(function(){
$B.index=i+1;
$B.animatemove();
})
})
使用jquery的each方法进行遍历绑定点击事件,由于开启了循环,首尾各有一张重复图片,所以这里要i+1;然后调用$B.animatemove()进行轮播图的移动;
接下来实现下一个功能
轮播图移动后的callBack;
$B.init中允许传入一个callBack函数;callBack函数在轮播图每一次移动后调用,这样就可以满足通常的一个需求
标识轮播图的元素进行active切换;
var config={
contentBox:'#contentbox', //配置外层容器
content:"#content", //配置内层移动容器
infinity:true, //是否开启循环
autoPlay:true, //是否自动轮播
pcDrag:true, //是否开启支持PC拖拽轮播
dragTime:400, //滑动动画速度
moveTime:2000, //自动播放速度
callBack:function(){
$(".msbtn li").removeClass('active');
$(".msbtn li:eq("+($B.index-1)+")").addClass('active');
}
};
$B.init(config);
首先清除全部class,然后再指定标识轮播的元素上添加active样式;