当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 基于jquery的图片幻灯展示源码

基于jquery的图片幻灯展示源码

2018年11月25日  | 移动技术网IT编程  | 我要评论

代码如下:

//图片幻灯展示
$(function() {
var imgpro = {
imgwidth : 626, //图片宽度
imgconlength : 0, //图片总长度
index : 0, //导航锁定索引
count : 0, //图片数量
left : 0, //绝对定位left
pre : -1, //上个图片索引
curr : 0, //当前图片索引
next : 1, //下个图片索引
direction : 1, //自动播放方向
intertime : 3000//间隔时间
}
addimgalt(imgpro.curr);
imgpro.count = $('#banner .list a img').length;
imgpro.imgconlength = imgpro.imgwidth * imgpro.count;
imgpro.left = parseint($('#box .list ul').css("left"));
//播放定时器
var t = setinterval(imgplay, imgpro.intertime);
$('#box .arrowl img, #box .arrowr img,#banner .list a,#box .count li,#box p').hover(function() {
clearinterval(t);
}, function() {
t = setinterval(imgplay, imgpro.intertime);
});
// 自动播放图片
function imgplay() {
if ((imgpro.next != imgpro.count && imgpro.direction == 1) || (imgpro.pre == -1 && imgpro.direction == -1)) {
imgpro.direction = 1;
tonext();
} else {
imgpro.direction = -1;
tolast();
}

}

//点击左方向
$('#box .arrowl img').click(function() {
if (imgpro.curr != 0) {
tolast();
}
});
//点击右方向
$('#box .arrowr img').click(function() {
if (imgpro.next != imgpro.count) {
tonext();
}
});
//点击导航播放
$('#box .count li').click(function() {
imgpro.index = $('#box .count li').index(this);
if (imgpro.curr != imgpro.index) {
imgpro.left += (imgpro.curr - imgpro.index) * imgpro.imgwidth;
addimgalt(imgpro.index);
play();
$('#box .count li').eq(imgpro.curr).removeclass('current').end().eq(imgpro.index).addclass('current');
imgpro.curr = imgpro.index;
imgpro.pre = imgpro.index - 1;
imgpro.next = imgpro.index + 1;
}
});
//播放
function play() {
$('#box .list ul').css({
'opacity' : '0.5'
}).animate({
'left' : imgpro.left + "px",
'opacity' : '1'
}, 'slow');
}

//添加图片说明信息
function addimgalt(index) {
$("#box p").text($("#banner .list a img").eq(index).attr("alt"));
}

//上一张
function tolast() {
imgpro.left += imgpro.imgwidth;
addimgalt(imgpro.pre);
play();
$('#box .count li').eq(imgpro.curr).removeclass('current').end().eq(imgpro.pre).addclass('current');
imgpro.pre--;
imgpro.curr--;
imgpro.next--;
}

//下一张
function tonext() {
imgpro.left -= imgpro.imgwidth;
addimgalt(imgpro.next);
play();
$('#box .count li').eq(imgpro.curr).removeclass('current').end().eq(imgpro.next).addclass('current');
imgpro.pre++;
imgpro.curr++;
imgpro.next++;
}

});

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网