jquery实现图片轮播器

2024-02-22 19:13:02 71

一、轮播器

1、HTML框架

2、css的样式

/*清除列表前默认黑点*/
*{
margin:0;
padding:0;
}
img{
border:0;
}
ol,ul,li{list-style:none;}
body{
margin:50px;
}
.wrap{
width:500px;/*一张图片的高和宽*/
height:350px;
border:1pxsolidred;
position:relative;/*以这一张图的边框为基准位置*/
overflow:hidden;/*将超过这个长宽高的部分隐藏*/
}
.wrapul{
width:2000px;/*列表的行是四张图片的宽度*/
position:absolute;/*防止图片溢出*/
left:0;
top:0;
}
.wrapulli{
float:left;/*将四张图片紧挨着横着排列*/
width:500px;
}
.wrapol{
position:absolute;
bottom:10px;
right:10px;
}
.wrapolli{
float:left;/*达到横着排列的目的*/
width:16px;
height:16px;
line-height:16px;
text-align:center;/*字体在列元素中举重显示*/
color:#fff;
background:#000;
border:1pxsolidyellow;
margin-right:3px;/*列与列之间的距离*/
cursor:pointer;
}
.wrapolli.current{
background:#fff;
color:#000;
}
.wrap.introduce{
width:400px;
height:30px;
line-height:30px;
background:rgba(0,0,0,0.5);
/*达到透明显示的作用；或者用“opacity:0.5;
filter:alpha(opacity=50);”*/
color:#fff;
position:absolute;
bottom:0;
left:0;
}

3、JS控制

$(document).ready(function(){
varoul=$('.wrapul');//获取行；
varali=$('.wrapulli');//获取列；
varnumLi=$('.wrapolli');//获取数字的列；
varaliWidth=$('.wrapulli').eq(0).width();//获取单张图片的宽度；
var_now=0;//这个控制数字样式的计数器
var_now2=0;//这个是控制图片运动距离的计数器
vartimeId;//定时器的开关
varaimg=$('.wrapulimg');//获取wrap中img元素
varop=$('.wrapp')//获取wrap中p元素


numLi.click(function(){//鼠标点击触发的函数；
varindex=$(this).index();//如果点击第一张图片，index=0；
_now=index;
//不管_now还是_now2都要和点击时index同步；
_now2=index;
varimgAlt=aimg.eq(_now).attr('alt');//获取_now时刻的的alt值
op.html(imgAlt);//并将atl值显示

$(this).addClass('current').siblings().removeClass();
//数字样式的增和删；
oul.animate({'left':-aliWidth*index},500);
//图片的移动，行元素的左侧距离wrap的左侧-500*index
});


functionslider(){
if(_now==numLi.size()-1){//当滚动到第四张图片的时候
ali.eq(0).css({//通过定位的方法将第一张移到最后一张；
'position':'relative',
'left':oul.width()
});
_now=0;
}
else{
_now++;//如果没达到第四张，那就将_new+1；
}
_now2++;//图片控制计数器+1；
numLi.eq(_now).addClass('current').siblings().removeClass();//数字样式的增和删；
varimgAlt=aimg.eq(_now).attr('alt');//获取_now时刻的的alt值
op.html(imgAlt);//并将atl值显示
oul.animate({'left':-aliWidth*_now2},500,function(){
//图片的移动，行元素的左侧距离wrap的左侧-500*now2
if(_now==0){
ali.eq(0).css('position','static');
oul.css('left',0);
_now2=0;
}
});
}

timeId=setInterval(slider,1500);
//每1500ms，自动切换图片
//鼠标点击图片则停止计时器，停止“自动切换图片”；离开则继续定时器切换图片
//$('.wrap').mouseover(function(event){
//clearInterval(timeId);
//});

//$('.wrap').mouseover(function(event){
//timeId=setInterval(slider,1500);
//});

$('.wrap').hover(function(){
clearInterval(timeId);

},function(){
timeId=setInterval(slider,1500);

});
});

*重要函数

1、获取各个标签值并显示

varimgAlt=aimg.eq(_now).attr('alt');//获取_now时刻的的alt值
op.html(imgAlt);//并将atl值显示

2、改变数字样式

$(this).addClass('current').siblings().removeClass();
//数字样式的增和删；

3、滚动图片

oul.animate({'left':-aliWidth*index},500);
//图片的移动，行元素的左侧距离wrap的左侧-500*index

*注意点

1、同步

_now=index;
//不管_now还是_now2都要和点击时index同步；
//index可能在点击鼠标之后变成3,；松开鼠标后我们希望_now变成从3变成0，但是因为setInterval之后_now加1，_now其实还是从0变成1；所以需要同步_now和index；

2、计数器

_now2的作用是防止父元素在第一张留出空白图片；数字定时器和图片运动控制定时器是不同步的

var_now=0;//这个控制数字样式的计数器
var_now2=0;//这个是控制图片运动距离的计数器

3、去relative属性

if(_now==0){
ali.eq(0).css('position','static');//去relative属性
oul.css('left',0);//当去完relative之后，要还原ul的“left”值为0；
_now2=0;

4、去属性的时机

Oul.animate({css属性的设置},500,function())其中function就是在500ms执行完之后的操作；

oul.animate({'left':-aliWidth*_now2},500,function(){
//图片的移动，行元素的左侧距离wrap的左侧-500*now2
//根据一组css执行属性动画
if(_now==0){
ali.eq(0).css('position','static');
oul.css('left',0);
_now2=0;//当_now为0的时候，_now2也应该还原回去为0；
}
});

*难点

首先，要学会获取元素值；
其次，了解几种函数；
再则，变量的灵活使用，达到了解变量每时每刻的值；
最后，定时器的控制是最难的；

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

jquery实现图片轮播器

热门推荐

随机推荐