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 个答案:

    没有答案
    相关问题
    最新问题