jQuery Slit Slider问题
我正在使用this fantastic教程创建一个水平图像滑块，但是有些东西显然是错误的，因为滑块看起来很破碎。 Javascript也无效。我只是JS的初学者，希望能从中学到一些东西。
我正在使用名为phpVMS的CMS，其中每个页面都可以作为可修改的模板使用。 Layout.cpl的工作原理不言自明，可以显示所有页面的总体布局。我检查过没有CSS或JS文件覆盖mypage.cpl中的文件。
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="<?php echo SITE_URL?>/lib/skins/flyeuro/scripts/jquery.ba-cond.min.js"></script>
<script type="text/javascript" src="<?php echo SITE_URL?>/lib/skins/flyeuro/scripts/jquery.slitslider.js"></script>
<script type="text/javascript" src="<?php echo SITE_URL?>/lib/skins/flyeuro/scripts/modernizr.custom.79639.js" ></script>
<link rel="stylesheet" type="text/css" href="<?php echo SITE_URL?>/lib/skins/flyeuro/css/slider-style.css" />
<link rel="stylesheet" type="text/css" href="<?php echo SITE_URL?>/lib/skins/flyeuro/css/custom.css" />
Chrome似乎指出这是唯一的错误......
Uncaught TypeError: Cannot call method 'prefixed' of undefined
错误行显示在...
上this.transEndEventName = this.transEndEventNames[ Modernizr.prefixed( 'transition' ) ];
3 个答案:
答案 0 :(得分：1)
试试以下示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Fullscreen Slit Slider with CSS3 and jQuery</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Fullscreen Slit Slider with CSS3 and jQuery" />
<meta name="keywords" content="slit slider, plugin, css3, transitions, jquery, fullscreen, autoplay" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />
<script type="text/javascript" src="js/modernizr.custom.79639.js"></script>
<noscript>
<link rel="stylesheet" type="text/css" href="css/styleNoJS.css" />
</noscript>
</head>
<body>
<div class="container demo-2">
<!-- Codrops top bar -->
<div class="codrops-top clearfix">
<a href="http://tympanus.net/Tutorials/CSS3BouncingBall/">
<strong>« Previous Demo: </strong>3D Bouncing Ball with CSS3
</a>
<span class="right">
<a href="http://www.flickr.com/photos/majownik/">Images by Majownik</a>
<a href="http://tympanus.net/codrops/?p=9357">
<strong>Back to the Codrops Article</strong>
</a>
</span>
<div class="clr"></div>
</div><!--/ Codrops top bar -->
<header class="clearfix">
<h1>Slit Slider <span>with CSS3 and jQuery</span></h1>
<nav class="codrops-demos">
<a href="index.html">Demo 1</a>
<a class="current-demo" href="index2.html">Demo 2</a>
</nav>
</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" src="js/jquery.ba-cond.min.js"></script>
<script type="text/javascript" src="js/jquery.slitslider.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>
</body>
</html>
另请参阅以下位置：http://tympanus.net/codrops/2012/06/05/fullscreen-slit-slider-with-jquery-and-css3/
我认为这可以帮助您解决问题。
答案 1 :(得分：1)
在jquery.slitslider.js之前加载modernizr.custom.79639.js：
<script type="text/javascript" src="<?php echo SITE_URL?>/lib/skins/flyeuro/scripts/modernizr.custom.79639.js" ></script>
<script type="text/javascript" src="<?php echo SITE_URL?>/lib/skins/flyeuro/scripts/jquery.slitslider.js"></script>
答案 2 :(得分：0)
我有一个类似的问题，结果是jquery库坏了。另外一定要在javascript之前加入css。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？