我正在开发一个网站http://healthyoption.calgarywebcreations.com/，其中有幻灯片放映功能。幻灯片是视频，当有人点击视频幻灯片并开始播放视频时，我无法停止幻灯片转换。
这是wordpress
中头文件的代码<?php
/**
* The Header for our theme.
*
* Displays all of the <head> section and everything up till <div id="main">
*
* @package WordPress
* @subpackage Twenty_Ten
* @since Twenty Ten 1.0
*/
global $nobar;
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<script type="text/javascript" language="javascript"
src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready ( function(){
$('img').click(function (){
video = '<iframe width="500" height="315" src="'+ $(this).attr('data-video') +'"></iframe>';
$(this).replaceWith(video);
return false;
});
});
$(document).ready ( function(){
$('.video_wrap').click(mobilyslider.animationComplete());
});
</script>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php
/*
* Print the <title> tag based on what is being viewed.
*/
global $page, $paged;
wp_title( '|', true, 'right' );
// Add the blog name.
bloginfo( 'name' );
// Add the blog description for the home/front page.
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
echo " | $site_description";
// Add a page number if necessary:
if ( $paged >= 2 || $page >= 2 )
echo ' | ' . sprintf( __( 'Page %s', 'twentyten' ), max( $paged, $page ) );
?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php
/* We add some JavaScript to pages with the comment form
* to support sites with threaded comments (when in use).
*/
if ( is_singular() && get_option( 'thread_comments' ) )
wp_enqueue_script( 'comment-reply' );
/* Always have wp_head() just before the closing </head>
* tag of your theme, or you will break many plugins, which
* generally use this hook to add elements to <head> such
* as styles, scripts, and meta tags.
*/
wp_head();
?>
<!-- <script type="text/javascript" src="<?php //bloginfo('template_url');?>/js/jquery.js"></script> -->
<script type="text/javascript" src="<?php bloginfo('template_url');?>/js/mobilyslider.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url');?>/js/init.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url');?>/js/jquery.textshadow.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var option = {
x: -1,
y: -1,
color: "#618a08"
}
$(".main_menu ul li:hover a span, .main_menu ul li a:hover span,.main_menu ul li.current_page_item a span").textShadow(option );
var option2 = {
x: -1,
y: -1,
color: "#618a08"
}
$(".side_menu li a").textShadow(option2 );
})
</script>
<!-- body{background:<?php echo get_option('asf_color1');?>;} -->
<style type="text/css">
<!--#header-main{background:<?php echo get_option('asf_color2');?>;}#nav{background:<?php echo get_option('asf_color3');?>;}#slidernav{background:<?php echo get_option('asf_color4');?>;}.bottom{background:<?php echo get_option('asf_color5');?>;}.side_menu a{-webkit-border-radius: 2px; border-radius: 2px;border-top: solid 1px <?php echo get_option('asf_color8');?>;background: <?php echo get_option('asf_color6');?>;background: -moz-linear-gradient(-45deg, <?php echo get_option('asf_color6');?> 0%, <?php echo get_option('asf_color7');?> 100%);background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,<?php echo get_option('asf_color6');?>), color-stop(100%,<?php echo get_option('asf_color7');?>));background: -webkit-linear-gradient(-45deg, <?php echo get_option('asf_color6');?> 0%,<?php echo get_option('asf_color7');?> 100%);background: -o-linear-gradient(-45deg, <?php echo get_option('asf_color6');?> 0%,<?php echo get_option('asf_color7');?> 100%);background: -ms-linear-gradient(-45deg, <?php echo get_option('asf_color6');?> 0%,<?php echo get_option('asf_color7');?> 100%);background: linear-gradient(135deg, <?php echo get_option('asf_color6');?> 0%,<?php echo get_option('asf_color7');?> 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='<?php echo get_option('asf_color6');?>', endColorstr='<?php echo get_option('asf_color7');?>',GradientType=1 );} -->
</style>
</head>
<body <?php body_class(); ?>>
<div id="header-main">
<div id="wrapper" class="hfeed">
<?php if ($nobar) { ?>
<div id="header" style="height:300px;">
<?php } else { ?>
<div id="header-logo">
<?php } ?>
<h1 class="logo">
<a href="<?php echo get_option('home'); ?>/" title="<?php bloginfo('name'); ?>"></a>
</h1>
</div>
</div>
</div>
<div id="nav">
<div id="wrapper" class="hfeed">
<?php wp_nav_menu( array( 'container_class' => 'main_menu', 'theme_location' => 'primary', 'menu' => 'Main menu', 'link_before' => '<span>', 'link_after' => '</span>' ) ); ?>
<div class="clear"></div>
</div>
</div>
<?php if ($nobar) { } else { ?>
</div>
<div id="slidernav">
<div id="wrapper" class="hfeed">
<?php wp_nav_menu( array( 'container_class' => 'side_menu', 'theme_location' => 'primary', 'menu' => 'Side menu' ) ); ?>
<div class="slider">
<div class="sliderContent">
<div class="item">
<div class="video_wrap"> <img src="<?php bloginfo("template_directory"); ?>/images/slider_img_007.png" data-video="http://healthyoption.calgarywebcreations.com/custom-video-player?v=YTc3WGpZdW0wVGt8M3xvcmlnaW5hbHx8MTEwMDAx"/>
<div class="shadow7"></div>
<!-- <span class="play" id="pl">play</span> -->
</div>
<div class="col_r">
<h2>Live Blood Analysis</h2>
<h3>- The Window To Your Health</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non lacus sapien, quis accumsan sapien. Aenean lobortis venenatis magna non laoreet. Donec risus tellus, tincidunt at suscipit quis, </p>
</div>
</div>
<div class="item">
<div class="video_wrap"> <iframe style="padding-left:6px;padding-top:5px; position:relative;z-index:2000;"width="513" height="312" src="http://healthyoption.calgarywebcreations.com/custom-video-player?v=LW9Pa2ZSckNNeGt8M3xvcmlnaW5hbHx8MzAwMDAx" frameborder="0" allowfullscreen></iframe>
<div class="shadow"></div>
<!--<span class="play">play</span>-->
</div>
<div class="col_r">
<h2>Live Blood Analysis</h2>
<h3>- The Window To Your Health</h3>
<p>Mauris non lacus sapien, quis accumsan sapien. Aenean lobortis venenatis magna non laoreet. Donec risus tellus, tincidunt at suscipit quis, </p>
</div>
</div>
<div class="item">
<div class="video_wrap">
<img src="<?php bloginfo("template_directory"); ?>/images/slider_img_03.jpg" alt="image" />
<div class="shadow"></div>
<span class="play">play</span>
</div>
<div class="col_r">
<h2>Live Blood Analysis</h2>
<h3>- The Window To Your Health</h3>
<p>Mauris non lacus sapien, quis accumsan sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lobortis venenatis magna non laoreet. Donec risus tellus, tincidunt at suscipit quis, </p>
</div>
</div>
</div>
</div>
<?php } ?>
<div class="clear"></div>
</div>
</div><!-- #slidernav -->
</div>
<div id="wrapper" class="hfeed">
<div id="main">
这是一个名为mobily slider
的插件文件/* ==========================================================
* MobilySlider
* date: 20.1.2010
* author: Marcin Dziewulski
* last update: 02.02.2011
* web: http://www.mobily.pl or http://playground.mobily.pl
* email: hello@mobily.pl
* Free to use under the MIT license.
* ========================================================== */
(function($){$.fn.mobilyslider=function(options){var defaults={content:".sliderContent",children:"div",transition:"horizontal",animationSpeed:300,autoplay:false,autoplaySpeed:3000,pauseOnHover:false,bullets:true,arrows:true,arrowsHide:true,prev:"prev",next:"next",animationStart:function(){},animationComplete:function(){}};var sets=$.extend({},defaults,options);return this.each(function(){var $t=$(this),item=$t.children(sets.content).children(sets.children),l=item.length-1,w=item.width(),h=item.height(),step=0,play,bullets,arrows,z,active,bullet;var slider={init:function(){slider.data();if(sets.bullets){slider.bullets.create()}if(sets.arrows){slider.arrows.create()}if(sets.autoplay){slider.autoplay()}slider.triggers()},data:function(){item.each(function(i){$(this).css("z-index",-(i-l))});if(sets.transition=="fade"){item.hide().eq(0).show()}},zindex:{prev:function(){step==l?item.eq(0).css("z-index",l+3):item.css("z-index",l+1);item.eq(step).css("z-index",l+4).next(item).css("z-index",l+2)},next:function(){item.css("z-index",l+1).eq(step).css("z-index",l+3).prev(item).css("z-index",l+2)},bullets:function(){item.css("z-index",l+1).eq(active).css("z-index",l+2);item.eq(step).css("z-index",l+3)},trigger:function(){if(z==1){slider.zindex.next()}else{if(z==-1){slider.zindex.prev()}else{if(z==0){slider.zindex.bullets()}}}}},slide:{left:function(sign){sets.animationStart.call(this);item.eq(step).animate({left:sign+"="+w},sets.animationSpeed,function(){slider.zindex.trigger()}).animate({left:0},sets.animationSpeed+200,function(){sets.animationComplete.call(this)})},top:function(sign){sets.animationStart.call(this);item.eq(step).animate({top:sign+"="+h},sets.animationSpeed,function(){slider.zindex.trigger()}).animate({top:0},sets.animationSpeed+200,function(){sets.animationComplete.call(this)})},fade:function(){sets.animationStart.call(this);item.fadeOut(sets.animationSpeed).eq(step).fadeIn(sets.animationSpeed,function(){sets.animationComplete.call(this)})}},animation:{previous:function(){step==0?step=l:step--;z=-1;switch(sets.transition){case"horizontal":slider.slide.left("-");break;case"vertical":slider.slide.top("+");break;case"fade":slider.slide.fade();break}},next:function(){step==l?step=0:step++;z=1;switch(sets.transition){case"horizontal":slider.slide.left("+");break;case"vertical":slider.slide.top("-");break;case"fade":slider.slide.fade();break}}},autoplay:function(){play=setInterval(function(){slider.animation.next();if(sets.bullets){setTimeout(function(){slider.bullets.update()},sets.animationSpeed+300)}},sets.autoplaySpeed)},pause:function(){clearInterval(play)},bullets:{create:function(){$t.append($("<div />").addClass("sliderBullets"));bullets=$t.find(".sliderBullets");for(i=0;i<=l;i++){bullets.append($("<a />").attr({href:"#",rel:i}).text(i))}},trigger:function(){bullet=bullets.find("a");bullet.eq(0).addClass("active");bullet.click(function(){var b=$(this),rel=b.attr("rel");active=bullet.filter(".active").attr("rel");step=rel;sign=rel>active?"+":"-";z=0;if(!b.hasClass("active")){switch(sets.transition){case"horizontal":slider.slide.left(sign);break;case"vertical":slider.slide.top(sign);break;case"fade":slider.slide.fade();break}}bullet.removeClass("active");b.addClass("active");return false})},update:function(){bullet.removeClass("active").eq(step).addClass("active")}},arrows:{create:function(){$t.append($("<div />").addClass("sliderArrows"));arrows=$t.find(".sliderArrows");arrows.append($("<a />").attr("href","#").addClass(sets.prev).text("Previous"));arrows.append($("<a />").attr("href","#").addClass(sets.next).text("Next"))},trigger:function(){arrows.find("."+sets.prev).click(function(){slider.animation.previous();if(sets.bullets){slider.bullets.update()}return false});arrows.find("."+sets.next).click(function(){slider.animation.next();if(sets.bullets){slider.bullets.update()}return false});if(sets.arrowsHide){arrows.hide();$t.hover(function(){arrows.show()},function(){arrows.hide()})}}},triggers:function(){if(sets.arrows){slider.arrows.trigger()}if(sets.bullets){slider.bullets.trigger()}if(sets.pauseOnHover){$t.hover(function(){slider.pause()},function(){slider.autoplay()})}}};slider.init()})}}(jQuery));
和init.js文件是
jQuery(function(){
jQuery('.slider').mobilyslider({
content: '.sliderContent',
children: 'div',
transition: 'fade',
animationSpeed: 900,
autoplay: true,
autoplaySpeed: 5000,
pauseOnHover: true,
bullets: true,
arrows: true,
arrowsHide: true,
prev: 'prev',
next: 'next',
animationStart: function(){
$('.slider').click},
animationComplete: function(){}
});
jQuery('#access li:first').addClass('first');
jQuery('#access li:last').addClass('last');
});
jQuery(document).ready(function(){
jQuery('.side_menu li a').each(function(){
if(jQuery(this).height() > 18){
jQuery(this).css('padding-top','4px');
jQuery(this).css('padding-bottom','0px');
}
});
});
我想在有人点击视频和视频播放时停止幻灯片转换
What i have done is this
$(document).ready ( function(){
$('.video_wrap').click(mobilyslider.animationComplete());
});
我是jquery的新手，也许我没有以正确的方式调用mobilyslider.animationComplete（）的函数
有人可以帮助我