jquery图片切换插件

2013-12-16  来源:本站原创  分类:jquery  人气:6 

本文给大家分享的是一则使用jQuery实现图片切换的插件,效果非常不错,兼容性也很好,推荐给大家,有需要的小伙伴快来参考下吧。

/**

 * 图片切换插件

 * 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);

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

相关文章
  • jQuery图片切换插件jquery.cycle.js使用示例 2014-10-23

    Cycle供了非常好的功能来帮助大家更简单的使用插件的幻灯功能,下面是它的一个非常不错的示例,大家可以学习下 Cycle是一个很棒的jQuery图片切换插件,提供了非常好的功能来帮助大家更简单的使用插件的幻灯功能 下载cycle插件并引入,此时,注意把引入它的代码放在引入jQuery主文件之后. <head> <script type="text/javascript" src="js/jquery-1.8.0.min.js"></sc

  • jquery图片切换插件 2013-12-16

    本文给大家分享的是一则使用jQuery实现图片切换的插件,效果非常不错,兼容性也很好,推荐给大家,有需要的小伙伴快来参考下吧. /** * 图片切换插件 * 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'}); 容器必须

  • jQuery 图片切换插件(代码比较少) 2014-05-31

    jQuery 插件图片切换 第一次自已偿试写插件,需要的朋友可以参考下 // JavaScript Document ;(function($){ $.fn.extend({ "zj_ppt":function(value){ //默认参数定义 var $this = $(this); value = $.extend({ "time":2000, //间隔变化动画时间 "con":0, "sto":true, "c

  • jquery图片切换插件jquery.cycle.js参数详解 2014-09-09

    Cycle2 是一个流行已久的 jQuery Cycle 幻灯片插件的升级版,它支持响应式的界面,提供了多种参数可自定义设置.它内置了控制界面,同时也能显示图像加载进度,而且还提供了四种变换效果.对于想要打造完全个性化幻灯片的人来说,此插件是非常合适的. 插件功能特性: 支持图片加载进度 支持移动设备 自适应 自定义选项(这个应该是插件必须的) 支持 上一页.下一页.幻灯片标题.分页导航(1.2.3.4 或者 图片 或者按钮 都是可以的).覆盖层的控制 粗略看了下,升级后支持,部分之前就支持,应

  • jQuery图片切换插件 ImageSwitch 2010-08-31

    ImageSwitch 网站 : http://www.hieu.co.uk/blog/index.php/imageswitch/ ImageSwitch是一个易于使用的jQuery插件用于在多张图片之间切换时添加一些切换特效.这些特效包括:淡入淡出,卷入卷出,飞入飞出,Flip out等. 授权协议: 未知 开发语言: JavaScript 操作系统: 跨平台

  • 分享精心挑选的23款美轮美奂的jQuery 图片特效插件 2013-11-14

    jQuery是一个非常优秀的 JavaScript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,jQuery 最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入各种精美的图片展示效果 下面向大家分享精心挑选的23款优秀 jQuery 图片特效插件,带给你美轮美奂的图片展示效果. 01. 3D Image Slider 非常非常酷的 3D 图片滑动效果,有五种绚丽的效果演示. 在线演示 下载源码 02. Portfolio Image Navigator 精致的

  • 五个jQuery图片画廊插件 推荐 2014-02-13

    五个jQuery图片画廊插件,需要的朋友可以参考下. 1.Pikachoose ? lightweight Jquery Image Gallery plugin 查看Demo 效果还算不错,当然跟以前推荐的几个画廊插件还是有一些差距. 推荐指数:★★★ 2.Sliding Boxes and Captions with jQuery 查看Demo 此画廊有意思的地方在于图片滑动效果(貌似IE下无效,原因不明). 推荐指数:★★★ 3.Creating a polaroid photo view

  • 最佳6款用于移动网站开发的jQuery 图片滑块插件小结 2014-11-23

    随着智能手机的普及,越来越多的用户喜欢通过手机中浏览网页.今天这篇文章为大家推荐最佳6款用于移动应用的 jQuery 图片滑块插件,这些插件很好的处理了触屏事件,效果平滑,帮助你构建用户体验良好的移动网站 随着智能手机的普及,越来越多的用户喜欢通过手机中浏览网页.今天这篇文章为大家推荐最佳6款用于移动应用的 jQuery 图片滑块插件,这些插件很好的处理了触屏事件,效果平滑,帮助你构建用户体验良好的移动网站. PhotoSwipe PhotoSwipe 是一款免费的 jQuery 图片库插件,支

  • 最佳6款用于移动网站开发的 jQuery 图片滑块插件 2014-10-16

    随着智能手机的普及,越来越多的用户喜欢通过手机中浏览网页.今天这篇文章为大家推荐最佳6款用于移动应用的 jQuery 图片滑块插件,这些插件很好的处理了触屏事件,效果平滑,帮助你构建用户体验良好的移动网站. PhotoSwipe PhotoSwipe 是一款免费的 jQuery 图片库插件,支持iPhone, iPad, Android, Blackberry 等各种移动设备. Mobile Photo Album Mobile Photo Album 是一款非常易用的相册插件,帮助你在移动网站

  • 精心挑选:10款实用的 jQuery Tab 切换插件和教程 2014-07-09

    Tab 标签页也称为选项卡或者切换,是网站的常用功能,适合用于一组内容之间的切换显示.使用流行的 jQuery 库实现选项卡切换功能非常简单,虽然风格多种多样,但实现思路其实都是一样的.今天这篇文章精心挑选了10款非常实用的 jQuery Tab 切换插件推荐给大家,这些优秀的 jQuery 插件能够帮助你改进网站中的选项卡功能的用户体验. 1. Google Play's minimal tabs with jQuery 这个教程将教你如何使用 jQuery 和 CSS3 实现 Google

  • jquery图片切换实例分析 2015-03-10

    这篇文章主要介绍了jquery图片切换的方法,实例分析了jQuery实现页面元素与相应样式切换效果的使用相关技巧,设计jQuery中hide.fadeIn.css.setInterval等方法的使用,需要的朋友可以参考下 本文实例讲述了jquery图片切换实现方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xh

  • 15个款优秀的 jQuery 图片特效插件推荐 2015-04-04

    这篇文章向大家推荐15个最佳 jQuery 图片效果插件.jQuery是最流行的Javascript框架,使用简单灵活,同时还有许多成熟的插件可供选择 这篇文章向大家推荐15个最佳 jQuery 图片效果插件.jQuery是最流行的Javascript框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,jQuery 最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的图片效果. 01. Responsive Image Gallery 02. Image

  • 15个款优秀的jQuery图片特效插件推荐 2014-04-28

    这篇文章向大家推荐15个最佳 jQuery 图片效果插件.jQuery是最流行的Javascript框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,jQuery 最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的图片效果. 01. Responsive Image Gallery 02. Image Zoom Tour 03. Automatic Image Montage 04. 3D Image Slider 05. Shuffle Text E

  • 19个非常有用的jQuery图片滑动插件和教程 2014-06-09

    jQuery 是一个非常优秀的 Javascript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入精美的效果.今天这篇文章向大家分享19个非常有用的 jQuery 图片滑动插件和教程. Slides Smooth Div Scroll Create an Image Rotator with Description Animate Panning Slideshow with jQuery Create a S

  • 十个jQuery图片画廊插件推荐 2010-12-30

    jQuery的画廊插件可以将分组图像和多媒体资料转成类似Flash的图像或照片.当幻灯片已经成为网站的重要组成部分,jQuery的重要性不能被忽视.下面为你介绍了10个最有美感,创新性和创造性的jQuery图片画廊插件: 1.How to Create a Simple Slideshow using Mootools / JQuery 当我们想要在有限的屏幕空间展示很多内容,这要使用到幻灯片.幻灯片是最佳的可以展现大量的信息的方式.在这篇文章中我将展示使用MooTools / Jquery做出

  • 超棒片状过渡效果的jQuery图片幻灯插件 - jq-tiles 2012-11-13

    日期:2012-11-10 来源:GBin1.com 在线演示 本地下载 今天介绍一款拥有不同片状动画过渡效果的jQuery插件-jq-tiles,使用它能够帮助你生成基于CSS3的片状动画效果.同时支持自定义选项: 效果选择 x,y坐标片状数量选择 速度 其它 支持图片缩略图预览功能,并且拥有图片导航功能,最后针对每张图片还支持不同类型的回调方法,如果你需要一个高性能的动画幻灯,使用CSS3的jq-tiles肯定是一个不错的选择.当然,如果你还需要支持臭名远扬的老版本IE的话,可能会让你失望了

  • jQuery图片展示插件 Galleria 2008-09-19

    Galleria 网站 : http://galleria.io/ Galleria是一个采用jQuery开发的图片展示插件.它通过缩略图导航一张一张的显示大的图片.支持通过CSS设置整个相册的风格.能够按比例创建缩略图并剪切成适合在缩略图容器中显示的小图片.能够触一些事件,因此可以在图片加载时执行一些动作. 在线演示:http://galleria.aino.se/media/galleria/src/themes/classic/classic-demo.html 授权协议: MIT 开发语

  • jQuery图片显示插件 PrettyPhoto 2009-10-31

    PrettyPhoto 网站 : http://www.no-margin-for-errors.com/projects/prettyPhoto-jquery-lightbox-clone/ PrettyPhoto 是在 jQuery基础上完成的类似lightbox的无刷新图片显示插件,实际上它不仅能显示图片,还能显示许多的类型,比如在可能弹出的层窗口中加载一段视 频.一段Flash动画.一个已布局好的网页.一个框架页等等,功能还是挺多的,而且设计超精美,真不赖. 下载地址 授权协议: 未知

  • jQuery图片展示插件 AnythingSlider 2009-12-12

    AnythingSlider 网站 : https://css-tricks.com/anythingslider-jquery-plugin/ AnythingSlider 是一个 jQuery 用来显示一组图片的插件,如下图所示: 在线演示 授权协议: 未知 开发语言: JavaScript 操作系统: 跨平台

  • 33个优秀的 jQuery 图片展示插件分享 2014-02-12

    这篇文章收集了33个优秀的 jQuery 图片插件分享给大家. jQuery 是一个非常优秀的 JavaScript 框架,使用简单灵活,同时还有许多成熟的插件可供选择,其中最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些精美的效果,给访问者对网站留下非常好的印象 1. Foxibox 2. MobilySelect 3. MobilySlider 4. Diaporama 5. Flipping Book Image 6. Spherical Panorama Vi