javascript - JS 轮播不会移动

Question

我在常规 html 文档中处理旋转木马，当我将它放入 wordpress 时，旋转木马不会移动，我无法判断问题是否是因为 wordpress。代码与 html 文档中的相同。

我的代码:

JSFIDDLE

var startingItem = 3;

$(document).ready(function() {
	$('.carousel_data .carousel_item').each(function(){	
		$('#carousel').append( $(this).find('.image').html() );
	});
	createCarousel();
	showCaption();
});

function createCarousel(){
	$('div#carousel').roundabout({
		startingChild: window.startingItem,
		childSelector: 'img',
		tilt: -0,
		minOpacity:-1,
		minScale: .5,
		duration: 1200,
		clickToFocus: true,
		clickToFocusCallback: showCaption
	});
	createCustomButtons();
}

function createCustomButtons(){
	
	$('.nextItem').click(function(){
		hideCaption();
		$('div#carousel').roundabout('animateToNextChild', showCaption);
	});
	
	$('.prevItem').click(function(){
		hideCaption();
		$('div#carousel').roundabout('animateToPreviousChild', showCaption);
	});
	
	$('div#carousel img').click(function(){
		hideCaption();
	});
}

function hideCaption(){
	$('#captions').animate({'opacity':0}, 250);
}

function showCaption(){
	var childInFocus = $('div#carousel').data('roundabout').childInFocus
	var setCaption = $('.carousel_data .carousel_item .caption:eq('+childInFocus+')').html();
	$('#captions').html(setCaption);
	var newHeight = $('#captions').height()+'px';
	$('.caption_container').animate({'height':newHeight}, 500, function(){
		$('#captions').animate({'opacity':1}, 250);	
	});
	
}

.my_carousel {     position: relative;
    width: 100%;
    margin: 0px;
    /* background-color: #fff; */
    /*margin: 5% auto 20px auto;*/
    top: -100px; 
    z-index: -9999;}

.carousel_container { height: 350%; margin: 0px;     width: 70%;
    padding: 15% 0 7% 10%;}
#carousel { margin: 0px auto 0px auto; width: 100%; height: 40%;     margin-left: 15%;}
#carousel img { width: 250px; height: 200px; cursor: pointer; border-radius: 5%; border: 4px solid black; padding: .5em;}
.nextItem { position: absolute; top: 23%; left: 0px; z-index: 1001; cursor: pointer; }
.prevItem { position: absolute; top: 23%; right: 0px; z-index: 1002; cursor: pointer; }

.caption_container {    width: 100%;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    background: #173D50;
    padding: 2em;
    color: white;
    /* margin-left: -22%; */ }
#captions h2 { font-family: Georgia; font-size: 32px; font-weight: normal; margin: 0px 0px 5px 0px; color: #6d8824; }
#captions p { font-family: Arial; font-size: 14px; margin: 0px 0px 0px 3px; }

.leaves { position: absolute; top: 270px; left: 102px; z-index: 1000; }

.carousel_data { display: none; }

.image {}


