我已经插入jquery幻灯片显示在我新创建的房地产网站。我的房地产网站运行在'Openrealty'平台，这是php。
这是我的原始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'}
如firebug所示，错误从" .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.js2. 链接到外部JS文件'jquery. ease .1.3. 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);
});
你的animate()函数的CSS属性好像有问题。
不使用'(单引号字符)
if(!repeat)
$this.parent()
.find('li:nth-child('+current+') a')
.stop(true,true)
.animate({marginRight:'-20px'},300,function(){
$(this).animate({opacity:0.7},700);
});
与jquery网页中的animate()示例一样