`

jQuery的一个插件——d_imagechange

jQueryCSSChrome百度IE 
阅读更多
备注：由于不能转载，以下代码是从网站copy过来的
示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo-图片轮换-D.夏亦知非</title>
<script src="js/jquery-1.3.2.min.js"></script>
<script src="js/jquery.d.imagechange.min.js"></script>
<style>
body{margin:0;padding:0px;}
.title{height:25px;line-height:25px;background-color:#000;color:#FFF;margin:10px 0;padding-left:20px;font-family:"Verdana","宋体";font-size:12px;}
</style>
<script>

// 需要你写的数据
var data = [
        {title:'李彦宏',desc:'立刻加入我们,获取百度之星荣誉称号',src:'img/1.jpg',href:'http://www.baidu.com',target:'_blank'},
        {title:'马云',desc:'立刻加入我们,获取TOP大赛巨额奖项',src:'img/2.jpg'},
        {title:'路飞',desc:'立刻加入我们,寻找伟大航路的宝藏',src:'img/3.jpg'}
];
       
$(document).ready(function(){
        $('#pic1').d_imagechange({
                data:data,
                animateStyle:'o'//默认值'o',可以不写  
        });
       
        $('#pic2').d_imagechange({
                data:data,
                animateStyle:'x'
        });
       
        $('#pic3').d_imagechange({
                data:data,
                animateStyle:'y'
        });
       
        $('#pic4').d_imagechange({
                data:data,
                animateStyle:'show'
        });
       
        $('#pic5').d_imagechange({
                data:data,
                animateStyle:'show-x'
        });
        $('#pic6').d_imagechange({
                data:data,
                animateStyle:'show-y'
        });            
        $('#pic7').d_imagechange({
                data:data,
                animateStyle:'none'
        });    
});
</script>
</head>

<body>
<div class="title">Demo 1 默认效果:渐显 animateStyle:'o'</div>
<div id="pic1" style="width:300px;height:200px;margin-left:20px;">     
</div>
<div class="title">Demo 2 横向滚动效果 animateStyle:'x'</div>
<div id="pic2" style="width:300px;height:200px;margin-left:20px;">     
</div>
<div class="title">Demo 3 纵向滚动效果 animateStyle:'y'</div>
<div id="pic3" style="width:300px;height:200px;margin-left:20px;">     
</div>
<div class="title">Demo 4 原地收缩伸展 animateStyle:'show'</div>
<div id="pic4" style="width:300px;height:200px;margin-left:20px;">     
</div>
<div class="title">Demo 5 横向收缩伸展 animateStyle:'show-x'</div>
<div id="pic5" style="width:300px;height:200px;margin-left:20px;">     
</div>
<div class="title">Demo 6 纵向收缩伸展 animateStyle:'show-y'</div>
<div id="pic6" style="width:300px;height:200px;margin-left:20px;">     
</div>
<div class="title">Demo 7 无动画< animateStyle:'none'</div>
<div id="pic7" style="width:300px;height:200px;margin-left:20px;">     
</div>

</body>

</html>


插件：
/********************************************************************************************************
* D-ImageChange
*----------------------------------------------------------------------------------------------------
* @Desc 图片轮换插件
*----------------------------------------------------------------------------------------------------
* @Author D.夏亦知非
* @Email DeclanZhang@gmail.com
* @QQ 29540200
* @Blog http://onblur.iteye.com
* @Date 2009-10-19
* @Version 1.1
* @JQueryVersion 1.3.2
*
* @update v1.1 增加清空原始内容功能,以免页面加载完成之前显示大片空白
*                 v1.2 修正IE6每次从服务器读取背景图片的BUG
**/

(function($){

jQuery.fn.extend({
      
        d_imagechange:function(setting){
              
                // 修正IE6每次从服务器读取背景图片的BUG
                document.execCommand("BackgroundImageCache", false, true);

                var config = $.extend({
                        bg:true,                                                // 是否背景色
                        title:true,                                             // 是否有标题
                        desc:true,                                              // 是否有描述
                        btn:true,                                               // 是否显示按钮
                        repeat:'no-repeat',                             // 重复规则 'no-repeat' 'repeat-x' 'repeat-y' 'repeat'
                      
                        bgColor:'#000',                                 // 背景色
                        bgOpacity:.5,                                   // 背景透明度
                        bgHeight:40,                                    // 背景高
                      
                        titleSize:14,                                   // 标题文字大小
                        titleFont:'Verdana,宋体',         // 标题文本字体
                        titleColor:'#FFF',                              // 标题文本颜色
                        titleTop:4,                                             // 标题上边距
                        titleLeft:4,                                    // 标题左边距
                      
                        descSize:12,                                    // 描述文字大小
                        descFont:'Verdana,宋体',                  // 描述文本字体
                        descColor:'#FFF',                               // 描述文本颜色
                        descTop:2,                                              // 描述上边距
                        descLeft:4,                                             // 描述左边距
                      
                        btnColor:'#FFF',                                // 按钮颜色1
                        btnOpacity:.5,                                  // 未选中按钮透明度
                        btnFont:'Verdana',                              // 按钮文本字体
                        btnFontSize:12,                                 // 按钮文字大小(注意:Chrome有默认最小字号的限制)
                        btnFontColor:'#000',                    // 按钮文本颜色
                        btnText:true,                                   // 是否显示文本
                        btnWidth:15,                                    // 按钮宽
                        btnHeight:15,                                   // 按钮高
                        btnMargin:4,                                    // 按钮间距
                        btnTop:4,                                               // 按钮上边距
                      
                        playTime:2000,                                  // 轮换间隔时间,单位(毫秒)
                        animateTime:500,                                // 动画执行时间,单位(毫秒)
                        animateStyle:'o',                               // 动画效果:'o':渐显 'x':横向滚动 'y':纵向滚动 'show':原地收缩伸展 'show-x':横向收缩伸展 'show-y':纵向收缩伸展' none':无动画
                        width:300,                                              // 宽, 不设定则从DOM读取
                        height:200                                              // 高, 不设定则从DOM读取
                      
                },setting);
              
                return $(this).each(function(){
                        var _this = $(this);
                        var _w = config.width || _this.width();                 // 宽
                        var _h = config.height || _this.height();               // 高
                        var _n = config.data.length;                                    // 数目
                        var _i = 0;                                                                             // 当前显示的item序号
                      
                        _this.empty()
                                 .css('overflow','hidden')
                                 .width(_w)
                                 .height(_h);
                      
                        // 半透明背景
                        if(config.bg){
                        $('<div />').appendTo(_this)
                                                .width(_w)
                                                .height(config.bgHeight)
                                                .css('background-color',config.bgColor)
                                                .css('opacity',config.bgOpacity)
                                                .css('position','absolute')
                                                .css('marginTop',_h-config.bgHeight)
                                                .css('zIndex',3333);
                        }
                      
                        // 文字区
                        var _textArea =
                        $('<div />').appendTo(_this)
                                                .width(_w)
                                                .height(config.bgHeight)
                                                .css('position','absolute')
                                                .css('marginTop',_h-config.bgHeight)
                                                .css('zIndex',6666);
                        // 按钮区
                        var _btnArea =
                        $('<div />').appendTo(_this)
                                                .width(_w)
                                                .height(config.bgHeight)
                                                .css('position','absolute')
                                                .css('marginTop',_h-config.bgHeight)
                                                .css('marginLeft',_w-(config.btnWidth+config.btnMargin)*_n)
                                                .css('zIndex',9999)
                                                .css('display',config.btn?'block':'none');
                      
                        // 插入空div修正IE的绝对定位BUG
                        $('<div />').appendTo(_this);
                      
                        // 图片区
                        var _imgArea =
                        $('<div />').appendTo(_this)
                                                .width('x,show-x'.indexOf(config.animateStyle)!=-1?_w*_n:_w)
                                                .height('y,show-y'.indexOf(config.animateStyle)!=-1?_h*_n:_h);                 
      
                        // 初始化图片 文字 按钮
                        $.each(config.data,function(i,n){
                                $('<a />').appendTo(_imgArea)
                                                  .width(_w)
                                                  .height(_h)
                                                  .attr('href',n.href?n.href:'')
                                                  .attr('target',n.target?n.target:'')
                                                  .css('display','block')
                                                  .css('background-image','url('+n.src+')')
                                                  .css('background-repeat',config.repeat)
                                                  .css('display','block')
                                                  .css('float','x,show-x'.indexOf(config.animateStyle)!=-1?'left':'');
                                                
                                if(config.title){
                                $('<b />').appendTo(_textArea)
                                                  .html(n.title?n.title:'')
                                                  .css('display',i==0?'block':'none')
                                                  .css('fontSize',config.titleSize)
                                                  .css('fontFamily',config.titleFont)
                                                  .css('color',config.titleColor)
                                                  .css('marginTop',config.titleTop)
                                                  .css('marginLeft',config.titleLeft);
                                }
                              
                                if(config.desc){
                                $('<p />').appendTo(_textArea)
                                                  .html(n.desc?n.desc:'')
                                                  .css('display',i==0?'block':'none')
                                                  .css('fontSize',config.descSize)
                                                  .css('fontFamily',config.descFont)
                                                  .css('color',config.descColor)
                                                  .css('marginTop',config.descTop)
                                                  .css('marginLeft',config.descLeft);
                                }
                                
                                                
                                $('<a />').appendTo(_btnArea)
                                                  .width(config.btnWidth)
                                                  .height(config.btnHeight)
                                                  .html(config.btnText?i+1:'')
                                                  .css('fontSize',config.btnFontSize)
                                                  .css('fontFamily',config.btnFont)
                                                  .css('textAlign','center')
                                                  .css('display','block')
                                                  .css('float','left')
                                                  .css('overflow','hidden')
                                                  .css('marginTop',config.btnTop)
                                                  .css('marginRight',config.btnMargin)
                                                  .css('background-color',config.btnColor)
                                                  .css('opacity',i==0?1:config.btnOpacity)
                                                  .css('color',config.btnFontColor)
                                                  .css('cursor','pointer')

                        });
                      
                        // 保存所有元素集合的引用,方便在事件中使用
                        var _bs = _btnArea.children('a');
                        var _ts = _textArea.children('b');
                        var _ds = _textArea.children('p');
                        var _is = _imgArea.children('a');

                        // 针对不同的动画效果的附加设置, 主要是block的问题, 若在初始化时设置block:none会造成之后无block效果
                        if('o,show,none'.indexOf(config.animateStyle)!=-1){
                                _is.not(':first').hide();
                                _is.css('position','absolute');
                        }
                      
                        // 添加按钮事件
                        _bs.click(function(){
                                var ii = _bs.index(this);
                                if(ii==_i){return;}
                              
                                _ts.eq(_i).css('display','none');
                                _ts.eq(ii).css('display','block');
                                _ds.eq(_i).css('display','none');
                                _ds.eq(ii).css('display','block');
                                _bs.eq(_i).css('opacity',config.bgOpacity);
                                _bs.eq(ii).css('opacity',1)
                              
                                switch(config.animateStyle){
                                case 'o' :
                                        _is.eq(_i).fadeOut(config.animateTime);
                                        _is.eq(ii).fadeIn(config.animateTime);
                                        break;
                                case 'x' :
                                        _imgArea.animate({marginLeft:-ii*_w},config.animateTime);
                                        break;
                                case 'y' :
                                        _imgArea.animate({marginTop:-ii*_h},config.animateTime);
                                        break;
                                case 'show' :
                                case 'show-x' :
                                case 'show-y' :
                                        _is.eq(_i).hide(config.animateTime);
                                        _is.eq(ii).show(config.animateTime);
                                        break;                         
                                case 'none' :
                                        _is.eq(_i).hide();
                                        _is.eq(ii).show();
                                        break;                         
                                }
                                _i = ii;
                        });


                        // 添加轮换任务
                        var _play = setInterval(play,config.playTime);
                      
                        function play(){
                                _bs.eq((_i+1)%_n).click()
                        }             
                        // 鼠标进入事件
                        _this.mouseover(function(){
                                clearInterval(_play);
                        });
                                              
                        // 鼠标离开事件
                        _this.mouseout(function(){
                                _play = setInterval(play,config.playTime);
                        });
                });
        }
});

})(jQuery);

分享到：
| 了解值传递和引用传递
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery.exif_javascript_exif_jquery_源码.zip

    特别是对于图像处理，jQuery的一个强大插件——jQuery.exif.js，允许我们获取并处理图像的Exif元数据。本篇文章将深入探讨jQuery.exif.js的工作原理、Exif数据的含义以及如何在实际项目中应用这一技术。 首先，理解...

    jQuery多图片批量上传插件

    同时，为了提高用户体验，可以使用`FormData`对象存储文件数据，这样可以在一个请求中发送多个文件： ```javascript var formData = new FormData(); $.each(files, function(i, file) { formData.append('images'...

    jQuery图片拼图插件Image jigsaw特效代码

    今天我们将探讨一个基于jQuery的轻量级插件——Image jigsaw，它能将任何图片转化为有趣的拼图游戏。 **1. 插件介绍** Image jigsaw是专门为jQuery设计的一款仅有3KB大小的高效插件。它允许开发者快速地将静态图片...

    asp.net结合jquery裁剪图片

    在实现图片裁剪功能时，我们通常会借助jQuery的一个插件——JQuery Cropper。这个插件提供了直观的拖动选择区域，让用户可以自由地裁剪图片。以下是使用该插件的基本步骤： 1. **引入依赖**：在HTML页面中，我们...

    JQuery经典的fouce.swf特效

    **jQuery焦点图插件——fouce.swf特效详解** 在网页设计中，吸引用户注意力的交互元素至关重要。其中，焦点图是一种常见的展示手段，能够以动态的方式展示多张图片或内容，提高用户体验。"JQuery经典的fouce.swf...

    jquery-1.7.2

    jQuery，这个JavaScript库，自2006年发布以来，已经成为了Web开发领域中的一个重要工具。它的出现极大地简化了JavaScript的DOM操作，事件处理，动画制作，以及Ajax交互，使得前端开发者能够更高效地构建动态和交互性...

    bannerscroller:jQuery插件滚动横幅

    **jQuery插件——bannerScroller详解** 在网页设计中，滚动横幅是一种常见的元素，用于展示广告、宣传信息或吸引用户注意。jQuery作为一款强大的JavaScript库，提供了丰富的API和插件，使得创建动态横幅变得...

    js_php_upload:jQuery上传助手

    jQuery作为一个强大的JavaScript库，为前端交互提供了丰富的API和便利的语法，使得文件上传变得更加简单。 ### 一、jQuery上传基础 1. **事件绑定**：jQuery通过`.on()`方法可以方便地绑定各种事件，如`change`、`...

    网页图片放大效果

    在本文中，我们将深入探讨一个优秀的JavaScript库——PhotoSwipe，它为实现这一功能提供了高效且易于集成的解决方案。 PhotoSwipe是一个轻量级、高性能的图片画廊插件，适用于移动设备和桌面浏览器。它的核心特性...

Magicbox
Global site tag (gtag.js) - Google Analytics