页面的head部分，需设置好页面元素的样式，接着引入jQuery库和必要的JS文件，代码如下：

<style type="text/css">
	/*重置浏览器默认样式*/
	html,body,ul,li,div,table,span,img {
		margin: 0px;
		padding: 0px;
	}
	
	html,
	body {
		margin: 0px;
		padding: 0px;
		height: 100%;
	}
	
	.slide_div {
		width: 100%;
		height: 100%;
	}
	
	.slide_img_div {
		position: relative;
	}
	
	.slide_img_ul {width:100%;height: 100%;overflow: hidden;}
	
	.slide_img_ul li img {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0px;
		top: 0px;
	}
	
	.slide_option {
		position: absolute;
		z-index: 999;
		bottom: 0px;
		width: 100%;
		background: black;
		opacity: 0.5;
		text-align: center;
		display: block;
			list-style: none;
	}
	
	.check_li {
		background: red !important;
		opacity: 1 !important;
	}
	
	.slide_option li {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background: #f0f0f0;
		margin: 5px;
		display: inline-block;
		cursor: pointer;
	}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>

页面的body部分，两个ul无序列表分别对应图片列表和焦点列表，代码如下：

<div id="" class="slide_div">
	<div id="slide_img_div">
		<div>
			<ul class="slide_img_ul">
				<li><img src="img/1.png" /></li>
				<li><img src="img/2.png" /></li>
				<li><img src="img/3.png" /></li>
				<li><img src="img/4.png" /></li>
			</ul>
			<ul class="slide_option">
				<li class="check_li"></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</div>
</div>