.caption_container {
    height: 30%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/roundabout/2.4.2/jquery.roundabout.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="carousel_data">
				
				<!-- begin items -->

				<!-- Item -->
				<div class="carousel_item">
					<div class="image">
						<img src="<?php bloginfo('template_url'); ?>/images/teapots_green.png" alt="teapot_green" />
					</div>
					<div class="caption">
						<h2>iPhone Apps
     </h2>
						<p>Having your channel in the Apple app store is a sure sign your company and brand is moving forward. In 7 years Apple has sold 500 million iPhones and growing daily. Having your channel in the app store gives your channel access to a huge potential audience. We develop your TV channel into an app that is only a finger touch away from your audience. One click and your audience can access both your streaming, and VOD archived content. Go beyond an average channel and provide push notification to all your viewers, interact with your audience by allowing feedback through your app and much more. You are only limited by your imagination! Even more powerful is the ability to broadcast live events to your audiences iPhone (and all platforms we offer). If your ready to put your channel/business to the next level then get your iPhone app going today.</p>
						<button class="btn">Contact us</button>
     <button class="btn">Pricing</button>
					</div>
				</div>
				
				<!-- Item -->
				<div class="carousel_item">
					<div class="image">
						<img src="<?php bloginfo('template_url'); ?>/images/teapots_steel.png" alt="teapot_steel" />
					</div>
					<div class="caption">
						<h2>Roku Channel Development</h2>
						<p>Roku Channel Development Roku has over 12 million devices sold and millions tuning in to watch new and intriguing content. Tap into one of the fastest growing segment in video distribution. We develop custom ROKU channels that fit your needs. From VOD, STREAMING and more. We can produce netflix style apps or just simple streaming channels. Charge subscription fees or allow your video content free of charge it is all up to you and your creative mind! If one thinks about the difference in trying to start a cable channel verses a ROKU channel it becomes clear that ROKU is much more cost effective. Cable negotiations can be long and costly and can drag out for months or even years. Cable subscriptions are plummeting due to consumer options such as ROKU and FIRETV shifting the balance of content distribution and leveling the playing field from large mega corporations to anyone that can produce great content. Its time your business takes advantage of this growing segment. </p>
						<a href="#popup1"><div class="placeholder"><h6>Video</h6></div></a>

     <div id="popup1" class="overlay">
	 <div class="popup">
		<h2>Here i am</h2>
		<a class="close" href="#">&times;</a>
		<div class="content">
						<iframe src="xxxxxxxxx&id=955height=470&width=600" seamless="seamless"  scrolling="no" frameBorder="0" width="600" height="470" > </iframe>

		</div>
	 </div>
     </div>
     <button class="btn">Contact us</button>
     <button class="btn">Pricing</button>
					</div>
				</div>
				
				<!-- Item -->
				<div class="carousel_item">
					<div class="image">
						<img src="<?php bloginfo('template_url'); ?>/images/teapots_gold.png" width="150" height="100" alt="teapot_gold" />
					</div>
					<div class="caption">
						<h2>Internet TV</h2>
						<p>Internet TV means different things to different people. However the universal term is to be understood as TV that you watch on the internet. The internet has a potential audience of billions of people and it is clearly understood that internet TV is the fastest growing TV market. With our Internet TV packages you can create your own internet TV channel on your own website (or we can create one for you) charge subscription, archive past shows and much more. More people watch TV on the internet than they do from satellite and cable combined. This is means that this is a huge potential for your company to reach huge audiences. Here is one of our sample sites www.dvtvonline.com for you to get an understanding of what we can do for you.</p>
						<a href="#popup1"><div class="placeholder">     <h6>Video</h6></div></a>

     <div id="popup1" class="overlay">
	 <div class="popup">
		<h2>Here i am</h2>
		<a class="close" href="#">&times;</a>
		<div class="content">
			<iframe src="xxxxxxxxx&id=960height=470&width=600" seamless="seamless"  scrolling="no" frameBorder="0" width="600" height="470" > </iframe>
		</div>
	 </div>
     </div>
     <button class="btn">Contact us</button>
     <button class="btn">Pricing</button>
					</div>
				</div>			
				
				<!-- Item -->
				<div class="carousel_item">
					<div class="image">
						<img src="<?php bloginfo('template_url'); ?>/images/teapots_orange.png" width="150" height="100" alt="teapot_orange" />
					</div>
					<div class="caption">
						<h2>Android Apps</h2>
						<p>Over 1 Billion Android devices sold! That should speak for itself why you want your channel/business on the Android platform and offered in the Google play store. Our service will take your TV channel and brand Id and wrap them up in a beautiful flexible app to include your Live, Streaming, and VOD/archived content. Send push notifications to all your viewers, interact with your viewers through feedback and even allow your viewers to post pictures to a gallery inside your app. Anything is possible and only limited by your imagination.</p>
		     				<a href="#popup1"><div class="placeholder">     <h6>Video</h6></div></a>

     <div id="popup1" class="overlay">
	     <div class="popup">
		<h2>Android Apps</h2>
		<a class="close" href="#">&times;</a>
		<div class="content">
	     		<iframe src="xxxxxxxxx&id=957&height=470&width=600" seamless="seamless"  scrolling="no" frameBorder="0" width="600" height="470" > </iframe>
		</div>
	 </div>
     </div>
     <button class="btn">Contact us</button>
     <button class="btn">Pricing</button>
					</div>
				</div>
				
				<!-- Item -->
				<div class="carousel_item">
					<div class="image">
						<img src="<?php bloginfo('template_url'); ?>/images/teapots_blue.png" width="150" height="100" alt="teapot_blue" />
			     		</div>
				     	<div class="caption">
						     <h2>Google Chrome Cast</h2>
						     <p>Chrome Cast is catching on like a wild fire as millions of people are switching off their cable and satellite service and watching Chrome-Cast. Give your company and channel the chance to be seen by millions when we develop for you your own Chrome Cast app/channel. If you want to be seen as the next big thing, then you have to do big things and Chrome Cast      is certainly that!</p>
		     				<a href="#popup1"><div class="placeholder">     <h6>Video</h6></div></a>

     <div id="popup1" class="overlay">
	     <div class="popup">
		     <h2>Here i am</h2>
		     <a class="close" href="#">&times;</a>
		     <div class="content">
			     <iframe src="xxxxxxxxx&id=955height=470&width=959"      seamless="seamless"  scrolling="no" frameBorder="0" width="600" height="470" >      </iframe>
     		</div>
     	</div>
     </div>
     <button class="btn">Contact us</button>
     <button class="btn">Pricing</button>
		     			</div>
		     		</div>
				
			     	<!-- Item -->
			     	<div class="carousel_item">
				     	<div class="image">
						     <img src="<?php bloginfo('template_url'); ?>/images/teapots_iron.png" width="150" height="100" alt="teapot_iron" />
				     	</div>
     					<div class="caption">
						     <h2>Amazon Fire TV</h2>
						     <p>FIRE TV Amazons version of IPTV and competition to ROKU is catching on rapidly. In fact Amazon FIRE TV is doing so well it is reported it could reshape the streaming market. With Amazon a international seller we can expect FIRETV sales to only increase not only domestically in the USA but also internationally. Fire TV is available in Germany, USA, Austria, and the United Kingdom. Having your own channel on FIRETV will greatly increase your exposure and distribution of your content to millions internationally. We develop FIRE TV that are only limited by your imagination. You can charge subscription fees or allow your content to stream for free. Fire TV is sold internationally through amazon.com and other retailers.</p>
					
	     <a href="#popup1"><div class="placeholder"><h6>Video</h6></div></a>

     <div id="popup1" class="overlay">
	     <div class="popup">
		     <h2>Here i am</h2>
		     <a class="close" href="#">&times;</a>
	     	<div class="content">
	     		<iframe src="xxxxxxxxxid=958height=470&width=600" seamless="seamless"  scrolling="no" frameBorder="0" width="600" height="470" >      </iframe>
     		</div>
	     </div>
     </div>
     <button class="btn">Contact us</button>
     <button class="btn">Pricing</button>
					</div>
				</div>

				
				<!-- end items -->
				
			</div>

Answer 1

您是否在 WordPress 主题中包含了主要的 jQuery 库？ JS 轮播需要主 jQuery 库才能运行。

并且您需要在非冲突模式下正确地在 WordPress 中排队 Javascript 库；见https://developer.wordpress.org/themes/basics/including-css-javascript/以及该页面上的示例，即在您主题的 functions.php 文件中:

wp_enqueue_script( 'script', get_template_directory_uri() . '/js/myscript.js', array ( 'jquery' ), 1.1, true);

之后，如果轮播仍然无法工作，请使用浏览器中的开发工具查找并修复 Javascript 错误。