前言
图片滚动效果相信对大家来说都不陌生,烂大街的效果图如下所示,js 实现代码很短,不过如果想做的话,必须掌握 jquery、IIFE、setInterval 等基础以及 $.fn 用法:
jquery 中 $.fn 用法
是 jquery 的命名空间, 如果对 jquery 源码有过学习,就不难发现源码中有如下代码:
- $.fn
- jquery.fn=jquery.prototype={
- init:function(selector,context){
- /*
- *code
- */
- }
- }
所以说
也就是
- jquery.fn
的简写。我们的源码调用的构造函数
- jquery.prototype
实例实际是
- jquery()
的实例。
- jquery.fn.init()
代码如下:
- jQuery = function(selector, context) {
- //jqeruy内部使用new创建返回另一个构造函数实力是为了省去调用jquery时前面的new,并在后面定义了别名$;
- //构造函数jquery()调用的是构造函数jQuery.fn.init()的实例
- return new jQuery.fn.init(selector, context);
- },
- /*code*/
之后后续代码有执行了
,用构造函数 jquery 的原型对象覆盖
- jquery.fn.init.prototype=jquery.fn
的原型对象,使得
- jquery.fn.init()
实例也能访问到
- jquery.fn.init
的原型方法和属性。
- jquery()
开发插件的方法:用
扩展 jquery 生成新的方法。
- $.fn
1、可以使用
扩展 jquery 类本身,为类添加新的方法。
- jquery.extend(object)
2、用
给 jquery 对象添加方法。
- jquery.fn.extend(object)
下面用
扩展 jquery 类, 添加类方法:
- jquery.extend(object)
- $.extent({
- add: function(a,b){
- return a+b;
- }
- })
以后就可以直接使用
- $.add(1,2);//3
下面用
对
- jquery.fn.extend(object)
扩展一个方法。
- jquery.prototype
- $.fn.extend({
- [函数名]:fucntion(){
- /*code*/
- }
- });
以后可以直接使用
函数名 ()。
- $("div").
使用 jquery 中的 $.fn 封装一个图片滚动插件
这是一个使用到烂大街的一个插件了,不用说也知道是什么。不过具体是怎么实现的,继续往下看。这个插件最主要的部分也就是 js 的实现,html 和 CSS 很简单,不赘述。如果下面一些知识点已经熟悉,可以选择性跳过。
setInterval()
可以按指定时间不停的调用函数,直到调用 clearInterval 或者关闭窗口。
- setInterval()
- setInterval(fucntion() {
- /*code*/
- },
- [time]) clearInterval(val_of_seInterval) //参数为setInterval的返回值
所以当我们制作图片滚动时,当鼠标指针在图片上时,要停止图片滚动,这里设置很简单,只要添加一个
事件即可;
- on('mouseup,mouseover',fucntion(){})
具体实现代码如下:
- var time=setInterval(picTime,par.time);
- /*
- *code
- */
- $(this).on('mouseup,mouseover',fucntion(){
- clearInterval(time);
- })
保证图片能够一直循环滚动
在设计时,我们肯定不想图片滚动完
张就没了。所以要设置一个哨兵 index。
- li.length
- var index=0;
- fucntion picTime(){
- index++;
- if(index=li.length){
- index=0;
- }
- showpicture(index);
- }
相同的在点击上一张,下一张图片时,我们也要设置一个哨兵,让其能够一直循环下去。
IIFE
你肯定想要当插件在定义调用完,加载浏览器时,这个插件效果可以立即呈现出来。那就要用到 IIFE 来构造这个插件,从来达到快速加载,不受其他代码干扰的作用。由于 js 中,在括号中进行函数声明无效,所以被括号包起来的函数称之为函数表达式。
IIFE 的两种形式如下:当圆括号出现在匿名函数的末尾想要调用函数时,它会默认将函数当成是函数声明。当圆括号包裹函数时,它会默认将函数作为表达式去解析,而不是函数声明。
- (function(){}());
- (function(){})();
下面先来用牛客的一道题目来理解一下 IIFE:
- var myObject = {
- foo: "bar",
- func: function() {
- var self = this;
- console.log(this.foo);
- console.log(self.foo);
- (function() {
- console.log(this.foo);
- console.log(self.foo);
- }());
- }};
- myObject.func();
因为 this 指代的是 myObject 对象,所以第一个肯定输出 bar,而 self 是 this 的变量,等于是 this,所以第二个输出的还是 bar,下面出现的就是我们上文定义的第一种 IIFE 形式,此时必须立即执行匿名函数,它的 this 指向的是 window,所以输出 undefined, 最后的 self 在自己的块级作用域没有定义,所以向上找到父级作用域的 self,因此第四个输出的还是 bar。
低配版图片特效 js 代码
很多都加了注释:如果 jquery、js 上文的知识掌握扎实,肯定不是很难。
- //$()调用jquery对象 ,IIFE
- $(function() {
- $.fn.ScrollPic = function(params) {
- //
- return this.each(function() {
- var defaults = {
- ele: '.slider',
- //切换对象
- Time: '2000',
- //自动切换时间
- speed: '1000',
- //图片切换速度
- scroll: true,
- //是否滚动图片,虽然肯定是让它滚动的,但是我们还是设置一个意思一下。
- arrow: false,
- //是否设置箭头
- number: true //是否添加右下角数字
- };
- //定义默认参数,其中若在html页面设置了param是,这里的params会替换defaults
- var par = $.extend({},
- defaults, params);
- var scrollList = $(this).find('ul'); //找到ul标签元素
- var listLi = $(this).find('li'); //找到li标签元素
- var index = 0;
- var pWidth = $(this).width();
- var pHeight = $(this).height();
- var len = $(this).find("li").length; //<li>标签数量
- //设置li标签和img的宽、高
- listLi.css({
- "width": pWidth,
- "height": pHeight
- });
- listLi.find('img').css({
- "width": pWidth,
- "height": pHeight
- });
- //设置ul标签的宽值为li的len倍/overflow:hidden
- scrollList.css("width", pWidth * len);
- //图片循环滚动的关键所在
- function picTimer() {
- index++;
- if (index == len) {
- index = 0;
- }
- showPics(index);
- }
- //自动切换函数
- if (par.scroll) {
- var time = setInterval(picTimer, par.Time);
- } else {
- $(".page-btn").hide();
- }
- function showPics(index) {
- var nowLeft = -index * pWidth;
- //添加向左移动的特效
- $(this).find(scrollList).animate({
- "left": nowLeft
- },
- par.speed);
- //找到与index相等的那个按钮,添加类名current,并将每个同胞元素移除类名current
- $(this).find(paging).eq(index).addClass('current').siblings().removeClass('current');
- }
- //鼠标经过数字按钮的效果
- if (par.number) {
- $(this).append('<div class="page-btn"></div>');
- for (i = 1; i <= len; i++) {
- $(this).find('.page-btn').append('<span>' + i + '</span>')
- }
- var paging = $(this).find(".page-btn span");
- paging.eq(index).addClass('current');
- $(this).find(paging).on('mouseup mouseover',
- function(e) {
- e.preventDefault();
- //获取按钮之间的相对位置,注意这里的$(this)。
- index = $('div').find(paging).index($(this));
- showPics(index)
- });
- }
- //上一张,下一张效果
- if (par.arrow) {
- $(this).append('<span class="leftarrow"></span><span class="rightarrow"></span>') var prev = $(this).find('span.leftarrow');
- var next = $(this).find('span.rightarrow');
- prev.on('click',
- function(e) {
- e.preventDefault();
- index -= 1;
- if (index == -1) {
- index = len - 1;
- }
- showPics(index);
- }); //上一页
- next.on('click',
- function(e) {
- e.preventDefault();
- index += 1;
- if (index == len) {
- index = 0;
- }
- showPics(index);
- });
- }
- //停止图片的滚动
- $(this).on('moveseup mouseover',
- function(e) {
- clearInterval(time);
- });
- //清除计时器
- $(this).on('mouseleave',
- function(e) {
- if (par.scroll) {
- time = setInterval(picTimer, par.Time);
- } else {
- clearInterval(time);
- $(this).find('$(".page-btn")').hide()
- }
- });
- })
- }
- });
下面是完整的 html、css+js 代码链接。
完整代码,图片自加
本地下载:点击这里
总结
来源: http://www.jb51.net/article/111751.htm