jquery旋转木马与jquery bgstretcher

时间:2012-09-03 18:00:19

标签: php jquery carousel

非常感谢你们的帮助,直到现在!你真的很棒! 但我有另一个问题! 我正在使用jq轮播和一些名为bgStretcher的第三方插件。 (我稍后会插入其代码)。我的索引文件通过javascript / php脚本获取其href图像,其中图像是从正确的路径获得的,并且按大小减小并作为html传递到正确位置的索引。所以这里有麻烦:正确读出图像,生成缩略图,传递的html代码有效,旋转木马显示生成的拇指,但bgStretch功能不起作用(为了拉伸从旋转木马到背景的点击图像)! bgStretch仅使用书面普通html(

  • ),如下所示。我不明白!你能看一下这些文件吗: index.html的

     <li id="page_photo" class="nobg">
                    <a href = "#" id="uploadMore">Polterei Eva</a>
                    <a href = "#" id="uploadMore1">Polterei Paul</a>
                    <a href = "#" id="uploadMore2">Hochzeit</a>
                    <div id="pagin">
                        <ul>
                          <li class="active"><a href="images/bg_pic1.jpg"><img src="images/page3_pic1.jpg" alt></a></li>         
                        <!--   <li><a href="images/bg_pic2.jpg"><img src="images/page3_pic2.jpg" alt></a></li>     -->
                            <li><a href="images/bg_pic3.jpg"><img src="images/page3_pic3.jpg" alt></a></li>        
                        <!--    <li><a href="images/bg_pic4.jpg"><img src="images/page3_pic4.jpg" alt></a></li>         
                            <li><a href="images/bg_pic5.jpg"><img src="images/page3_pic5.jpg" alt></a></li>         
                            <li><a href="images/bg_pic6.jpg"><img src="images/page3_pic6.jpg" alt></a></li>         
                            <li><a href="images/bg_pic7.jpg"><img src="images/page3_pic7.jpg" alt></a></li>         
                            <li><a href="images/bg_pic8.jpg"><img src="images/page3_pic8.jpg" alt></a></li>         
                            <li><a href="images/bg_pic9.jpg"><img src="images/page3_pic9.jpg" alt></a></li>      
                        </ul> -->
    
                    </div>
                    <div class="navBtns">
                        <a href="#" class="prev"><span></span></a>
                        <a href="#" class="next"><span></span></a>
                    </div>
                </li>
    

    我的脚本文件:

          function include(url) {
          document.write('<script type="text/javascript" src="' + url + '"></script>');
          }
          var MSIE = false,
          content;
         var request = false;
    
         // Request senden
         function setRequest(value) {
    // Request erzeugen
    if (window.XMLHttpRequest) {
        request = new XMLHttpRequest(); // Mozilla, Safari, Opera
    } else if (window.ActiveXObject) {
        try {
            request = new ActiveXObject('Msxml2.XMLHTTP'); // IE 5
        } catch (e) {
            try {
                request = new ActiveXObject('Microsoft.XMLHTTP'); // IE 6
            } catch (e) {}
        }
    }
    // überprüfen, ob Request erzeugt wurde
    if (!request) {
        alert("Kann keine XMLHTTP-Instanz erzeugen");
        return false;
    } else {
        var url = "js/getDir.php";
        // Request öffnen
        request.open('post', url, true);
        // Requestheader senden
        request.setRequestHeader('Content-Type', 'application/x-www-form- urlencoded');
        // Request senden
        request.send('name='+value);
        // Request auswerten
        request.onreadystatechange = interpretRequest;
    }
         }
    
          // Request auswerten
         function interpretRequest() {
    switch (request.readyState) {
        // wenn der readyState 4 und der request.status 200 ist, dann ist         alles              korrekt gelaufen
        case 4:
            if (request.status != 200) {
                alert("Der Request wurde abgeschlossen, ist aber nicht       OK\nFehler:"+request.status);
            } else {
                var content = request.responseText;
                // den Inhalt des Requests in das <div> schreiben
                document.getElementById('pagin').innerHTML  = content;
                updatePagin();
            }
            break;
        default:
            break;
    }
        }
        function updatePagin() {
    $("#pagin").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev",
        scroll:1,
        visible: 4,
        easing: 'easeOutExpo',
        speed: 700
    })
    .css({'width':'657px'});
    $('#pagin a').after('<span></span>');
        $('#pagin a').hover(
    function(){
        if (!$(this).parent().hasClass('active'))
        $(this).siblings('span').stop().animate({'width':'100%','height':'100%'},500,'easeOutExpo');            
        },
         function(){
        if (!$(this).parent().hasClass('active'))
        $(this).siblings('span').stop().animate({'width':'0','height':'0'},700,'easeOutExpo');  
    }
    );
    

    }

    function addAllListeners() {
        $('footer ul a').hover(
        function(){
            $(this).children('img').stop().animate({'top':'0px'},500,'easeOutExpo');  
        },
        function(){
            $(this).children('img').stop().animate({'top':'7px'},500,'easeOutExpo');  
        }
        );
        var defCol1 = $('.readMore').css('color');
        $('.readMore').hover(
        function(){
            if (!MSIE){
                $(this).stop().animate({'color':'#f75da4','backgroundPosition':'right 2px'},600,'easeOutCubic');
            } else {
                $(this).css({'backgroundPosition':'right top'}).stop().animate({'color':'#f75da4'},600,'easeOutCubic');
            }
        },
        function(){
            if (!MSIE){
                $(this).stop().animate({'color':defCol1,'backgroundPosition':'right 8px'},700,'easeOutCubic');  
            } else {
                $(this).css({'backgroundPosition':'right center'}).stop().animate({'color':defCol1},700,'easeOutCubic'); 
            }
        }
        );
        $('#uploadMore').click(
        function(){
            setRequest('eva');
        });
    
        $('#uploadMore1').click(
        function(){
            setRequest('paul');
        });
        $('#uploadMore2').click(
        function(){
            setRequest('hochzeit');
        });
    
        var defCol4 = $('#uploadMore').css('color');
        $('#uploadMore').hover(
        function(){
            if (!MSIE){
                $(this).stop().animate({'color':'#f75da4','backgroundPosition':'right 2px'},600,'easeOutCubic');
            } else {
                $(this).css({'backgroundPosition':'right top'}).stop().animate({'color':'#f75da4'},600,'easeOutCubic');
            }
        },
        function(){
            if (!MSIE){
                $(this).stop().animate({'color':defCol5,'backgroundPosition':'right 8px'},700,'easeOutCubic');  
            } else {
                $(this).css({'backgroundPosition':'right center'}).stop().animate({'color':defCol5},700,'easeOutCubic'); 
            }
        }
        );
        var defCol5 = $('#uploadMore1').css('color');
        $('#uploadMore1').hover(
        function(){
            if (!MSIE){
                $(this).stop().animate({'color':'#f75da4','backgroundPosition':'right 2px'},600,'easeOutCubic');
            } else {
                $(this).css({'backgroundPosition':'right top'}).stop().animate({'color':'#f75da4'},600,'easeOutCubic');
            }
        },
        function(){
            if (!MSIE){
                $(this).stop().animate({'color':defCol5,'backgroundPosition':'right 8px'},700,'easeOutCubic');  
            } else {
                $(this).css({'backgroundPosition':'right center'}).stop().animate({'color':defCol5},700,'easeOutCubic'); 
            }
        }
        );
        $('#uploadMore2').hover(
        function(){
            if (!MSIE){
                $(this).stop().animate({'color':'#f75da4','backgroundPosition':'right 2px'},600,'easeOutCubic');
            } else {
                $(this).css({'backgroundPosition':'right top'}).stop().animate({'color':'#f75da4'},600,'easeOutCubic');
            }
        },
        function(){
            if (!MSIE){
                $(this).stop().animate({'color':defCol5,'backgroundPosition':'right 8px'},700,'easeOutCubic');  
            } else {
                $(this).css({'backgroundPosition':'right center'}).stop().animate({'color':defCol5},700,'easeOutCubic'); 
            }
        }
        );
        $('.list1 a').hover(
        function(){
            if (!MSIE){
                $(this).parent().stop().animate({'backgroundPosition':'left 3px'},500,'easeOutCubic');
            } else {
                $(this).parent().css({'backgroundPosition':'left 3px'});
            }
        },
        function(){
            if (!MSIE){
                $(this).parent().stop().animate({'backgroundPosition':'left 7px'},500,'easeOutCubic');  
            } else {
                $(this).parent().css({'backgroundPosition':'left 7px'});  
            }
        }
        );
        $('.scrollDown').hover(
        function(){
            $(this).children('span').stop().animate({'backgroundPosition':'center top'},500,'easeOutExpo');
        },
        function(){
            $(this).children('span').stop().animate({'backgroundPosition':'center bottom'},500,'easeOutExpo');  
        }
        );
        $('.scrollUp').hover(
        function(){
            $(this).children('span').stop().animate({'backgroundPosition':'center bottom'},500,'easeOutExpo');
        },
        function(){
            $(this).children('span').stop().animate({'backgroundPosition':'center top'},500,'easeOutExpo');  
        }
        );
        $('#pagin a').after('<span></span>');
        $('#pagin a').hover(
        function(){
            if (!$(this).parent().hasClass('active'))
            $(this).siblings('span').stop().animate({'width':'100%','height':'100%'},500,'easeOutExpo');            
        },
        function(){
            if (!$(this).parent().hasClass('active'))
            $(this).siblings('span').stop().animate({'width':'0','height':'0'},700,'easeOutExpo');  
        }
        );
        $('.next,.prev').hover(
        function(){
            if (!MSIE){
                $(this).children('span').css({opacity:'0',display:'block'}).stop().animate({opacity:'1'});  
            } else {
                $(this).children('span').stop().show();
            }  
        },
        function(){
            if (!MSIE){
                $(this).children('span').stop().animate({opacity:'0'},function(){$(this).css({display:'none'});});  
                }else {
                $(this).children('span').stop().hide();
            }
        }
        );  
    }
    
    function showSplash() {
        $('h1').stop().animate({'marginTop':'0px'},700,'easeOutExpo')
        $('.content_menu').stop().animate({'right':'-1500px'},700,'easeInExpo');
        $('#pagin a').eq(4).trigger('click');
        if (!MSIE) {$('.glow').fadeTo(500,1);} else {$('.glow').css('display','block')};
    }
    
    function hideSplash() {
        $('h1').stop().animate({'marginTop':'-40px'},700,'easeOutExpo');
        $('.content_menu').stop().animate({'right':'-37px'},700,'easeOutExpo');
        if (!MSIE) {$('.glow').fadeTo(500,0);} else {$('.glow').css('display','none')};
    }
    
    function hideSplashQ(){
        $('h1').stop().css({'marginTop':'0px'});
        $('.content_menu').css({'right':'-1500px'});
    }
    
    $(document).ready(function() {
        /*SUPERFISH MENU*/   
        $('.menu #menu').superfish({
            delay: 800,
            animation: {
                height: 'show'
            },
            speed: 'slow',
            autoArrows: false,
            dropShadows: false
        }); 
        $('.content_menu ul').superfish({
            delay: 800,
            animation: {
                height: 'show'
            },
            speed: 'slow',
            autoArrows: false,
            dropShadows: false
        });
    });
    
    function ON_LOAD(){
        //setRequest();
        MSIE = ($.browser.msie) && ($.browser.version <= 8);
        $('.spinner').fadeOut();
    
        hideSplashQ();
    
        $("#pagin").jCarouselLite({
            btnNext: ".next",
            btnPrev: ".prev",
            scroll:1,
            visible: 4,
            easing: 'easeOutExpo',
            speed: 700
        })
        .css({'width':'657px'}) 
    
        $('.scroll').cScroll({
            duration: 500,
            easing: 'easeOutExpo',
            step:'240px'
        });
        $('.scrollUp').click(function(){
            $(this).parent().siblings('.scroll').cScroll('up');
            return false;
        });
        $('.scrollDown').click(function(){
            $(this).parent().siblings('.scroll').cScroll('down');
            return false;
        });
        //content switch
        content = $('#content');
        content.tabs({
            show:0,
            preFu:function(_){
                _.li.css({'display':'none'});
    
            },
            actFu:function(_){            
                if(_.curr){
                    if (_.n == 0){
                        showSplash();
                    } else {
                        hideSplash();
                    }
                    _.curr
                    .css({'left':'-2000px'}).stop(true).show().animate({'left':'0px'},{duration:1000,easing:'easeInOutExpo'});
                }   
                if(_.prev){
                    _.prev
                    .show().stop(true).animate({'left':'-2000px'},    duration:600,easing:'easeInOutExpo',complete:function(){
                        if (_.prev){
                            _.prev.css({'display':'none'});
                        }
                        }
                    });
                }            
            }
        });
        var defColor = $('#menu>li>a').eq(0).css('color'); 
        var nav = $('.menu');
        nav.navs({
            useHash:true,
            defHash: '#!/page_splash',
            hoverIn:function(li){
                $('>a', li).stop().animate({color: '#fff','backgroundPosition':'right bottom'},400,'easeOutCubic');
            },
            hoverOut:function(li){
                if ((!li.hasClass('with_ul')) || (!li.hasClass('sfHover'))) {
                    $('> a', li).stop().animate({color: defColor,'backgroundPosition':'left top'},700,'easeOutCubic');
                }
            }
        })
        .navs(function(n){
            $('#content').tabs(n);
        });
        var defCol2 = $('.content_menu a').css('color');
        nav = $('.content_menu');
        nav.navs({
            useHash:true,
            defHash: '#!/page_splash',
            hoverIn:function(li){
                $('>a', li).addClass('menu_shadow').stop().animate({color: '#585959'},600,'easeOutCubic');
            },
            hoverOut:function(li){
                if ((!li.hasClass('with_ul')) || (!li.hasClass('sfHover'))) {
                    $('> a', li).removeClass('menu_shadow').stop().animate({color: defCol2},700,'easeOutCubic');
                }
            }
        })
        .navs(function(n){  
            $('#content').tabs(n);
        });
    
        setTimeout(function(){
            $('#bgStretch').bgStretch({
                align:'leftTop',
                autoplay: false,
                navs:$('#pagin').navs({})
            })
            .sImg({
                sleep: 1000,
                spinner:$('<div class="spinner"></div>').css({opacity:.5}).stop().hide(3000)
            });
        },0);
    
        setTimeout(function(){  $('body').css({'overflow':'visible'}); },300);    
        addAllListeners();
    
        $(window).trigger('resize');
    }
    
    $(window).resize(function (){
        if (content) content.stop().animate({'top':(windowH()-content.height())*.5},500,'easeOutCubic');
    });
    
    function listen(evnt, elem, func) {
        if (elem.addEventListener)  // W3C DOM
        elem.addEventListener(evnt,func,false);
        else if (elem.attachEvent) { // IE DOM
            var r = elem.attachEvent("on"+evnt, func);
            return r;
        }
    }
        listen("load", window, ON_LOAD);
    

    和bgStretch:

    enter code here
        //0.3.0
        (function($){
    $.fn.bgStretch=function(o){
        this.each(function(){
            var th=$(this),
                data=th.data('bgStretch'),
                _={
                    align:'leftTop',
                    css:{
                        leftTop:{
                            left:0,
                            right:'auto',
                            top:0,
                            bottom:'auto'
                        },
                        rightTop:{
                            left:'auto',
                            right:0,
                            top:0,
                            bottom:'auto'
                        },
                        leftBottom:{
                            left:0,
                            right:'auto',
                            top:'auto',
                            bottom:0
                        },
                        rightBottom:{
                            left:'auto',
                            right:0,
                            top:'auto',
                            bottom:0
                        }
                    },
                    preFu:function(){
                        _.img
                            .load(function(){
                                _.k=_.img.height()/_.img.width()
                                _.img
                                    .css({
                                        width:'100%',
                                        height:'100%',
                                        position:'absolute',
                                        zIndex:-1,
                                        left:0,
                                        top:0
                                    })
                            })
                        _.img[0].complete
                            &&_.img.trigger('load')
                        _.me
                            .css({
                                position:'absolute',
                                zIndex:-1
                            })
                            .css(_.css[_.aalign=_.align])
                        _.wrap
                            .css({
                                width:'100%',
                                height:'100%',
                                position:'fixed',
                                left:0,
                                top:0,
                                overflow:'hidden',
                                zIndex:-1
                            })
                    },
                    resizeFu:function(){
                        var wh=_.win.height(),
                            ww=_.win.width(),
                            k=wh/ww
                        if(_.aalign!=_.align)
                            _.me
                                .css(_.css[_.aalign=_.align])
    
                        if(k<_.k)
                            _.me
                                .css({
                                    width:ww,
                                    height:ww*_.k
                                })
                        else
                            _.me
                                .css({
                                    width:wh/_.k,
                                    height:wh
                                })
    
                    },
                    chngFu:function(str){
                        $.fn.sImg
                            ?_.me.sImg(str)
                            :_.img.attr({src:str})
                    },
                    init:function(){
                        _.win=$(window)                     
                        _.img=$('img',_.me)
                        _.me.wrap('<div></div>')
                        _.wrap=_.me.parent()
    
                        _.preFu()
                        $(window)
                            .resize(function(){
                                _.resizeFu()
                            })
                            .trigger('resize')
                        _.navs&&_.navs.data('navs')
                            &&_.navs.navs(function(n,__){
                                _.chngFu(__.href)
                            })
                    }
                }
            data?_=data:th.data({bgStretch:_})
            typeof o=='object'&&$.extend(_,o)
            _.me||_.init(_.me=th)
    
            typeof o=='string'&&_.chngFu(o)
        })
        return this     
    }
        })(jQuery)
    

    最后来自php的输出转到pagin id:

    <ul><li class='active'><a href='specials/hochzeit/bg_pic3.jpg'><img src='specials/hochzeit/small_bg_pic3.jpg' alt></a></li><span style='width: 100%; height: 100%; overflow: hidden;'></span><li><a href='specials/hochzeit/bg_pic1.jpg'><img src='specials/hochzeit/small_bg_pic1.jpg' alt></a></li><span style='width: 0px; height: 0px;'></span></ul> 
    

    非常感谢!!也许有人可以找到它或有线索! 干杯!

  • 0 个答案:

    没有答案