在重新设计网站时,我们想在主页上添加光滑的js旋转木马功能。遵循slick javasriprt网站的说明http://kenwheeler.github.io/slick/ 但它没有门激活,在firefox调试控制台上,它说“$不是一个函数”。
一个页面上的其他Javascript正在正确运行,所以我做错了什么,但我找不到什么
标题代码如下:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head>
<meta http-equiv="Content-Type" content="<?php bloginfo(\'html_type\'); ?>; charset=<?php bloginfo(\'charset\'); ?>" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title><?php ui::title(); ?></title>
<link rel="stylesheet" type="text/css" href="<?php bloginfo(\'stylesheet_url\'); ?>" media="screen" />
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="<?php bloginfo(\'template_directory\'); ?>/ie7.css" /><![endif]-->
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="<?php bloginfo(\'template_directory\'); ?>/ie6.css" /><![endif]-->
<!-- <?php if (is_home() ) {?><style type="text/css">#sidebar { margin-top: -310px; } #middle /style> <?php } ?> -->
<?php if (option::get(\'sidebar_pos\') == \'Left\') { ?><style type="text/css">#sidebar { float:left; } #middle { float:right;} </style> <?php } ?>
<link rel="pingback" href="<?php bloginfo(\'pingback_url\'); ?>" />
<link href=\'http://fonts.googleapis.com/css?family=Open+Sans&subset=latin,greek\' rel=\'stylesheet\' type=\'text/css\'>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css"/>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&appId=640072772742184&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, \'script\', \'facebook-jssdk\'));</script>
<?php wp_head(); ?>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="/wp-content/themes/zenko/functions/user/stepcarousel.js"></script>
</head>
<div id="header">
<div id="logo">
<?php if (!option::get(\'misc_logo_path\')) { echo "<h1>"; } ?>
<a href="<?php echo home_url(); ?>" title="<?php bloginfo(\'description\'); ?>">
<?php if (!option::get(\'misc_logo_path\')) { bloginfo(\'name\'); } else { ?>
<img src="<?php echo ui::logo(); ?>" alt="<?php bloginfo(\'name\'); ?>" />
<?php } ?>
</a>
<?php if (!option::get(\'misc_logo_path\')) { echo \'</h1><p id="tagline">\' . get_bloginfo(\'description\') . \'</p>\'; } ?>
</div>
<?php if (option::get(\'ad_head_select\') == \'on\') { ?>
<div id="ad468">
<?php if ( option::get(\'ad_head_code\') <> "") {
echo stripslashes(option::get(\'ad_head_code\'));
} else { ?>
<a href="<?php echo option::get(\'banner_top_url\'); ?>"><img src="<?php echo option::get(\'banner_top\'); ?>" alt="<?php echo option::get(\'banner_top_alt\'); ?>" /></a>
<?php } ?>
</div><!-- /.adv -->
<?php } ?>
<div class="clear"></div>
</div>
<div id="menu">
<div id="menu-wrap">
<?php if (has_nav_menu( \'primary\' )) {
wp_nav_menu(array(
\'container\' => \'menu\',
\'container_class\' => \'\',
\'menu_class\' => \'dropdown\',
\'menu_id\' => \'mainmenu\',
\'sort_column\' => \'menu_order\',
\'theme_location\' => \'primary\'
));
}
else
{
echo \'<p>Please set your Top navigation menu on the <strong><a href="\'.get_admin_url().\'nav-menus.php">Appearance > Menus</a></strong> page.</p>
\';
}
?>
<?php if (option::get(\'rss_icon\') == \'on\') { ?>
<div id="rss_icon">
<a href="<?php ui::rss(); ?>"><?php echo option::get(\'rss_label\'); ?></a>
</div>
<?php } ?>
</div> <!-- /#menu-wrap -->
</div> <!-- /#menu -->
<div>
<div id="content-wrap">
<div id="content">
<table id="t02" style="border:#CCCCCC;">
<tr>
<td id="d03" ></td>
<td id="d03" style="width:900px;padding: 0px 0px 4px 1px;">
<script>
(function() {
var cx = \'012395885834974803252:tjozqtaiwbi\';
var gcse = document.createElement(\'script\');
gcse.type = \'text/javascript\';
gcse.async = true;
gcse.src = (document.location.protocol == \'https:\' ? \'https:\' : \'http:\') +
\'//cse.google.com/cse.js?cx=\' + cx;
var s = document.getElementsByTagName(\'script\')[0];
s.parentNode.insertBefore(gcse, s); })();
</script>
<gcse:search></gcse:search>
</td>
<td id="d03" ></td>
</tr>
</table>
<script type="text/javascript">
//<![CDATA[
var $j = jQuery.noConflict();
$j(window).load(function(){
// use $j for jquery functions
});
//]]>
</script>
主要代码如下:
<?php get_header(); ?>
<?php $paged = (get_query_var(\'paged\')) ? get_query_var(\'paged\') : 1; // gets current page number ?>
<?php if (is_home() && $paged < 2 && option::get(\'featured_enable\') == \'on\' ) { get_template_part(\'wpzoom-slider\'); } // Featured Slideshow ?>
<?php
// php code quering the posts and echoing them
?>
<table id="t01" >
<tr>
<td id="d01" style="width:888px;padding: 0px 0px 4px 1px; background:#DAADAE0;"><?php jnewsticker_display( 0 ) ?> </td>
<td id="d02" style="padding-top: 0px; padding-left: 0px;"><a href="http://news.creativeopinions.org" onclick="window.open(this.href,\'targetWindow\',\'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=900\');return false;" ><img src="http://creativeopinions.org/wp-content/uploads/2015/11/Macro-Flash-news-icon1.jpg" ></a></td>
</tr>
</table>
<script type="text/javascript">
stepcarousel.setup({
galleryid: \'mygallery_a\', //id of carousel DIV
beltclass: \'belt\', //class of inner "belt" DIV containing all the panel DIVs
panelclass: \'panel\', //class of panel DIVs each holding content
autostep: {enable:false, moveby:2, pause:7000},
panelbehavior: {speed:600, wraparound:true, wrapbehavior:\'slide\', persist:false},
defaultbuttons: {enable: true, moveby: 1, leftnav: [\'http://creativeopinions.org/wp-content/uploads/2015/05/arrowl.gif\', -20, 150], rightnav: [\'http://creativeopinions.org/wp-content/uploads/2015/05/arrowr.gif\', 0, 150]},
statusvars: [\'statusA\', \'statusB\', \'statusC\'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: [\'inline\'] //content setting [\'inline\'] or [\'ajax\', \'path_to_external_file\']
})
</script>
<div id="mygallery_a" class="stepcarousel">
<div class="belt">
<?php
// php code to query the posts for the step carousel
?>
</div>
</div>
<div style="clear:both"></div>
<style type="text/css">
.tg {border-collapse:collapse;border-spacing:0;margin:0px auto;}
.tg td{font-family:Arial, sans-serif;font-size:14px;border-style:none;border-width:0px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;border-style:none;border-width:0px;overflow:hidden;word-break:normal;background: none repeat scroll 0% 0%;}
</style>
<table class="tg">
<tr>
<th class="tg-031e" style="width: 360px; ">
1/3 third collum
</th>
<th class="tg-031e" style="width: 300px; ">
2/3 Third Column
<h3 style="background: transparent url("http://creativeopinions.org/wp-content/themes/zenko/images/black.png") no-repeat scroll left top; color: white;" class="title">ΟΙ ΕΙΔΗΣΕΙΣ ΜΟΥ</h3>
<style> .feed-item {padding: 5px 0px 0px 5px;background: transparent url("http://www.analyst.gr/wp-content/uploads/2015/11/bullet.gif") no-repeat scroll 0px 12px; border-bottom: 1px solid #CCC;} #ajax_text-2 { background: #F0F0F0 none repeat scroll 0% 0%;}
.wprss-feed-meta > span:not(:last-child):after {content: \' | \';} li.feed-item { margin-bottom: 10px;} .wprss-feed-meta > span {font-size: 90%;clear: both;}</style>
<div style="overflow:auto;height:300px;">
<?php
$args = array(
\'before_widget\' => \'\',
\'after_widget\' => \'\',
\'before_title\' => \'\',
\'after_title\' => \'\'
);
$instance = array(
\'title\' => \'\',
\'text\' => \'[wp-rss-aggregator]\'
);
the_widget( \'AJAX_Text_Widget\', $instance, $args );
?>
</div>
<br>
</th>
<th class="tg-031e" style="width: 300px; ">
3/3 Third Column
<h3 style="background: transparent url("http://creativeopinions.org/wp-content/themes/zenko/images/black.png") no-repeat scroll left top; color: white;" class="title">ΑΓΟΡΕΣ</h3>
</th>
</tr>
</table>
<style type="text/css">
.stepcarouselb{position: relative; /*leave this value alone*/margin-left:auto;margin-right:auto;border: 1px solid #0c98d3;overflow: scroll; /*leave this value alone*/width: 890px; /*Width of Carousel Viewer itself*/height: 90px; /*Height should enough to fit largest content\'s height*/-webkit-box-sizing: border-box; /* set box model so container width and height value includes any padding/border defined */-moz-box-sizing: border-box;box-sizing: border-box;}
.stepcarouselb .belt{position: absolute; /*leave this value alone*/left: 0;top: 0;}
.stepcarouselb .panelb{float: left; /*leave this value alone*/overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/margin: 15px; /*margin around each panel*/width: 130px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */}
span.paginatecircle{ /* CSS for paginate circle spans. Required */background: white;border: 2px solid black;border-radius: 10px;width: 6px;height: 6px;cursor: pointer;display: inline-block;margin-right: 4px;}
span.paginatecircle:hover{background: gray;}
span.paginatecircle.selected{background: black;}
</style>
<script type="text/javascript">
stepcarousel.setup({
galleryid: \'mygalleryb\', //id of carousel DIV
beltclass: \'belt\', //class of inner "belt" DIV containing all the panel DIVs
panelclass: \'panelb\', //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:1500, wraparound:false, wrapbehavior:\'slide\', persist:false},
defaultbuttons: {enable: false, moveby: 1, leftnav: [\'http://marketnews.gr/images/arrowl.gif\', -20, 100], rightnav: [\'http://marketnews.gr/images/arrowr.gif\', 0, 100]},
statusvars: [\'statusA\', \'statusB\', \'statusC\'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: [\'inline\'] //content setting [\'inline\'] or [\'ajax\', \'path_to_external_file\']
})
</script>
<div id="mygalleryb" class="stepcarouselb">
<div class="belt">
<div class="panelb"><a href="http://expohellas.analyst.gr/hall/b-wines-anagnostou-03/" target="_blank"><img src="http://www.analyst.gr/wp-content/uploads/2015/11/ANAGNOSTOU-logo-570x321.png" /></a></div>
<div class="panelb"><a href="http://expohellas.analyst.gr/hall/b-drinks-athenian-brewery/" target="_blank"><img src="http://www.analyst.gr/wp-content/uploads/2015/11/AZ_LOGO_gr_gb_3BRANDS-08-570x321.png" /></a></div>
<div class="panelb"><a href="http://expohellas.analyst.gr/hall/b-wines-cavino-02/" target="_blank"><img src="http://www.analyst.gr/wp-content/uploads/2015/11/CAVINO-Logo2-570x321.png" /></a></div>
<div class="panelb"><a href="http://expohellas.analyst.gr/hall/b-wines-gerovassiliou-05/" target="_blank"><img src="http://www.analyst.gr/wp-content/uploads/2015/11/GEROVASSILIOU-Logo-GR-570x321.png" /></a></div>
<div class="panelb"><a href="http://expohellas.analyst.gr/hall/b-wines-kirgianni-02/" target="_blank"><img src="http://www.analyst.gr/wp-content/uploads/2015/11/KYRGIANNI-LogoFeb13-570x321.png" /></a></div>
<div class="panelb"><a href="http://expohellas.analyst.gr/hall/b-wines-lafazani-05/" target="_blank"><img src="http://www.analyst.gr/wp-content/uploads/2015/11/LAFAZANIS-Logo-GR.png" /></a></div>
<div class="panelb"><a href="http://expohellas.analyst.gr/hall/b-wines-papagiannakou-02/" target="_blank"><img src="http://www.analyst.gr/wp-content/uploads/2015/11/PAPAGIANNAKOS-Logo-GR3-570x321.png" /></a></div>
<div class="panelb"><a href="http://expohellas.analyst.gr/hall/b-wines-semeli-02/" target="_blank"><img src="http://www.analyst.gr/wp-content/uploads/2015/11/SEMELI-Logo-cropped-570x321.png" /></a></div>
<div class="panelb"><a href="http://expohellas.analyst.gr/hall/b-wines-skouras-02/" target="_blank"><img src="http://www.analyst.gr/wp-content/uploads/2015/11/SKOURAS-logo-570x321.png" /></a></div>
<div class="panelb"><a href="http://expohellas.analyst.gr/hall/b-wines-tsantali-02/" target="_blank"><img src="http://www.analyst.gr/wp-content/uploads/2015/11/TSANTALI-logo1-570x321.png" /></a></div>
</div>
</div>
<div id="middle">
<?php if(is_home() && $paged < 2) { ?>
<?php if (function_exists(\'dynamic_sidebar\')) { dynamic_sidebar(\'Homepage\'); } ?>
<div class="clear"></div>
<?php } ?>
</div><!-- /#middle -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
最后是页脚
<?php } ?>
</div> <!-- /#content-wrap -->
<div id="footer">
<div class="footer-wrap">
<div id="fside">
</div>
</div> <!-- /#footer-wrap-->
<div class="clear"></div>
<div id="copyright">
<div class="footer-wrap">
</div> <!-- /#footer-wrap-->
</div>
</div> <!-- /#footer -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<?php wp_footer(); ?>
<?php if (option::get(\'featured_enable\') == \'on\' && $paged < 2 && is_home() ) { ui::js("jtools"); ?>
<script type="text/javascript">
var jq = jQuery.noConflict(true);
(function($) {
jq(".pagination").tabs(".slides li", {
event: \'mouseover\',
effect: \'fade\',
rotate: true
}).slideshow({
clickable: false,
autoplay: <?php if (option::get(\'featured_rotate\') == \'on\') { echo "true"; } else { echo "false"; } ?>,
interval: <?php echo option::get(\'featured_interval\'); ?>
});
jq("#slider iframe").each(function(){
var ifr_source = jq(this).attr(\'src\');
var wmode = "?wmode=transparent";
jq(this).attr(\'src\',ifr_source+wmode);
});
});
})(jQuery);
</script>
<?php } ?>
<!--Start Cookie Script--> <script type="text/javascript" charset="UTF-8" src="http://chs03.cookie-script.com/s/00d482fb3a2cee25653ca3afd78479be.js"></script> <!--End Cookie Script-->
<script type="text/javascript">
$(document).ready(function(){
$(\'.best\').slick({
slidesToShow: 3,
slidesToScroll: 3,
autoplay: true
});
});
</script>
</body>
</html>
你能帮我找出代码中的错误吗