jquery图片切换插件


Posted in Javascript onMarch 16, 2015
/**

 * 图片切换插件

 * Dependence jquery-1.7.2.min.js

 **/

(function ($) {

  //调用方式 $('#silder').imgSilder({s_width:564, s_height:293, is_showTit:true, s_times:3000,css_link:'css/style.css'});  容器必须加入 id silder_list or class silder_list

  /*参考结构

    <div class="silder" id="silder">

        <ul class="silder_list" id="silder_list">

            <li>

                <img src="css/img/1.jpg" border="0" alt="刘淇同志参观北京市志愿者之家">

            </li>

            <li>

                <img src="css/img/2.jpg" border="0" alt="刘淇同志与志愿者合影">

            </li>

            <li>

                <img src="css/img/3.jpg" border="0" alt="刘淇同志到北京大学人民医院调研">

            </li>

            <li>

                <img src="css/img/4.jpg" border="0" alt="2013中国志愿服务国际交流大会在京举行">

            </li>                    

        </ul>

    </div>

  */

  $.fn.silderDefaults = { //默认参数

    s_width:500, //容器宽度

    s_height:500, //容器高度

    is_showTit:true, // 是否显示图片标题 false :不显示,true :显示

    s_times:3000, //设置滚动时间

    css_link:'css/style.css'

  };

  $.extendSilder = function (obj,opt) { //obj 元素对象,opt 参数对象

    var g = {  //公共方法, 外部可调用

      //初始化

        init: function () {

            var wh ={width:opt.s_width,height:opt.s_height};

            var pagesize=0; //页码

            var silderList = $('#silder_list',g.obj);

            var silderList_li = $('#silder_list li',g.obj);

            g.LoadCSS(opt.css_link); //样式文件导入

            g.obj.css(wh); silderList.css(wh); silderList_li.find('img').css(wh); //设置宽高属性

            var currHtml = ""; //加入播放页码 及文字描述

            if(opt.is_showTit){ //判断是否显示标题

                currHtml += "<div class='silder_desc' id='silder_desc'></div>";

            }

            img_size = silderList_li.size() ;//图片个数

            currHtml += "<ul class='silder_page' id='silder_page'>";//分页码代码注入

            for(var i=0; i < img_size; i++){

                currHtml += "<li>"+ parseInt((1 + i),10) +"</li>";

            }

            currHtml +="</ul>";

            silderList_li.eq(0).show().siblings().hide(); //初始化隐藏其他图片

            g.obj.append(currHtml);//注入分页码

            var silderPage = $('#silder_page',g.obj);

            var silderPage_li =$('#silder_page li',g.obj);

            silderPage_li.eq(0).addClass('current');

            if(opt.is_showTit){ //初始化图片描述

                $('#silder_desc').text(silderList_li.eq(0).find('img').attr('alt'));

            }

            silderPage_li.on('click',function(){

                pagesize = $(this).index();

                silderList_li.eq(pagesize).fadeIn(1000).siblings().fadeOut(100);

                $(this).addClass('current').siblings().removeClass('current');

                if(opt.is_showTit){

                    $('#silder_desc').text(silderList_li.eq(pagesize).find('img').attr('alt'));

                }

            });

            var t;

            silderList.hover(function(){window.clearInterval(t); return;},function(){ t = window.setInterval(function(){

                if(pagesize < img_size && pagesize >= 0)

                {

                    silderList_li.eq(pagesize).fadeIn(1000).siblings().fadeOut(100);

                    silderPage_li.eq(pagesize).addClass('current').siblings().removeClass('current');

                    if(opt.is_showTit){

                        $('#silder_desc').text(silderList_li.eq(pagesize).find('img').attr('alt'));

                    }

                    pagesize++;

                    if(pagesize >= img_size){

                        pagesize = 0;

                    }

                }

            },opt.s_times);}).trigger("mouseout"); //悬浮时 停止自动动画,trigger 起默认触发作用

        },

          LoadCSS:function(url){ //新建css

            var s = document.createElement("LINK");

                s.rel = "stylesheet";

                s.type = "text/css";

                s.href = url;

                document.getElementsByTagName("HEAD")[0].appendChild(s);

          }

    };

    g.obj = $(obj);

    g.init();

    return g;

  }

  $.fn.imgSilder = function (options) {

    if (this.length == 0) return; //判断对象是否存在

    this.each(function () {

      if (this.usedSilder) return;

      var opt = $.extend({}, $.fn.silderDefaults, options); //合并已赋值参数

      this.usedSilder = $.extendSilder(this, opt);

    });

  }

})(jQuery);

