首页 > 代码库 > 【jquery】幻灯片效果
【jquery】幻灯片效果
闲着无聊，用Jquery写了一个幻灯片效果。
我这人喜欢造轮子，除了jquery这种有强大开发团队的框架级别JS，其实的一些小程序都是尽量自己写。
一是因为怕出问题了没人问，二是自己写的改起来也方便。
效果可参考：
http://www.helloweba.com/demo/supersized/
只是上面这个DEMO用的是supersized，功能比较强大，就是代码加密过了，读起来很困难。
废话不说，代码放上。
CSS：
img.slider-image { position:absolute; display:none; top:0px; left:0px; z-index:-10;}img.slider-image.visible { visibility:visible; z-index:-1;}
JS：
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 = http://www.mamicode.com/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; 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 =http://www.mamicode.com/ 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‘); diplaying.fadeOut(2000); diplaying.removeClass("visible"); var prepare = $("#" + img.id); prepare.addClass("visible"); 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"]});
【jquery】幻灯片效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。