【jquery】幻灯片效果

闲着无聊，用Jquery写了一个幻灯片效果。

我这人喜欢造轮子，除了jquery这种有强大开发团队的框架级别JS，其实的一些小程序都是尽量自己写。

一是因为怕出问题了没人问，二是自己写的改起来也方便。

效果可参考：

http://www.helloweba.com/demo/supersized/

只是上面这个DEMO用的是supersized，功能比较强大，就是代码加密过了，读起来很困难。

废话不说，代码放上。

CSS：

 

?

1 2 3 4 5 6 7 8 9 10 11 12

img.slider-image {     position:absolute;     display:none;     top:0px;     left:0px;     z-index:-10; } img.slider-image.visible {     visibility:visible; 　 display:inline;     z-index:-1; }

 

JS：

2014-12-11 追加：

我把这段代码加到项目里，然后项目马上要结束的时候发现，这货在IE8下面居然无法正常执行。

原因是fadeIn，fadeOut和window.innerWidth 以及 window.innerHeight在IE下无法正常执行。

好吧，一直都是钟爱Chrome，不用IE调试也是我的原罪。

于是我就在代码里加了一个判断，如果是IE的话，就不用fadeIn，fadeOut,

　　

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118

var pic = function (url, parentId,callback) {     this.url = url;     this.id = url.split('/').reverse()[0].split('.')[0];     this.parentId = parentId;     this.img = null;     this.isLoaded = false;     this.load();     this.callback = callback; } pic.prototype = {     load: function () {         this.img = new Image();         this.img.src = this.url;         this.img.id = this.id;         this.img.className = "slider-image";           var pic = this;         this.img.onload = function () {             pic.img.onload = null;             pic.img.height = window.innerHeight;             pic.img.width = window.innerWidth; 　　　　　　　// 加载完毕，将图片添加到DOM中             $("#" + pic.parentId).append(pic.img);             pic.isLoaded = true;             if (typeof (pic.callback) == "function") {                 pic.callback();             }         }     } }   var slider = function (opt) {     this.opt = {         start: false,// 判断幻灯片开始循环         index: 0,         imgsUrl: null,         interval: 5000,// 幻灯片间隔时间         id :"slider"// 幻灯片DIV ID     }     this.imgs = null;     $.extend(this.opt,opt);     this.init(); } slider.prototype = {     init: function () {         var slider = this; 　　　　 // 页面添加幻灯片父级DIV         var div = document.createElement('div');         div.id = slider.opt.id;         div.style.display = "block";         document.body.appendChild(div);   　　　　　// 加载图片         var imagesUrls = this.opt.imgsUrl;         this.imgs = new Array();         for (var i = 0; i < imagesUrls.length; i++) {             this.imgs.push(                 new pic(imagesUrls[i],                 slider.opt.id,                 function () { 　　　　　　　　　　　　// 图片加载完毕，立即开始循环幻灯片                     if (!slider.opt.start) {                         slider.opt.start = true;                         slider.start();                     }                 }             ));         }     },     slide: function (slider) {         var imagesSrc = slider.imgs;         var img = imagesSrc[slider.opt.index];   　　　　 // 循环播放幻灯片         slider.opt.index++;         if (slider.opt.index >= imagesSrc.length) {             slider.opt.index = 0;         }         if (img.isLoaded) {             // 将正在显示的图片淡出，将下一张图片淡入             var diplaying = $('#' + slider.opt.id).find('.visible'); 　　　　　　  　　　　　　　// ie 兼容             if (!jQuery.browser.msie) {                 diplaying.fadeOut(2000);             }                          diplaying.removeClass("visible");             var prepare = $("#" + img.id);             prepare.addClass("visible");   　　　　　　 // ie兼容             if (jQuery.browser.msie) {                 prepare.css({                     "width": document.body.clientWidth,                     "height": document.body.clientHeight                 });             } else {                 prepare.css({                     "width": window.innerWidth,                     "height":window.innerHeight                 });                 prepare.fadeIn(1000);             }         } else {             // 如果这张图片没有加载，则立刻显示下张图片             slider.slide(slider);         }     },     start: function () {         var slider = this;         slider.slide(slider)         // 间隔一段时间循环播放幻灯片         setInterval(function () {             slider.slide(slider);         }, this.opt.interval);     } }

　　

 调用的时候，只要执行下面这段代码即可：

new slider({
    imgsUrl: ["/Images/Login/slider1.jpg", "/Images/Login/slider2.jpg", "/Images/Login/slider3.jpg"]
});