创建一个流畅的自动播放特色内容滑块

我喜欢 Coda Slider jQuery 插件。 我最近用它构建了几个选项卡式“小部件”。 一个在 CSS-Tricks 的侧边栏中，用于显示 Script & Style 链接、特色帖子和热门帖子。 这仅仅是一种在小区域展示大量内容的有趣方式。 我还在 NETTUTS 的一篇文章 中使用了它，用于类似的目的。

这两个示例几乎都“开箱即用”地使用了 Coda Slider。 当然，设计被大量更改以适应工作，但实际功能没有任何更改。 我最近被要求构建一个“特色内容区域”。 Coda Slider 几乎完美地满足了我的需求，但它需要进行一些功能上的调整才能实现我想要的功能。 非常感谢 Benjamin Sterling 帮助我解决了一些问题。

查看演示   下载文件

功能清单

就像我说的，Coda Slider 已经完成了 90%。 有一个主要内容区域（如果你愿意的话，可以称为“面板”），它从左到右滑动，每个面板都有不同的独特内容。 通常面板数量是固定的，但代码的编写方式使得添加或删除面板不会太麻烦。 有一些链接充当导航，可以快速跳转到任何特定的面板。 这些链接可以是任何东西（文本超链接、缩略图等），并链接到一个唯一的哈希值 URL（每个面板如果需要，都有一个唯一的 URL）。 Coda Slider 开箱即用地提供所有这些功能。

以下是我们额外需要的功能

• 面板中不同类型的自定义内容。 我们已经可以将任何内容放在面板中，但为了方便起见，将准备几个不同的格式。 主要格式是与整个面板大小相同的图像，但包含文本叠加。 已完成。
• 自动播放。 你仍然可以点击缩略图跳转到任何面板，但滑块会自动缓慢地循环播放面板。 已添加，请参见下文。
• 箭头指示器。 为了直观地指示当前查看的是哪个面板，会在缩略图上方显示一个小箭头指向面板。 已添加。

让我们来看看 HTML、CSS 和 JavaScript。

HTML

以下是仅滑块本身的框架 HTML

