js手写，全屏轮播（支持左右切换）

最新推荐文章于 2023-06-15 19:06:48 发布

prient_top

最新推荐文章于 2023-06-15 19:06:48 发布

阅读量669

点赞数 1

分类专栏： js 文章标签： jquery 轮播

本文链接：https://blog.csdn.net/qq_22858601/article/details/53908507

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

不说话直接贴码

html

js:

$(function(){

//轮播开始
var width=$('#lunbo').width();
var num=$('#lunbo').find('li').length;
$('#lunbo').find('ul').css('width',width*num);
$('#lunbo').find('li').css({'width':width,'float':'left'});
$('#lunbo_left').click(function(){
clearInterval(times);
clearInterval(time);
lbload(-1,1);
})
$('#lunbo_right').click(function(){
clearInterval(times);
clearInterval(time);
lbload(1,1);
})
//
var num=0;
var times;
var time;
var size;
//自动加载
function lbload(type,nums){
if(type<0){
for(var i=0;i<nums+1;i++){ $('#lunbo').find('ul').eq(0).prepend($('#lunbo').find('ul').eq(0).find('li').eq($('#lunbo').find('ul').eq(0).find('li').length-1).clone(true));
//清除第一个
$('#lunbo').find('ul').eq(0).find('li').eq($('#lunbo').find('ul').eq(0).find('li').length-1).remove();
}
load_size=-width/100;
var size=width*nums;
// return false;
}else{
for(var i=0;i<nums-1;i++){
$('#lunbo').find('ul').eq(0).append($('#lunbo').find('ul').eq(0).find('li').eq(0).clone(true));
//清除第一个
$('#lunbo').find('ul').eq(0).find('li').eq(0).remove();
}
load_size=width/100;
var size=0;
}

times = setInterval(function(){
size+=load_size;
$('#lunbo').find('ul').eq(0).css('margin-left',-size+'px');
if(Math.round(size%width)==0){
//复制
$('#lunbo').find('ul').eq(0).append($('#lunbo').find('ul').eq(0).find('li').eq(num).clone(true));
//清除第一个
$('#lunbo').find('ul').eq(0).find('li').eq(num).remove();
//清除margin-left
$('#lunbo').find('ul').eq(0).css('margin-left','0px');

var numss=$('#lunbo').find('ul').eq(0).find('li').eq(0).attr('data-id');
$('.view-raduis').siblings().removeClass('active');
$('.view-raduis').eq(numss).addClass('active');

clearInterval(times);
time=setTimeout(lbload,2000);

}
},10);
}
lbload(0);
//小点点触发事件
$('.view-raduis').each(function(){
$(this).click(function(){
var num=$('.active').attr('data-id');
var nums=$(this).attr('data-id');
if(nums-num<0){
clearInterval(times);
clearInterval(time);
lbload(-1,num-nums);
}else if(nums-num>0){
clearInterval(times);
clearInterval(time);
lbload(1,nums-num);
}else{
return false;
}

})
})
})