Heim  >  Artikel  >  Web-Frontend  >  基于jquery的图片幻灯展示源码_jquery

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

WBOY
WBOYOriginal
2016-05-16 17:51:561071Durchsuche
复制代码 代码如下:

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

});
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn