Php 带jquery担架的jquery转盘
非常感谢你到现在为止的帮助！你真的很棒！ 但我还有一个问题！ 我正在使用jq carousel和一些称为bgStretcher的第三方插件。（稍后我将插入其代码）。我的索引文件是通过一个javascript/php脚本通过hrefs获取其图像的，在该脚本中，图像从正确的路径获取，并按大小减小，然后作为html传递到正确位置的索引。问题就在这里：图像被正确读取，缩略图被生成，传递的html代码有效，旋转木马显示生成的拇指，但是bgStretch功能不起作用（为了将点击的图像从旋转木马拉伸到背景）！bgStretch只处理编写的纯html（Php 带jquery担架的jquery转盘,php,jquery,carousel,Php,Jquery,Carousel,非常感谢你到现在为止的帮助！你真的很棒！ 但我还有一个问题！ 我正在使用jq carousel和一些称为bgStretcher的第三方插件。（稍后我将插入其代码）。我的索引文件是通过一个javascript/php脚本通过hrefs获取其图像的，在该脚本中，图像从正确的路径获取，并按大小减小，然后作为html传递到正确位置的索引。问题就在这里：图像被正确读取，缩略图被生成，传递的html代码有效，旋转木马显示生成的拇指，但是bgStretch功能不起作用（为了将点击的图像从旋转木马拉伸到背景）！
<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');
}
);
函数包含（url）{
文件。写（“”）；
}
var MSIE=false，
内容；
var请求=false；
//请求发送
函数setRequest（值）{
//请求erzeugen
if（window.XMLHttpRequest）{
request=new XMLHttpRequest（）；//Mozilla、Safari、Opera
}else if（window.ActiveXObject）{
试一试{
request=newActiveXObject（'Msxml2.XMLHTTP'）；//IE 5
}捕获（e）{
试一试{
request=newActiveXObject（'Microsoft.XMLHTTP'）；//IE 6
}捕获（e）{}
}
}
//吕伯普吕芬，ob请求erzeugt wurde
如果（！请求）{
警报（“Kann keine XMLHTTP Instanz erzeugen”）；
返回false；
}否则{
var url=“js/getDir.php”；
//请求奥夫宁
打开（'post'，url，true）；
//请求头发送
setRequestHeader（'Content-Type'，'application/x-www-form-urlencoded'）；
//请求发送
request.send（'name='+值）；
//请求auswerten
request.onreadystatechange=解释请求；
}
}
//请求auswerten
函数解释请求（）{
开关（request.readyState）{
//重新启动4号和请求。状态为200 ist，但这是所有korrekt gelaufen
案例4：
如果（request.status！=200）{
警报（“请求已发出，但尚未确认”；“请求状态”）；
}否则{
var content=request.responseText；
//在das schreiben的请求中
document.getElementById（'pagin'）。innerHTML=content；
updatePagin（）；
}
打破
违约：
打破
}
}
函数updatePagin（）{
$（“#pagin”）.jCarouselLite({
btnNext:“.next”，
btnPrev:“.prev”，
卷轴：1，
可见：4，
放松：“easeOutExpo”，
速度：700
})
.css（{'width'：'657px'}）；
$（'#pagin a'）。在（''）之后；
$（#pagin a'）。悬停(
函数（）{
if（！$（this.parent（）.hasClass（'active'））
$（this.this（'span'）.stop（）.animate（{'width'：'100%，'height'：'100%}，500，'easoutexpo'）；
},
函数（）{
if（！$（this.parent（）.hasClass（'active'））
$（this.this（'span'）.stop（）.animate（{'width'：'0'，'height'：'0'}，700，'easoutexpo'）；
}
);
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);
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)
<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>