欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-14 12:00:33
代码如下: //图片幻灯展示 $(function() { var imgpro = { imgwidth : 626, //图片宽度 imgconlength : 0, //图片总长度 index...

代码如下:

//图片幻灯展示
$(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++;
}

});