不用swiper,写轮播(PC,移动端均适用)
有些项目需要控制文件大小或者削小工程包体积时,swiper会过于的大了,这时候一般会想到自己书写一个轮播,这里放出一个我大佬他封装的轮播。我觉得好用嘻嘻(~00<),不喜请× bye~
1、js代码
function lunbo() {
//轮播切换
!function(){
var lunbo = function(obj,time){
var index = 0;
var resize = function(num){
//这里是绑定轮播item,可自行更换绑定,cur样式控制显示与隐藏
obj.find('.lb .gif_box_img').hide().eq(num).show();
obj.find('.room_btn li,.dot ul li').removeClass('cur');
obj.find('.room_btn li,.dot ul li').eq(num).addClass('cur');
}
resize(index);
var timer = setInterval(function(){
index++;
if(index > obj.find('.lb .gif_box_img').length-1) index =0;
resize(index);
},time);
// 左滑动
function leftgo() {
clearInterval(timer);
index--;
if(index < -obj.find('.lb .gif_box_img').length) index =-1;
resize(index);
timer = setInterval(function(){
index++;
if(index > obj.find('.lb .gif_box_img').length-1) index =0;
resize(index);
},time);
}
// 右滑动
function rightgo() {
clearInterval(timer);
index++;
if(index > obj.find('.lb .gif_box_img').length-1) index =0;
resize(index);
timer = setInterval(function(){
index++;
if(index > obj.find('.lb .gif_box_img').length-1) index =0;
resize(index);
},time);
}
//按钮
obj.find('.room_btn li').on('click',function(){
clearInterval(timer);
index = $(this).index();
resize(index);
timer = setInterval(function(){
index++;
if(index > obj.find('.lb .gif_box_img').length-1) index =0;
resize(index);
},time);
});
// 左箭头
obj.find('.left_box').click(function() {
leftgo();
});
// 右箭头
obj.find('.right_box').click(function() {
rightgo();
});
// 手势滑动
var p_move,p_cy;
obj.find(".touch-box").bind("touchstart", function (event) {
var b = event.originalEvent.changedTouches[0];
p_cy = b.clientX; //获取初始纵坐标
});
obj.find(".touch-box").bind("touchmove", function (event) {
// event.preventDefault(); //锁定系统滑动
var b = event.originalEvent.changedTouches[0];
p_cy_now = b.clientX; //获取活动纵坐标
p_move = p_cy_now - p_cy; //计算移动距离
});
obj.find(".touch-box").bind("touchend", function (event) {
if (p_move<-30) {
// 左滑
rightgo();
}else if(p_move>30){
// 右滑
leftgo();
};
});
};
};
// 调用;
//lunbo(要轮播的容器,时间)
lunbo($('.lunbo_b'),1500);
2、html代码
<!-- css代码就自己写啦哈哈哈哈(叉腰) -->
<div class='lunbo_4 lazy_box lunbo_b'>
<div class='lb'>
<div class="gif_box_img">
<img class="lazyload" src="<?=$loading?>" data-src="<?=$cdn_path?>images/lunbo2_1_02.png?v=aa" alt="" />
</div>
<div class="gif_box_img">
<img class="lazyload" src="<?=$loading?>" data-src="<?=$cdn_path?>images/lunbo2_2_02.png?v=aa" alt="" />
</div>
<div class="gif_box_img">
<img class="lazyload" src="<?=$loading?>" data-src="<?=$cdn_path?>images/lunbo2_3_02.png?v=aa" alt="" />
</div>
</div>
<!-- 移动端的触摸范围 -->
<div class="touch-box"></div>
</div>
今天又是小白的一天呢。祝各位脱单不脱发,bug没有哈哈哈哈(其实是我的心愿TAT)