实现简单的轮播图

参考网站：http://sjnml.top:8080/Lanou/secondweek/10test.html

链接：https://pan.baidu.com/s/1vpo1YnQP_KAYusyXYWRzew 
提取码：shgu 

链接：https://pan.baidu.com/s/1GP8xdHocpQAqi8y0SomVkg 
提取码：rqt5 

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>

效果图：