代码改变世界

图片幻灯展示源码

2012-07-13 09:14  江苏黑马  阅读(507)  评论(1)    收藏  举报 
  1 //图片幻灯展示
  2             $(function() {
  3                 var imgPro = {
  4                     imgWidth : 626, //图片宽度
  5                     imgConLength : 0, //图片总长度
  6                     index : 0, //导航锁定索引
  7                     count : 0, //图片数量
  8                     left : 0, //绝对定位left
  9                     pre : -1, //上个图片索引
 10                     curr : 0, //当前图片索引
 11                     next : 1, //下个图片索引
 12                     direction : 1, //自动播放方向
 13                     interTime : 3000//间隔时间
 14                 }
 15                 addImgAlt(imgPro.curr);
 16                 imgPro.count = $('#banner .list a img').length;
 17                 imgPro.imgConLength = imgPro.imgWidth * imgPro.count;
 18                 imgPro.left = parseInt($('#box .list ul').css("left"));
 19                 //播放定时器
 20                 var t = setInterval(imgPlay, imgPro.interTime);
 21                 $('#box .arrowl img, #box .arrowr img,#banner .list a,#box .count li,#box p').hover(function() {
 22                     clearInterval(t);
 23                 }, function() {
 24                     t = setInterval(imgPlay, imgPro.interTime);
 25                 });
 26                 // 自动播放图片
 27                 function imgPlay() {
 28                     if ((imgPro.next != imgPro.count && imgPro.direction == 1) || (imgPro.pre == -1 && imgPro.direction == -1)) {
 29                         imgPro.direction = 1;
 30                         toNext();
 31                     } else {
 32                         imgPro.direction = -1;
 33                         toLast();
 34                     }
 35 
 36                 }
 37 
 38                 //点击左方向
 39                 $('#box .arrowl img').click(function() {
 40                     if (imgPro.curr != 0) {
 41                         toLast();
 42                     }
 43                 });
 44                 //点击右方向
 45                 $('#box .arrowr img').click(function() {
 46                     if (imgPro.next != imgPro.count) {
 47                         toNext();
 48                     }
 49                 });
 50                 //点击导航播放
 51                 $('#box .count li').click(function() {
 52                     imgPro.index = $('#box .count li').index(this);
 53                     if (imgPro.curr != imgPro.index) {
 54                         imgPro.left += (imgPro.curr - imgPro.index) * imgPro.imgWidth;
 55                         addImgAlt(imgPro.index);
 56                         play();
 57                         $('#box .count li').eq(imgPro.curr).removeClass('current').end().eq(imgPro.index).addClass('current');
 58                         imgPro.curr = imgPro.index;
 59                         imgPro.pre = imgPro.index - 1;
 60                         imgPro.next = imgPro.index + 1;
 61                     }
 62                 });
 63                 //播放
 64                 function play() {
 65                     $('#box .list ul').css({
 66                         'opacity' : '0.5'
 67                     }).animate({
 68                         'left' : imgPro.left + "px",
 69                         'opacity' : '1'
 70                     }, 'slow');
 71                 }
 72 
 73                 //添加图片说明信息
 74                 function addImgAlt(index) {
 75                     $("#box p").text($("#banner .list a img").eq(index).attr("alt"));
 76                 }
 77 
 78                 //上一张
 79                 function toLast() {
 80                     imgPro.left += imgPro.imgWidth;
 81                     addImgAlt(imgPro.pre);
 82                     play();
 83                     $('#box .count li').eq(imgPro.curr).removeClass('current').end().eq(imgPro.pre).addClass('current');
 84                     imgPro.pre--;
 85                     imgPro.curr--;
 86                     imgPro.next--;
 87                 }
 88 
 89                 //下一张
 90                 function toNext() {
 91                     imgPro.left -= imgPro.imgWidth;
 92                     addImgAlt(imgPro.next);
 93                     play();
 94                     $('#box .count li').eq(imgPro.curr).removeClass('current').end().eq(imgPro.next).addClass('current');
 95                     imgPro.pre++;
 96                     imgPro.curr++;
 97                     imgPro.next++;
 98                 }
 99 
100             });

效果图：