jQuery插件之图片滑动1

拜读了两位高手的大作，我也揣摩着实践一下，也为以后减少一点工作量

jQuery实例：图片展示效果

JavaScript 图片滑动展示效果

 

插件代码( 本人技术、天赋、时间有限JavaScript 图片滑动展示效果搞不来，此代码等于是封装了jQuery实例：图片展示效果)

 

$.fn.ImgsTurn = function(opts) {
            ///111111111111111111111111111111111111111111111111111
            ///定义默认的样式。
            var defaultParams = {
                divCss: {//最外面的div的样式
                    border: "solid 1px #C5E88E",
                    overflow: "hidden", /**//*图片超出DIV的部分不显示*/
                    width: "580",
                    height: "169",
                    background: "#C5E88E",
                    position: "relative"
                },
                PhotoCss: {//图片的css
                    position: "absolute",
                    top: "0px",
                    width: "490",
                    height: "169"
                },
                spanCss: {//下面注释栏的css
                    padding: "5px 0px 0px 5px",
                    width: "490",
                    height: "30",
                    position: "absolute",
                    left: "0px",
                    /*bottom: "-32", *//*介绍内容开始的时候不显示*/
                    background: "black",
                    opacity: 0.5,
                    "text-overflow": "ellipsis",
                    cursor: "pointer",
                    color: "white",
                    "overflow": "hidden",
                    "white-space": "nowrap"

                }
            };
            ///22222222222222222222222222222222222222222222
            ///合并参数
            var ps = {
                divH: defaultParams.divCss.height, //主div的高
                divW: defaultParams.divCss.width, //主div的宽
                divPhotoW: defaultParams.PhotoCss.width, //图片的宽(图片的高默认和主div的一样高, 宽必须小于主div)
                photosSrc: null,
                spanText: "",
                spanHref: "#"
                //这三个参数均为数组,图片的src, 提示文字,提示文字的链接
            }
            ps = $.extend(ps, opts || {});

            defaultParams.divCss.height = ps.divH;
            defaultParams.divCss.width = ps.divW;
            defaultParams.PhotoCss.width = ps.divPhotoW;
            defaultParams.spanCss.width = ps.divPhotoW;
            defaultParams.spanCss.top = parseFloat(ps.divH) - 5;

            ///33333333333333333333333333333333333333333333
            ///构造所有的html
            return $(this.get(0)).each(function() {//只选择第一个
                var me = $(this);
                me.css(defaultParams.divCss); //应用主div的css

                $.each(ps.photosSrc, function(i, j) {
                    //循环src数组, 循环构造格式为
                    /*
                    <div>
                    <img>
                    <span>
                    </div>
                    的显示格式。
                    然后添加至主div
                    */
                    var divShow = document.createElement("div");
                    $(divShow).css(defaultParams.PhotoCss);

                    var photo = document.createElement("img");
                    $(photo).css({ "width": ps.divPhotoW, "height": ps.divH });
                    photo.setAttribute("src", j);

                    var span = document.createElement("span");
                    $(span).css(defaultParams.spanCss);

                    span.innerHTML = "<a style='color:white' target='_blank' href='" + ps.spanHref[i] + "'>" + ps.spanText[i] + "</a>";

                    divShow.appendChild(photo);
                    divShow.appendChild(span);
                    me.append(divShow);
                });

                ///444444444444444444444444444444444444444
                ///绑定方法
                var minWidth = (ps.divW - ps.divPhotoW) / (ps.photosSrc.length - 1); //鼠标停留在某图片上的时候其他图片的最小显示宽度
                var avgWidth = ps.divW / ps.photosSrc.length; //鼠标不在任何图片上的每张图的平均显示宽度
                $("div", me).each(function(i) {
                    var hoverObj = this;
                    $(this).css({ "z-index": i, left: avgWidth * i }).hover(function() {//定义div的z-index以及left,并绑定hover方法
                        
                        $("div", me).each(function(j) {
                            if (j < i && j > 0)
                                $(this).stop().animate({ left: minWidth * j }, "slow");
                            if (j > i)
                                $(this).stop().animate({ left: parseInt((minWidth * (j - 1)) + parseInt(ps.divPhotoW)) }, "slow");
                            if (j == i)
                                $(this).stop().animate({ left: minWidth * j }, "slow");
                        });
                        var jquerySpan = $("span", hoverObj);
                        jquerySpan.stop().animate({ top: (parseFloat(jquerySpan.css("top")) - parseFloat(jquerySpan.css("height"))) }, "slow");
                    },
                    function() {

                        $("div", me).each(function(j) {
                            $(this).stop().animate({ left: avgWidth * j }, "slow");
                        });
                        var jquerySpan = $("span", hoverObj);
                        jquerySpan.stop().animate({ top: (parseFloat(me.css("height"))-5) }, "slow");

                    }
                    );

                });
                ///原理就是 鼠标移上去,  该图片和它前面的图片的left都为minWidth*(图片在图片数组中的索引), 后面的都为minWidth*(图片在图片数组中的索引)+图片的宽度.
                ///动画就是一些图片向前走，一些图片向后走，结果把鼠标所在的图片给“暴露”出来了。
            });
        }

 

调用

window.onload = function() {
            var srcs = new Array;
            var texts = new Array;
            var hrefs = new Array;
            for (var i = 1; i <= 5; i++) {
                srcs.push("p" + i + ".jpg");
                texts.push("显示。。。显示。。。显示。。。显示。。。显示。。。显示。。。");
                hrefs.push("http://www.baidu.com");
            }
            $("#div_").ImgsTurn({

//                divW: 400,
//                divH: 300,
//                divPhotoW:200,             
                photosSrc:srcs,
                spanText: texts,
                spanHref:hrefs
            });
        }

效果

http://jianjialin.zui9.cn/Jquery学习/图片切换/集成picTurn.htm

 

 

 

每天一控件，争取做高手