插件中使用的精美插图来自于亚娜芒果-花瓣

html结构类似这样:创建一个div,给它一个classhs_container,在它里面放置各种图片,每组图片用一个div包起来,每组的第一张图片设置class为hs_visible,这样可以用css来控制首先看到的是它。

HTML

<div id="hs_container" class="hs_container">
	<div class="hs_area hs_area1">
		<img class="hs_visible" src="images/area1/1.jpg" alt=""/>
		<img src="images/area1/2.jpg" alt=""/>
		<img src="images/area1/3.jpg" alt=""/>
	</div>
	<div class="hs_area hs_area2">
		<img class="hs_visible" src="images/area2/1.jpg" alt=""/>
		<img src="images/area2/2.jpg" alt=""/>
		<img src="images/area2/3.jpg" alt=""/>
	</div>
	<div class="hs_area hs_area3">
		<img class="hs_visible" src="images/area3/1.jpg" alt=""/>
		<img src="images/area3/2.jpg" alt=""/>
		<img src="images/area3/3.jpg" alt=""/>
	</div>
	<div class="hs_area hs_area4">
		<img sclass="hs_visible" src="images/area4/1.jpg" alt=""/>
		<img src="images/area4/2.jpg" alt=""/>
		<img src="images/area4/3.jpg" alt=""/>
	</div>
	<div class="hs_area hs_area5">
		<img class="hs_visible" src="images/area5/1.jpg" alt=""/>
		<img src="images/area5/2.jpg" alt=""/>
		<img src="images/area5/3.jpg" alt=""/>
	</div>
</div>