<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
*{padding:0;margin:0}
ul{list-style:none}
.slider-focus{width:670px;height:240px;overflow:hidden;position:relative;margin:100px auto}
.slider-focus .slider{width:3500px; position:absolute; left:0px; top:0px; height:240px}
.slider-focus .slider li{float:left;}
.slider-focus .btns{position: absolute; right: 0px; bottom: 5px}
.slider-focus .btns li{width:18px;height:18px; float:left; background:#fff; margin-right:5px; cursor:pointer}
.slider-focus .btns li.cur{background:#f60}
</style>
</head>
<body>
<div class="slider-focus">
<ul class="slider">
<li><img src="http://img14.360buyimg.com/da/g13/M03/0D/0D/rBEhVFJCwIQIAAAAAADs5q4P0g8AADgxQMhvMIAAOz-234.jpg"></li>
<li><img src="http://img11.360buyimg.com/da/g13/M05/0D/0A/rBEhUlJCfiYIAAAAAADqWhDpUVsAADfqgDwmw4AAOpy960.jpg"></li>
<li><img src="http://img11.360buyimg.com/da/g14/M07/11/15/rBEhVVI_5zMIAAAAAADDgfSaKlQAADc8AFf20cAAMOZ670.jpg"></li>
<li><img src="http://img11.360buyimg.com/da/g13/M03/0D/13/rBEhVFJD_HcIAAAAAADsfenKOe0AADjVwPmryQAAOyV341.jpg"></li>
<li><img src="http://img14.360buyimg.com/da/g15/M00/0C/0E/rBEhWlJEHcwIAAAAAAEFI3XGv_YAADj-wC9W60AAQU7805.jpg"></li>
</ul>
<ul class="btns">
<li class="cur"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="jquery-1.9.1.js"></script>
<script src="slider.js"></script>
</body>
</html>
