关闭

JQuery插件第三十一个:按钮点击换图片效果

标签: jquery插件functionclassstylesheetjavascriptscroll
1911人阅读 评论(0) 收藏 举报
分类:
UL {
	BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 100%; BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; VERTICAL-ALIGN: baseline; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px; outline: 0
}
LI {
	BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 100%; BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; VERTICAL-ALIGN: baseline; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px; outline: 0
}
img{ border:0;}
.content-main {
	WIDTH: 676px; PADDING: 0px;FLOAT: left; POSITION: relative
}
#viewer 
{
    border:7px solid red;
    WIDTH: 676px;
    HEIGHT:280px;
    MARGIN: 0px; 
    PADDING: 0px; 
    POSITION: absolute; 
    Z-INDEX: 10; 
}
.panel {
	POSITION: relative
}
#prevBtn {
	LEFT: -19px;
	DISPLAY: block; Z-INDEX: 11; WIDTH: 39px; POSITION: absolute; TOP: 165px; HEIGHT: 39px
}
#nextBtn {
	RIGHT: -33px;
	DISPLAY: block; Z-INDEX: 11; WIDTH: 39px; POSITION: absolute; TOP: 165px; HEIGHT: 39px
}

.carousel 
{
	MARGIN-LEFT: 7px;
	CLEAR: left; 
	POSITION: relative;
	Z-INDEX: 6; 
	OVERFLOW: hidden; 
	WIDTH: 677px; 
	HEIGHT: 293px;
}
.carousel LI {
	FLOAT: left;
	Z-INDEX: 6; 
	OVERFLOW: hidden; 
	HEIGHT: 293px;
}
.carousel IMG {
	Z-INDEX: 1; 
	POSITION: relative;
	WIDTH: 677px;	
	HEIGHT: 293px;

}
.hoverNav {
	Z-INDEX: 9999; DISPLAY: none; POSITION: absolute; WIDTH: 172px;HEIGHT: 113px; TOP: 50px;
}
.hoverLeft {
	Z-INDEX: 9999; BACKGROUND: url(arrow-left-hover.png) no-repeat left top; LEFT: -30px;overflow:hidden;
}
.hoverRight {
	Z-INDEX: 9999; BACKGROUND: url(arrow-right-hover.png) no-repeat left top; RIGHT: -25px;overflow:hidden;
}
.hoverNav IMG {
	MARGIN: 15px 0px 0px 15px;
	 WIDTH: 142px;
	 HEIGHT: 74px;
}
A.text-replace {
	DISPLAY: block; OVERFLOW: hidden; TEXT-INDENT: -99999px
}
A.previous:hover {
	BACKGROUND: url(bg-all-previous-next-sprite-80x80.png) no-repeat 0px -41px
}
A.next:hover {
	BACKGROUND: url(bg-all-previous-next-sprite-80x80.png) no-repeat -41px -41px
}
A.previous {
	LEFT: -24px; 
	WIDTH: 39px; 
	POSITION: absolute; 
	TOP: 165px; 
	HEIGHT: 39px;
	BACKGROUND: url(bg-all-previous-next-sprite-80x80.png) no-repeat 0px 0px
}
A.next {
	RIGHT: -19px; 
	WIDTH: 39px; 
	POSITION: absolute; 
	TOP: 165px; 
	HEIGHT: 39px;
	BACKGROUND: url(bg-all-previous-next-sprite-80x80.png) no-repeat -41px 0px
}
HTM页面代码:
<div class="content-main">
    <a class="previous text-replace" id="prevBtn" href="#">previous</a> <a class="next text-replace"
        id="nextBtn" href="#">next</a>
    <div class="hoverNav hoverLeft">
    </div>
    <div class="hoverNav hoverRight">
    </div>
    <div id="viewer">
    </div>
    <div class="carousel"   >
        <ul class="slider"  >
            <li class="panel" id="panel-matthewhenry" rel="/photo/100_0781.jpg"><a href="">
                <img  src="/photo/100_0781.jpg" ></a>
            </li>
            <li class="panel" id="Li1" rel="/photo/100_0785.jpg"><a href="">
                <img  src="/photo/100_0785.jpg" ></a>
            </li>
            <li class="panel" id="Li2" rel="/photo/100_0791.jpg"><a href="">
                <img  src="/photo/100_0791.jpg" ></a>
            </li>
        </ul>
    </div>
