jquery新闻幻灯显示

标记

我们将创建一个主容器“cn_wrapper”，包含“cn_preview”、和“cn_list”,其中预览区“cn_preview”包含一个预览图像，标题和，文章内容描述。
在左边的列表，将根据文章而编写简短的描述，在左侧，我们还将设置一个导航以便查看容器里的更多内容。

<div class="cn_wrapper">
	<div id="cn_preview" class="cn_preview">
		<div class="cn_content" style="top:5px;">
			<img src="images/polaroidphotobar.jpg" target='_blank'>jQuery</h1>

			<span class="cn_date">28/09/2010</span>
			<span class="cn_category">Tutorials</span>
			<p>In this tutorial we are going to create an...</p>
			<a href="http://tympanus.net/codrops/2010/09/28/polaroid-photobar-gallery/" target="_blank" class="cn_more">Read more</a>

		</div>
		<div class="cn_content">
			<img src="images/fullpageimagegallery.jpg" target='_blank'>jQuery</h1>
			<span class="cn_date">08/09/2010</span>

			<span class="cn_category">Tutorials</span>
			<p>In this tutorial we are going to create a stunning...
				</p>
			<a href="http://tympanus.net/codrops/2010/09/08/full-page-image-gallery/" target="_blank" class="cn_more">Read more</a>
		</div>

		...
	</div>
	<div id="cn_list" class="cn_list">
		<div class="cn_page" style="display:block;">
			<div class="cn_item selected">
				<h2>Polaroid Photobar Gallery with jQuery</h2>

				<p>Tutorial on how to create a gallery in polaroid style</p>
			</div>
			<div class="cn_item">
				<h2>Full Page Image Gallery with jQuery</h2>
				<p>Another tutorial on how to make a full gallery</p>

			</div>
			...
		</div>
		<div class="cn_page">
			...
		</div>
		<div class="cn_page">

			...
		</div>
		<div class="cn_nav">
			<a id="cn_prev" class="cn_prev disabled"></a>
			<a id="cn_next" class="cn_next"></a>
		</div>

	</div>
</div>