<div class="slider-wrap">
	<div id="main-photo-slider" class="csw">
		<div class="panelContainer">

			<div class="panel" title="Panel 1">
				<div class="wrapper">
					<!-- REGULAR IMAGE PANEL -->
					<img src="images/tempphoto-1.jpg" alt="temp" />
					<div class="photo-meta-data">
						Photo Credit: <a href="http://flickr.com/photos/astrolondon/2396265240/">Kaustav Bhattacharya</a><br />
						<span>"Free Tibet" Protest at the Olympic Torch Rally</span>
					</div>
				</div>
			</div>
			<div class="panel" title="Panel 2">
				<div class="wrapper">
					<!-- PANEL CONTENT -->
				</div>
			</div>		
			<div class="panel" title="Panel 3">
				<div class="wrapper">
					<!-- EXAMPLE OF OTHER PANEL POSSIBILITIES -->
					<img src="images/scotch-egg.jpg" alt="scotch egg" class="floatLeft"/>
			
					<h1>How to Cook a Scotch Egg</h1>
			
					<ul>
						<li>6 hard-boiled eggs, well chilled (i try to cook them to just past soft boiled stage, then stick them in the coldest part of the fridge to firm up)</li>
						<li>1 pound good quality sausage meat (i used ground turkey meat, seasoned with sage, white pepper, salt and a tiny bit of maple syrup)</li>
						<li>1/2 cup AP flour</li>
						<li>1-2 eggs, beaten</li>
						<li>3/4 cup panko-style bread crumbs</li>
						<li>Vegetable oil for frying</li>
					</ul>
				</div>
			</div>
			<div class="panel" title="Panel 4">
				<div class="wrapper">
					<!-- PANEL CONTENT -->
				</div>
			</div>
			<div class="panel" title="Panel 5">
				<div class="wrapper">
					<!-- PANEL CONTENT -->
				</div>
			</div>
			<div class="panel" title="Panel 6">
				<div class="wrapper">
					<!-- PANEL CONTENT -->
				</div>
			</div>

		</div>
	</div>

	<!-- TO MAKE THESE THUMBNAILS ACTUALLY WORK, BOTH THE HASH VALUE (#1, ETC.)
          AND THE CLASS="CROSS-LINK" ARE REQUIRED -->

	<a href="#1" class="cross-link active-thumb"><img src="images/tempphoto-1thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a>
	<div id="movers-row">
		<div><a href="#2" class="cross-link"><img src="images/tempphoto-2thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
		<div><a href="#3" class="cross-link"><img src="images/tempphoto-3thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
		<div><a href="#4" class="cross-link"><img src="images/tempphoto-4thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
		<div><a href="#5" class="cross-link"><img src="images/tempphoto-5thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
		<div><a href="#6" class="cross-link"><img src="images/tempphoto-6thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
	</div>

</div>

CSS

此示例的完整 CSS 包含基本重置、一些实用程序样式和基本结构。 在下面，我只会向您展示与滑块本身相关的 CSS，但您可以 在此查看完整 CSS。

.slider-wrap						{ width: 419px; position: absolute; top: 87px; left: 40px; }			
.stripViewer .panelContainer 
.panel ul						{ text-align: left; margin: 0 15px 0 30px; }
.stripViewer						{ position: relative; overflow: hidden; width: 419px; height: 285px; }
.stripViewer .panelContainer				{ position: relative; left: 0; top: 0; }
.stripViewer .panelContainer .panel			{ float: left; height: 100%; position: relative; width: 419px; }
.stripNavL, .stripNavR, .stripNav			{ display: none; }
.nav-thumb 						{ border: 1px solid black; margin-right: 5px; }
#movers-row						{ margin: -43px 0 0 62px; }
#movers-row div					{ width: 20%; float: left; }
#movers-row div a.cross-link 				{ float: right; }
.photo-meta-data					{ background: url(images/transpBlack.png); padding: 10px; height: 30px; 
											  margin-top: -50px; position: relative; z-index: 9999; color: white; }
.photo-meta-data span 					{ font-size: 13px; }
.cross-link						{ display: block; width: 62px; margin-top: -14px; 
											  position: relative; padding-top: 15px; z-index: 9999; }
.active-thumb 						{ background: transparent url(images/icon-uparrowsmallwhite.png) top center no-repeat; }

其中任何以“.strip”开头的样式都与滑块本身的核心有关，包括设置面板和它们周围的包装器，以及使滑块正常工作所需的 CSS 魔术。 从“.nav-thumb”以下的样式是针对此示例的特定内容。 缩略图有细黑色的边框。 元数据部分被图像推到面板之外，但随后使用负上边距和透明黑色背景强制回到面板内。

“.active-thumb”类也非常重要，如果缩略图包含此类，它将获得应用的特殊背景，即我们希望用于指示当前面板的白色箭头。 此类将在 JavaScript 中添加和删除。

JavaScript

在 HTML 的标题部分，您需要包含 jQuery 和所有插件文件。 最基本的代码如下所示

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script>
<script type="text/javascript" src="js/coda-slider.1.1.1.pack.js"></script>
	
<script type="text/javascript">
	$(function(){
			
		$("#main-photo-slider").codaSlider();

	});
</script>

这将激活滑块，但请记住，我们还需要实现一些额外的功能。 我们可以通过编写自己的函数来添加这些功能，而不是直接修改插件本身。 本质上，为了实现“自动播放”效果，我们将在每 3 秒触发下一个缩略图的点击事件。 我们将函数命名为“theInterval”，还需要几个变量，所以先设置它们。

var theInt = null;
var $crosslink, $navthumb;
var curclicked = 0;

theInterval = function(cur){
	clearInterval(theInt);
	
	if( typeof cur != 'undefined' )
		curclicked = cur;
	
	$crosslink.removeClass("active-thumb");
	$navthumb.eq(curclicked).parent().addClass("active-thumb");
		$(".stripNav ul li a").eq(curclicked).trigger('click');
	
	theInt = setInterval(function(){
		$crosslink.removeClass("active-thumb");
		$navthumb.eq(curclicked).parent().addClass("active-thumb");
		$(".stripNav ul li a").eq(curclicked).trigger('click');
		curclicked++;
		if( 6 == curclicked )
			curclicked = 0;
		
	}, 3000);
};

但我们还没有完成。 我们需要调用我们的函数，首先要做到这一点。 我们还需要正确处理手动点击缩略图的事件。 我们希望手动点击事件使用相同的函数，以便正确重置“当前”缩略图，并且不会出现奇怪的跳跃。 在我们的函数之后，现在可以添加以下最终代码，在 DOM 就绪时执行

$(function(){
	
	$("#main-photo-slider").codaSlider();
	
	$navthumb = $(".nav-thumb");
	$crosslink = $(".cross-link");
	
	$navthumb
	.click(function() {
		var $this = $(this);
		theInterval($this.parent().attr('href').slice(1) - 1);
		return false;
	});
	
	theInterval();
});

另外需要注意几点。 请注意函数中的数字“6”是硬编码的。 如果更改了缩略图数量，则需要在此处也进行更改。 此外，您可能注意到了看似奇怪的触发点击事件的元素（“.stripNav ul li a”……它在哪里？！）。 您会注意到它不在我们的 HTML 中。 实际上，Coda Slider 插件在运行时会根据面板数量自动生成此无序列表。 在某些情况下，这非常方便，在我们这个示例中，我们已在 CSS 中将其隐藏。 但我们在函数中使用它们，因为它们将是触发点击事件最可靠的元素。 无论如何，它们都会存在，并且即使我们不使用缩略图导航，此示例仍将继续工作并自动播放。

查看演示   下载文件

更新：自动播放

感谢 Jack Reichert

var $j = jQuery.noConflict();

var theInt = null;
var curclicked = 0;
var stop = 0;

theInterval = function(cur){
       clearInterval(theInt);

       theInt = setInterval(function(){
               $j(".coda-nav-right a").eq(curclicked).trigger('click');
               curclicked++;
               if( 10 == curclicked )
                       curclicked = 0;
               $j("#stop").click(
                       function(){
                               if (stop==0){
                               clearInterval(theInt);
                               stop=1;}
                       });
       }, 750);
       $j("#stop").click(
               function(){
                       stop=0;
                       theInterval();
               }
       );
};
$j(function(){
       $j("#main-photo-slider").prepend('<div id="stop">Start/Stop</div>');
       $j("#main-photo-slider").codaSlider();
       theInterval();
});