</div>

<script type="text/javascript"   >
    jQuery.run = {
        box: null,
        pic: null,
        x: null,
        over: function() { clearInterval(jQuery.run.x); },
        main: function(a,b,c) {
            var pos=Math.abs(b);
            var vertical = (c == 1);
            if (!vertical){
                var scrollLeft=Math.abs(this.box.scrollLeft);
                if (this.pic.offsetWidth - this.box.scrollLeft <= 0) {
                    jQuery.hor.box.scrollLeft -= this.pic.offsetWidth;
                } else {
                    if(a>0){
                           if(scrollLeft<pos)
                           {
                                this.box.scrollLeft+=a;
                           }else if(scrollLeft>pos){
                                this.box.scrollLeft+=-1*(scrollLeft-pos);
                           }
                     }
                   if(a<0){
                           if(scrollLeft>pos)
                           {
                                this.box.scrollLeft +=a;
                           }else if(scrollLeft<pos){
                                this.box.scrollLeft +=-1*(scrollLeft-pos);
                           }
                   }
                }
            }else{
                var scrollTop=Math.abs(this.box.scrollTop);
                if( this.pic.offsetHeight- this.box.scrollTop<=0){
                    this.box.scrollTop-= this.pic.offsetHeight;
                }else{
                    if(a>0){
                           if(scrollTop<pos)
                           {
                                this.box.scrollTop+=a;
                           }else if(scrollTop>pos){
                                this.box.scrollTop+=-1*(scrollTop-pos);
                           }
                     }
                   if(a<0){
                           if(scrollTop>pos)
                           {
                                this.box.scrollTop +=a;
                           }else if(scrollTop<pos){
                                this.box.scrollTop +=-1*(scrollTop-pos);
                           }
                   }
                }
            }           
        },
        speed: 10,
        star: function(a,b,c) {  $.run.x = setInterval("jQuery.run.main(" + a + "," + b + "," + c + ")", $.run.speed);},
        init: function(options) {
            var defaults = {
                boxid: null
            }
            var o = $.extend(defaults, options);
            this.box = o.boxid[0];
            this.pic = $('>*', this.box)[0];
        }
    };
