微客导航 » 文章资讯 » jquery无缝图片轮播组件封装

jquery无缝图片轮播组件封装

2023-08-29 02:52:04 351

图片轮播在我们的前端开发中是非常常见的，下面是自己写的一个图片轮播组件，支持自动轮播，手动轮播，无缝衔接。

dom结构

首先是dom结构，将所有内容放入一个大盒子，应用ul标签存放图片列表，圆点定位图片位置。

下面是盒子样式，这里使用百分比自适应，大盒子使用overflow:hidden;防止图片溢出，将ul宽设置为图片总宽度+1（这里+1后面会有用到）。

#box{
width:100%;
height:40.0em;
overflow:hidden;
position:absolute;
}
#box#banners{
width:500%;
position:relative;
}
#box.banners-img{
float:left;
width:20%;
height:40.0em;
}
#box.banners-imgimg{
width:100%;
height:100%;
}
.num{
width:10%;
height:2.0em;
position:relative;
top:82%;
left:40%;
-webkit-transform:rotate(-90deg);
-ms-transform:rotate(-90deg);
transform:rotate(-90deg);
}
.numli{
width:2.0em;
height:100%;
position:relative;
border-radius:50%;
background-color:grey;
}
.num.on{
background-color:black;
}

.btns{
width:1.0em;
height:1.0em;
background-color:rgba(0,0,0,0.5);
position:relative;
top:50%;
color:white;
font-size:3.0em;
text-align:center;
line-height:1.0em;
cursor:pointer;
display:none;
}
#box:hover.btns{
display:block;
}
.btn_l{
left:0;
}
.btn_r{
right:0;
}

组件使用jquery编写

functionaddImg(item,arrSrc){//添加图片，这里需同时修改样式，读者可自行修改
for(leti=0;i");
}

//获取图片宽度
varimgWidth=parseInt($("#banners.banners-img").css("width"));
//因宽度为百分比，窗口大小变化时需重新获取
window.onresize=function(){
varnewWidth=$("#banners.banners-img").css("width");
imgWidth=parseInt(newWidth);
}
//鼠标移到按钮时轮播
$(".numli").hover(function(){
varindex=$(this).index();
i=index;
$("#box#banners").stop().animate({left:-i*imgWidth},500);
$("#box.numli").eq(i).addClass("on")
.siblings().removeClass("on");

})
//自动轮播
vart=setInterval(function(){
i++;
move();
},3000);
//鼠标移入时停止自动轮播
$("#box").hover(function(){
clearInterval(t);
},function(){
t=setInterval(function(){
i++;
move();
},3000);
})

//手动轮播
$("#box.btn_l").click(function(){
i--;
move();
});

$("#box.btn_r").click(function(){
i++;
move();
});

//封装一个运动函数
//alert(imgWidth);
functionmove(){
if(i==Size){//当轮播到最后一张时过渡到第一张图片
$("#box#banners").css({left:0});
i=1;
}
if(i==-1){
$("#box#banners").css({left:-(Size-1)*imgWidth});
i=Size-2;
}
$("#box#banners").stop().animate({left:-i*imgWidth},500);
if(i==Size-1){
$("#box.numli").eq(0).addClass("on")
.siblings().removeClass("on");
}else{
$("#box.numli").eq(i).addClass("on")
.siblings().removeClass("on");
}

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

jquery无缝图片轮播组件封装

热门推荐

随机推荐