基于jquery的图片幻灯展示源码 |
本文标签:图片幻灯 复制代码 代码如下: //图片幻灯展示 $(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++; } }); |