1.导入两个js的库  jquery 和 unslider

2.在html中引用  （不同版本）

<script type="text/javascript" src="../js/jquery-1.11.1.min.js" ></script>
<script type="text/javascript" src="../js/unslider.min.js"></script>

3.  html代码  （图片自己添加）

<div class="play">
	<ul>
		<li><img src="../img/img10/TB1GRxRfZLJ8KJjy0FnXXcFDpXa-1920-360.jpg"></li>
		<li><img src="../img/img10/TB1GRxRfZLJ8KJjy0FnXXcFDpXa-1920-360.jpg"></li>
		<li><img src="../img/img10/TB1GRxRfZLJ8KJjy0FnXXcFDpXa-1920-360.jpg"></li>
		<li><img src="../img/img10/TB1GRxRfZLJ8KJjy0FnXXcFDpXa-1920-360.jpg"></li>
	</ul>
</div>

4.css代码  

.play{
	width: 100%;
	margin: 0 auto;
	border: 1px solid red;
	overflow: hidden;
	height: 300px;
}
.play ul li{
	list-style: none;
	margin: 0;
	padding: 0;
	float: left;
	width: 100%;
	height: 300px;
}

5.js代码

<script>
	$(document).ready(function(e){
		$(".play").unslider();
	})
</script>

效果图：