以上就是本文给大家分享的代码的全部内容了,希望大家能够喜欢

Javascript 相关文章推荐
js 绑定带参数的事件以及手动触发事件
Apr 27 Javascript
jQuery 无限级菜单的简单实例
Feb 21 Javascript
JavaScript实现简单的二级导航菜单实例
Apr 15 Javascript
javascript实现行拖动的方法
May 27 Javascript
JS验证邮件地址格式方法小结
Dec 01 Javascript
JavaScript事件类型中UI事件详解
Jan 14 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
Mar 16 Javascript
JavaScript头像上传插件源码分享
Mar 29 Javascript
BOM系列第二篇之定时器requestAnimationFrame
Aug 17 Javascript
jQuery实现列表的增加和删除功能
Jun 14 jQuery
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
javascript实现函数柯里化与反柯里化过程解析
Oct 08 Javascript
JavaScript中的方法重载实例
Mar 16 #Javascript
jquery中attr和prop的区别分析
Mar 16 #Javascript
JavaScript中扩展Array contains方法实例
Aug 23 #Javascript
JavaScript中消除闭包的一般方法介绍
Mar 16 #Javascript
jQuery实现的支持IE的html滑动条
Mar 16 #Javascript
JavaScript计算两个日期时间段内日期的方法
Mar 16 #Javascript
nw.js实现类似微信的聊天软件
Mar 16 #Javascript
You might like
全国FM电台频率大全 - 31 新疆维吾尔族自治区
2020/03/11 无线电
常见的PHP五种设计模式小结
2011/03/23 PHP
hadoop常见错误以及处理方法详解
2013/06/19 PHP
更改localhost为其他名字的方法
2014/02/10 PHP
thinkphp缓存技术详解
2014/12/09 PHP
Zend Framework实现多文件上传功能实例
2016/03/21 PHP
Apache站点配置SSL强制跳转443
2021/03/09 Servers
JS 模态对话框和非模态对话框操作技巧汇总
2013/04/15 Javascript
JavaScript定义变量和变量优先级问题探讨
2014/10/11 Javascript
原生js实现自由拖拽弹窗代码demo
2016/06/29 Javascript
微信小程序开发入门基础教程
2017/04/19 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
2017/08/31 Javascript
vue 的keep-alive缓存功能的实现
2018/03/22 Javascript
微信小程序实现的日期午别医生排班表功能示例
2019/01/09 Javascript
python解析文件示例
2014/01/23 Python
tornado捕获和处理404错误的方法
2014/02/26 Python
Python字典实现简单的三级菜单(实例讲解)
2017/07/31 Python
Python使用numpy产生正态分布随机数的向量或矩阵操作示例
2018/08/22 Python
pyqt5使用按钮进行界面的跳转方法
2019/06/19 Python
Django中自定义admin Xadmin的实现代码
2019/08/09 Python
使用Python脚本zabbix自定义key监控oracle连接状态
2019/08/28 Python
浅谈Python_Openpyxl使用(最全总结)
2019/09/05 Python
python调用Matplotlib绘制分布点图
2019/10/18 Python
tensorflow 实现自定义layer并添加到计算图中
2020/02/04 Python
Tensorflow 多线程设置方式
2020/02/06 Python
使用Python pip怎么升级pip
2020/08/11 Python
Python连接mysql方法及常用参数
2020/09/01 Python
Python爬虫设置Cookie解决网站拦截并爬取蚂蚁短租的问题
2021/02/22 Python
分享全球十款超强HTML5开发工具
2014/05/14 HTML / CSS
web字体加载方案优化小结
2019/11/29 HTML / CSS
SEPHORA丝芙兰德国官方购物网站:化妆品、护肤品和香水
2020/01/21 全球购物
酒店副总经理岗位职责范本
2014/02/04 职场文书
社区维稳工作方案
2014/06/06 职场文书
教师查摆问题自查报告
2014/10/11 职场文书
2014年保洁工作总结
2014/11/24 职场文书
python迷宫问题深度优先遍历实例
2021/06/20 Python