闲着无聊,用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;
  display:inline;
z-index:-1;
}

JS:

2014-12-11 追加:

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

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

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

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

  

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"]
});

【jquery】幻灯片效果的更多相关文章

  1. jquery特效 幻灯片效果

    jquery特效 幻灯片效果,效果图如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...

  2. 一个很好的幻灯片效果的jquery插件--kinMaxShow

    在做一些网站时,或多或少的要给网站做幻灯片效果,以前每次做这个效果,都是现成带网上找,找到的很多很杂,而且用完后就不会再理会更加不会去总结代码. 无意中找到了kinMaxShow这个插件,机会满足了我 ...

  3. SlidesJS - 老牌的响应式 jQuery 幻灯片插件

    SlidesJS 是一款老牌的 jQuery 幻灯片插件,经过多年的发展,已经成为一款功能齐全,设计精巧的幻灯片插件.支持循环.自动播放功能和淡入淡出过渡效果,并且能够自动生成分页,可以帮助开发者制作 ...

  4. Skippr – 轻量、快速的 jQuery 幻灯片插件

    Skippr 是一个超级简单的 jQuery 幻灯片插件.只是包括你的网页中引入 jquery.skippr.css 和 jquery.skippr.js 文件就能使用了.Skippr 能够自适应窗口 ...

  5. bxSlider 在网页里添加幻灯片效果

    幻灯片效果在网页上很常见,本文介绍用 bxSlider 轻松实现的方法. bxSlider是什么 bxSlider 是用 JQuery 和 CSS 实现网页中幻灯片效果的工具.可在 http://bx ...

  6. 新鲜出炉的30个精美的 jQuery & CSS3 效果【附演示和教程】

    新鲜出炉的30个精美的 jQuery & CSS3 效果[附演示和教程]   作为最流行的 JavaScript 开发框架,jQuery 在现在的 Web 开发项目中扮演着重要角色,它简化了 ...

  7. 18款 非常实用 jquery幻灯片图片切换

    1.jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换. 查看演示>& ...

  8. jquery幻灯片--渐变

    网站上为了设计,需要一些幻灯片效果,现在网站有很多插件可以使用. 想要成为以为牛逼的程序员,绝对不允许只会用别人的插件而已,不然你只能是“代码”的搬运工,而不敢做出自己的创新. 首先使用jquery做 ...

  9. Prezento – 轻量、简单的 jQuery 幻灯片插件

    Prezento 是一个超级简单的 jQuery 幻灯片插件.可以让你网页以新颖的交互方式呈现.另外,Prezento 支持响应式设计,配置项也很灵活,可以根据你需要的效果配置. 您可能感兴趣的相关文 ...

随机推荐

  1. SSH-Struts第一弹:ActionSupport类

    Action继承了com.opensymphony.xwork2.ActionSupport. package com.candy.login; import com.opensymphony.xwo ...

  2. DMZ

    DMZ是英文“demilitarized zone”的缩写,中文名称为“隔离区”,也称“非军事化区”.它是为了解决安装防火墙后外部网络的访问用户不能访问内部网络服务器的问题,而设立的一个非安全系统与安 ...

  3. 二分图------》Hopcroft-Karp算法 hdu2389

    Hopcroft-Karp算法 该算法由John.E.Hopcroft和Richard M.Karp于1973提出,故称Hopcroft-Karp算法. 原理 为了降低时间复杂度,可以在增广匹配集合M ...

  4. django-cms安装

    ubuntu:12.04 (32bit) djangocms 0.5.1 =========================== 首先,跟着这个做: https://github.com/divio/ ...

  5. [20160725]MyComparableTest

    知识点: 1.Collections的使用. 2.自定义类泛型的使用. 3.自定义类,toString();equals();hashCode()方法的重写. import java.util.*; ...

  6. Max Subsequence

    一个sequence,里面都是整数,求最长的subsequence的长度,使得这个subsquence的最大值和最小值相差不超过1. 比如[1,3,2,2,5,2,3,7]最长的subsequence ...

  7. DECO 一个REACT NAtive 开发IDE工具

    DECO 一个REACT NAtive 开发IDE工具. 目前只支持 OS,NO WINDOWS https://www.decosoftware.com/ 一个方便的快速 ERXPRESS 教程:h ...

  8. ACL

    http://man.chinaunix.net/linux/debian/debian_learning/ch01s04.html http://blog.csdn.net/xiangliangyu ...

  9. jenkins gitlab整合注意事项

    jenkins整合gitlab时,Source Code Management添加gitlab仓库路径无论怎么尝试都报如下两个异常: Failed to connect to repository : ...

  10. ACM/ICPC 之 DP-基因相似度(POJ1080-ZOJ1027)

    题意:两端基因片段,各有明确的碱基序列,现有一个碱基匹配的相似度数组,设计程序使得该相似度最大. //POJ1080-ZOJ1027 //题解:将s1碱基和s2碱基看做等长,添加一个碱基为'-',即每 ...