我已将jquery幻灯片放到我新创建的房地产网站中。
我的房地产网站在php的“ Openrealty”平台上运行。
这是我的原始jquery代码的一部分。
if(!repeat)
$this.parent()
.find('li:nth-child('+current+') a')
.stop(true,true)
.animate({'marginRight':'-20px'},300,function(){
$(this).animate({'opacity':'0.7'},700);
});
当我通过“ Firebug”查看错误的出处时,它显示如下。
if(!repeat)
$this.parent()
.find('li:nth-child('+current+') a')
.stop(true,true)
.animate(,300,function(){
$(this).animate(,700);
});
在这里,您可以清楚地看到浏览器未呈现原始代码的某些部分。如
{'marginRight':'-20px'}
如萤火虫所示,错误从“ .animate(,300,function(){)开始。
我需要找到一个解决方案,为什么这个Jquery在我的网站上不起作用。
该Jquery幻灯片显示的来源:http://tympanus.net/codrops/2010/04/28/pretty-simple-content-slider-with-jquery-and-css3/
任何反馈都非常受欢迎...
感谢您前两个答案和要求。
是的,我根据答案删除了所有样式中的所有(')标记。
但是仍然会发生与上述相同的错误...
总的Jquery脚本包括三个部分。
1.链接到http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
2.链接到名为“ jquery.easing.1.3.js”的外部JS文件。
3.内联脚本
以下是内联jquery:
<script type="text/javascript">
$(function() {
var current = 1;
var iterate = function(){
var i = parseInt(current+1);
var lis = $('#rotmenu').children('li').size();
if(i>lis) i = 1;
display($('#rotmenu li:nth-child('+i+')'));
}
display($('#rotmenu li:first'));
var slidetime = setInterval(iterate,3000);
$('#rotmenu li').bind('click',function(e){
clearTimeout(slidetime);
display($(this));
e.preventDefault();
});
function display(elem){
var $this = elem;
var repeat = false;
if(current == parseInt($this.index() + 1))
repeat = true;
/* slide in the current one */
if(!repeat)
$this.parent()
.find('li:nth-child('+current+') a')
.stop(true,true)
.animate({marginRight:-20px},300,function(){
$(this).animate({opacity:0.7},700);
});
current = parseInt($this.index() + 1);
var elem = $('a',$this);
elem.stop(true,true).animate({marginRight:0px,opacity:1.0},300);
var info_elem = elem.next();
$('#rot1 .heading').animate({left:-420px}, 500,'easeOutCirc',function(){
$('h1',$(this)).html(info_elem.find('.info_heading').html());
$(this).animate({left:0px},400,'easeInOutQuad');
});
$('#rot1 .description').animate({bottom:-270px},500,'easeOutCirc',function(){
$('p',$(this)).html(info_elem.find('.info_description').html());
$(this).animate({bottom:0px},400,'easeInOutQuad');
})
$('#rot1').prepend(
$('<img/>',{
style : 'opacity:0',
className : 'bg'
}).load(
function(){
$(this).animate({opacity:1},600);
$('#rot1 img:first').next().animate({opacity:0},700,function(){
$(this).remove();
});
}
).attr('src','slide-images/'+info_elem.find('.info_image').html()).attr('width','950').attr('height','300')
);
}
});
</script>
以下是显示幻灯片的html部分。
<div id="sliderbox">
<div class="rotator">
<ul id="rotmenu">
<li>
<a href="rot1">Luxury Life</a>
<div style="display:none;">
<div class="info_image">1.jpg</div>
<div class="info_heading">Best Homes for you</div>
<div class="info_description">
This is description...
<a href="#" class="more">Read more</a>
</div>
</div>
</li>
<li>
<a href="rot2">Smiling Faces</a>
<div style="display:none;">
<div class="info_image">2.jpg</div>
<div class="info_heading">Do at our best</div>
<div class="info_description">
This is description...
<a href="#" class="more">Read more</a>
</div>
</div>
</li>
<li>
<a href="rot3">Tradition</a>
<div style="display:none;">
<div class="info_image">3.jpg</div>
<div class="info_heading">We goes with tradition</div>
<div class="info_description">
This is description...
<a href="#" class="more">Read more</a>
</div>
</div>
</li>
<li>
<a href="rot4">Lands for sale</a>
<div style="display:none;">
<div class="info_image">4.jpg</div>
<div class="info_heading">A best place to live in Kandy</div>
<div class="info_description">
This is description...
<a href="#" class="more">Read more</a>
</div>
</div>
</li>
<li>
<a href="rot5">True Nature</a>
<div style="display:none;">
<div class="info_image">5.jpg</div>
<div class="info_heading">Brings you beauty in nature</div>
<div class="info_description">
This is description...
<a href="#" class="more">Read more</a>
</div>
</div>
</li>
</ul>
<div id="rot1">
<img src="" width="950" height="300" class="bg" alt=""/>
<div class="heading">
<h1></h1>
</div>
<div class="description">
<p></p>
</div>
</div>
</div>
</div>
以下是CSS:
.rotator{
background-color:#222;
width:950px;
height:300px;
margin:0px auto;
position:relative;
/*font-family:'Myriad Pro',Arial,Helvetica,sans-serif;*/
font-family:Helvetica,sans-serif;
color:#fff;
text-transform:uppercase;
/* letter-spacing:-1px; */
letter-spacing:1px;
border:3px solid #f0f0f0;
overflow:hidden;
-moz-box-shadow:0px 0px 10px #222;
-webkit-box-shadow:0px 0px 10px #222;
box-shadow:0px 0px 10px #222;
}
img.bg{
position:absolute;
top:0px;
left:0px;
}
.rotator ul{
list-style:none;
position:absolute;
right:0px;
top:0px;
margin-top:6px;
z-index:999999;
}
.rotator ul li{
display:block;
float:left;
clear:both;
width:260px;
}
.rotator ul li a{
width:230px;
float:right;
clear:both;
padding-left:10px;
text-decoration:none;
display:block;
height:30px;
line-height:30px;
background-color:#222;
margin:1px -20px 1px 0px;
/*opacity:0.7;*/
color:#f0f0f0;
font-size:12px;
border:1px solid #000;
border-right:none;
outline:none;
/*
text-shadow:-1px 1px 1px #000;
*/
-moz-border-radius:10px 0px 0px 5px;
-webkit-border-top-left-radius:10px;
-webkit-border-bottom-left-radius:10px;
border-top-left-radius:10px;
border-bottom-left-radius:10px;
}
/* .rotator ul li a:hover{
text-shadow:0px 0px 2px #fff;
}
*/
.rotator .heading{
position:absolute;
top:0px;
left:0px;
width:500px;
}
.rotator .heading h1{
text-shadow:-1px 1px 1px #555;
font-weight:normal;
font-size:36px;
padding:20px;
}
.rotator .description{
width:300px;
height:15px;
position:absolute;
bottom:0px;
left:0px;
padding:5px;
background-color:#222;
-moz-border-radius:0px 10px 0px 0px;
-webkit-border-top-right-radius:10px;
border-top-right-radius:10px;
/*opacity:0.7;*/
border-top:1px solid #000;
border-right:1px solid #000;
}
.rotator .description p{
/*text-shadow:-1px 1px 1px #000;*/
text-transform:none;
letter-spacing:normal;
line-height:10px;
font-family:Helvetica,sans-serif;
font-size:13px;
}
a.more{
color:orange;
text-decoration:none;
text-transform:uppercase;
font-size:10px;
}
a.more:hover{
color:#fff;
}
我已经分析了所有这些脚本,但无法确定任何问题...
请告诉我我该如何解决。
最佳答案
在原始代码中尝试一下。
if(!repeat)
$this.parent()
.find('li:nth-child('+current+') a')
.stop(true,true)
.animate({marginRight:-20},300,function(){
$(this).animate({opacity:0.7},700);
});
关于php - 为什么这个jQuery幻灯片不能正常工作?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/7077794/