微客导航 » 文章资讯 » jquery+css实现简单的图片轮播效果

jquery+css实现简单的图片轮播效果

2023-09-26 23:08:05 293

开发过程中需要用到图片轮播的插件，在网上找了几个插件之后还是决定自己码一个，比较简洁的功能，以后说不定还会有用。

ps：

功能比较简单，整个框并不能根据图片的大小自动调节，这里所用的图片是1170*500的，如果需要改成其他大小的图片，自行修改.pic-list下img的宽度。

.pic-list中的宽度为整个横幅的宽度，如果需要轮播的图片数量很多，.pic-list的宽度应大于数量*单张宽度，

html

< >

css

.banner{
width:100%;
height:500px;
overflow:hidden;
position:relative;

}
.bannera{
text-decoration:none;
}
.banner.pic-list{
width:10000px;
height:500px;
position:absolute;
z-index:1;
}
.banner.pic-listimg{
width:1170px;
float:left;
}
#buttons{
position:absolute;
z-index:2;
height:10px;
bottom:20px;
left:550px;

}
#buttonsspan{
cursor:pointer;
float:left;
border:1pxsolid#fff;
width:10px;
height:10px;
border-radius:50%;
background:#333;
margin-right:5px;
}
#buttons.on{
background:orange;
}
.arrow{
cursor:pointer;
line-height:36px;
text-align:center;
font-size:20px;
font-weight:bold;
width:40px;
height:40px;
position:absolute;
z-index:2;
top:200px;
background:rgba(0,0,0,0.5);
color:#fff;
display:none;
}
.banner:hover.arrow{display:block;}

#prev{
left:20px;
}
#next{
right:20px;
}

$(document).ready(function(){
varpicNum=4;//图片数量，根据实际修改
varpicWidth=1170;//图片的宽度，根据实际修改
varpicMaxWidth=-1*picNum*picWidth;
varcurrentPic=1;
varnext=$('#next');
varprev=$('#prev');
varflag=false;

prev.on('click',function(){
if(!flag){
calPx(1170);
currentPic--;
if(currentPic<1){
currentPic=picNum;
}
$('#buttonsspan').eq(currentPic-1).addClass('on').siblings().removeClass('on');
}
});

next.on('click',function(){
if(!flag){
calPx(-1170);
currentPic++;
if(currentPic>picNum){
currentPic=1;
}
$('#buttonsspan').eq(currentPic-1).addClass('on').siblings().removeClass('on');
}


});
$('.banner').on('mouseover',function(){
stop();
}).on('mouseout',function(){
play();
})
functionnextClick(){
next.click();
}
functionplay(){
setInt=setInterval(nextClick,2000);
}
functionstop(){
clearInterval(setInt);
}

functioncalPx(leftPx){
flag=true;
varleft=parseInt($('.pic-list').css('left'));
varnewLeft=left+leftPx;
vartime=300;
varinterval=10;
varspeed=leftPx/(time/interval);

functiongo(){
varleft=parseInt($('.pic-list').css('left'));
if((speed<0&&left>newLeft)||(speed>0&&left-1170){
newLeft=picMaxWidth;
}elseif(newLeft
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

jquery+css实现简单的图片轮播效果

热门推荐

随机推荐