(function($) {
    $.fn.smallEasySlider = function(options) {
        // default configuration properties
        var defaults = {
            prevId: 'prevBtn',
            prevText: 'Previous',
            nextId: 'nextBtn',
            nextText: 'Next',
            orientation: 'vertical',         //  'vertical' is optional;
            speed: 1300,
            hover: true
        };

        var options = $.extend(defaults, options);

        return this.each(function() {
            obj = $(this);
            var s = (options.s > 0) ? options.s : $("li.panel", obj).length;
            var ts = s - 1;
            var t = 0;
            var p = 0;

            var w = obj.width();
            var h = obj.height();
            var vertical = (options.orientation == 'vertical');
            $("li", obj).css('float', 'left');
            if (!vertical){
                $("ul", obj).css('width', s * w);
            }else{
               $("ul", obj).css('height', s * h);
            }
            jQuery.run.init({boxid:obj,speed:options.speed});


            $("#" + options.prevId).attr("href", 'javascript:void(0);');
            $("#" + options.nextId).attr("href", 'javascript:void(0);');

            $("#" + options.nextId).click(function() {
                animate("next");
                setLocation();
            });

            $("#" + options.prevId).click(function() {
                animate("prev");
                setLocation();
            });

            if (options.hover) {
                if ($.browser.msie) {
                    $("#" + options.nextId).hover(function() {
                        $(".hoverRight").show();
                    },
					function() { $(".hoverRight").hide(); });
                    $("#" + options.prevId).hover(function() { $(".hoverLeft").show(); },
					function() { $(".hoverLeft").hide(); });
                }
                else {
                    $("#" + options.nextId).hover(function() { $(".hoverRight").fadeIn(); },
						function() { $(".hoverRight").fadeOut(); });

                    $("#" + options.prevId).hover(function() { $(".hoverLeft").fadeIn(); },
						function() { $(".hoverLeft").fadeOut(); });
                }
            }

            function animate(dir) {
                if (dir != undefined) {
                    if (dir == "next") {
                        t = (t >= ts) ? 0 : t + 1;
                    } else {
                        t = (t <= 0) ? ts : t - 1;
                    };
                }

                if (!vertical) {
                    p = (t * w * -1);
                    if (dir == "next") {
                        $.run.over();
                        $.run.star(30,p,0);
                    }
                    else{
                        $.run.over();
                        $.run.star(-30,p,0);
                    }                    
                } else {
                    p = (t * h * -1);
                    if (dir == "next") {
                        $.run.over();
                        $.run.star(14,p,1);
                    }
                    else{
                        $.run.over();
                        $.run.star(-14,p,1);
                    }
                }
            };


            function jump(i) {
                t = (i - 1);
                p = (t * w * -1);
                $("ul", obj).css({ marginLeft: p });
                setLocation();
            }

            function setLocation() {
                $(".pagination a").removeClass("active");
                $(".pagination li").removeClass("active");
                $(".pagination li:eq(" + t + ")").addClass("active");

                // setup hover 
                var left = t - 1;
                var right = t + 1;

                if (left < 0) { left = ts }
                if (right > ts) { right = 0 }

                var hoverSrc = $("li:eq(" + left + ")", obj).attr("rel");
                $(".hoverLeft").html('<img src="' + hoverSrc + '" />');
                hoverSrc = $("li:eq(" + right + ")", obj).attr("rel");
                $(".hoverRight").html('<img src="' + hoverSrc + '" />');
            }



            // initial call
            setLocation();

            // check the hash
            if (location.hash != "" && location.hash != "#") {
                var h = location.hash;
                var i = h.replace("#", "");
                jump(i);
            }
        });
    };
})(jQuery);
以上是插件代码。
function getImg(n){
    var pics=[];
    switch(n){
        case 1:
                pics=["1.jpg","2.jpg","5.jpg"];
                break;       
        case 2: pics=["3.jpg","4.jpg"];
                break;
        case 3: pics=["5.jpg","6.jpg"];
                break;
    }
    
    var htm="";
    for(var key in pics){
         htm+="<li class=\"panel\" id=\"panel-matthewhenry\" rel=\"/photo/{0}\"><a href=\"\">";
         htm+="<img src=\"/photo/{1}\" ></a>";
         htm+="</li>";
         htm=htm.replace("{0}",pics[key]).replace("{1}",pics[key]);
    }
    
    $(".slider").html(htm);
    $(".carousel").smallEasySlider({});
}
</script>
后台初始化调用:
    /// <summary>
    /// 放在调用页面头部
    /// </summary>
    public string Head {
        get {
            StringBuilder sb = new StringBuilder();
            sb.Append("<link media=\"screen, projection\" href=\"/Slider/combined.css\" type=\"text/css\" rel=\"stylesheet\">\n");
            sb.Append("<script type=\"text/javascript\">$(function(){$(\".carousel\").smallEasySlider({});});</script>");
            return sb.ToString();
        }
    }

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:188962次
    • 积分:2816
    • 等级:
    • 排名:第12707名
    • 原创:81篇
    • 转载:114篇
    • 译文:1篇
    • 评论:25条
    最新评论