Javascript 对象[Object Object]没有方法'；滑动滑块'；
当我尝试在我的页面上实现滑块时，我得到了一个错误Javascript 对象[Object Object]没有方法'；滑动滑块'；,javascript,jquery,Javascript,Jquery,当我尝试在我的页面上实现滑块时，我得到了一个错误'Object[Object Object]没有方法'slitslider'。我不太懂javascript，所以我真的不知道为什么会发生这种情况 这是我的剧本： <script type="text/javascript"> $(function() { var Page = (function() { var $nav = $( '#nav-dots > span' ),
'Object[Object Object]没有方法'slitslider'<script type="text/javascript">
$(function() {
var Page = (function() {
var $nav = $( '#nav-dots > span' ),
slitslider = $( '#slider' ).slitslider( {
onBeforeChange : function( slide, pos ) {
$nav.removeClass( 'nav-dot-current' );
$nav.eq( pos ).addClass( 'nav-dot-current' );
}
} ),
init = function() {
initEvents();
},
initEvents = function() {
$nav.each( function( i ) {
$( this ).on( 'click', function( event ) {
var $dot = $( this );
if( !slitslider.isActive() ) {
$nav.removeClass( 'nav-dot-current' );
$dot.addClass( 'nav-dot-current' );
}
slitslider.jump( i + 1 );
return false;
} );
} );
};
return { init : init };
})();
Page.init();
/**
* Notes:
*
* example how to add items:
*/
/*
var $items = $('<div class="sl-slide sl-slide-color-2" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1"><div class="sl-slide-inner bg-1"><div class="sl-deco" data-icon="t"></div><h2>some text</h2><blockquote><p>bla bla</p><cite>Margi Clarke</cite></blockquote></div></div>');
// call the plugin's add method
ss.add($items);
*/
});
</script>
$（函数（）{
变量页=（函数（）{
var$nav=$（“#nav dots>span”），
滑动滑块=$（“#滑块”）。滑动滑块（{
onBeforeChange:功能（幻灯片、pos）{
$nav.removeClass（'nav dot current'）；
$nav.eq（pos.addClass）（“导航点电流”）；
}
} ),
init=函数（）{
initEvents（）；
},
initEvents=函数（）{
$nav.每个（功能（i）{
$（此）.on（'click'，函数（事件）{
var$dot=$（此）；
如果（！slitslider.isActive（））{
$nav.removeClass（'nav dot current'）；
$dot.addClass（'nav dot current'）；
}
滑翔机跳跃（i+1）；
返回false；
} );
} );
};
返回{init:init}；
})();
Page.init（）；
/**
*注:
*
*如何添加项目的示例：
*/
/*
var$items=$（“一些文本bla blaMargi Clarke”）；
//调用插件的add方法
ss.添加（$项）；
*/
});
<script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ba-cond.min.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.slitslider.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap.min.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>
使用CSS3和jQuery的Slit滑块
贝尼·普拉西托。
你刚吃过饭，屠宰场被小心翼翼地隐藏在优美的几英里之外，却有同谋。拉尔夫·沃尔多·爱默生
金黄色调节器。
除非人类将自己的同情之心扩展到所有生物，否则人类自己将无法找到和平。Albert Schweitzer
杜姆斯皮罗，斯佩罗。
成千上万的人说他们“爱”动物，他们每天坐下来一到两次，享受这些动物的肉。这些动物被完全剥夺了一切可以使他们的生命有价值的东西，忍受着屠宰场的可怕痛苦和恐怖。简·莫里斯·古德尔夫人
唐娜·诺比斯·佩西姆。
人体对牛奶的需求不比狗奶、马奶或长颈鹿奶多。Michael Klaper医学博士。
非逐字行为。
我认为如果你想多吃点肉，你应该自己宰了它，生吃，这样你就不会被为你加工的虚伪蒙蔽了双眼。Margi Clarke
关于这个滑块
“狭缝滑块”是一种带有扭曲的幻灯片放映：其思想是在导航到下一张或上一张幻灯片时，将当前幻灯片切片打开。使用jQuery和CSS动画，我们可以为内容元素创建独特的幻灯片过渡
$（函数（）{
变量页=（函数（）{
var$nav=$（“#nav dots>span”），
滑动滑块=$（“#滑块”）。滑动滑块（{
onBeforeChange:功能（幻灯片、pos）{
$nav.removeClass（'nav dot current'）；
$nav.eq（pos.addClass）（“导航点电流”）；
}
} ),
init=函数（）{
initEvents（）；
},
initEvents=函数（）{
$nav.每个（功能（i）{
$（此）.on（'click'，函数（事件）{
var$dot=$（此）；
如果（！slitslider.isActive（））{
$nav.removeClass（'nav dot current'）；
$dot.addClass（'nav dot current'）；
}
滑翔机跳跃（i+1）；
返回false；
} );
} );
};
返回{init:init}；
})();
Page.init（）；
/**
*注:
*
*如何添加项目的示例：
*/
/*
var$items=$（“一些文本bla blaMargi Clarke”）；
//调用插件的add方法
ss.添加（$项）；
*/
});
滑块的div？是：。如果我用整个HTML更新这个问题会有帮助吗？是的，试一试，目前看不出任何错误。如果你做一个测试会有帮助。我相信这个家伙（）也有同样的问题，但因为我对javascript不太了解，所以我无法真正理解答案
<div class="container demo-2">
<header class="clearfix">
<h1>Slit Slider <span>with CSS3 and jQuery</span></h1>
</header>
<div id="slider" class="sl-slider-wrapper">
<div class="sl-slider">
<div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">
<div class="sl-slide-inner">
<div class="bg-img bg-img-1"></div>
<h2>A bene placito.</h2>
<blockquote><p>You have just dined, and however scrupulously the slaughterhouse is concealed in the graceful distance of miles, there is complicity.</p><cite>Ralph Waldo Emerson</cite></blockquote>
</div>
</div>
<div class="sl-slide" data-orientation="vertical" data-slice1-rotation="10" data-slice2-rotation="-15" data-slice1-scale="1.5" data-slice2-scale="1.5">
<div class="sl-slide-inner">
<div class="bg-img bg-img-2"></div>
<h2>Regula aurea.</h2>
<blockquote><p>Until he extends the circle of his compassion to all living things, man will not himself find peace.</p><cite>Albert Schweitzer</cite></blockquote>
</div>
</div>
<div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="3" data-slice2-rotation="3" data-slice1-scale="2" data-slice2-scale="1">
<div class="sl-slide-inner">
<div class="bg-img bg-img-3"></div>
<h2>Dum spiro, spero.</h2>
<blockquote><p>Thousands of people who say they 'love' animals sit down once or twice a day to enjoy the flesh of creatures who have been utterly deprived of everything that could make their lives worth living and who endured the awful suffering and the terror of the abattoirs.</p><cite>Dame Jane Morris Goodall</cite></blockquote>
</div>
</div>
<div class="sl-slide" data-orientation="vertical" data-slice1-rotation="-5" data-slice2-rotation="25" data-slice1-scale="2" data-slice2-scale="1">
<div class="sl-slide-inner">
<div class="bg-img bg-img-4"></div>
<h2>Donna nobis pacem.</h2>
<blockquote><p>The human body has no more need for cows' milk than it does for dogs' milk, horses' milk, or giraffes' milk.</p><cite>Michael Klaper M.D.</cite></blockquote>
</div>
</div>
<div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1">
<div class="sl-slide-inner">
<div class="bg-img bg-img-5"></div>
<h2>Acta Non Verba.</h2>
<blockquote><p>I think if you want to eat more meat you should kill it yourself and eat it raw so that you are not blinded by the hypocrisy of having it processed for you.</p><cite>Margi Clarke</cite></blockquote>
</div>
</div>
</div><!-- /sl-slider -->
<nav id="nav-dots" class="nav-dots">
<span class="nav-dot-current"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</nav>
</div><!-- /slider-wrapper -->
<div class="content-wrapper">
<h2>About this slider</h2>
<p>The Slit Slider is a slideshow with a twist: the idea is to slice open the current slide when navigating to the next or previous one. Using jQuery and CSS animations we can create unique slide transitions for the content elements. </p>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var Page = (function() {
var $nav = $( '#nav-dots > span' ),
slitslider = $( '#slider' ).slitslider( {
onBeforeChange : function( slide, pos ) {
$nav.removeClass( 'nav-dot-current' );
$nav.eq( pos ).addClass( 'nav-dot-current' );
}
} ),
init = function() {
initEvents();
},
initEvents = function() {
$nav.each( function( i ) {
$( this ).on( 'click', function( event ) {
var $dot = $( this );
if( !slitslider.isActive() ) {
$nav.removeClass( 'nav-dot-current' );
$dot.addClass( 'nav-dot-current' );
}
slitslider.jump( i + 1 );
return false;
} );
} );
};
return { init : init };
})();
Page.init();
/**
* Notes:
*
* example how to add items:
*/
/*
var $items = $('<div class="sl-slide sl-slide-color-2" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1"><div class="sl-slide-inner bg-1"><div class="sl-deco" data-icon="t"></div><h2>some text</h2><blockquote><p>bla bla</p><cite>Margi Clarke</cite></blockquote></div></div>');
// call the plugin's add method
ss.add($items);
*/
});
</script>