好看的图片轮播

 图片轮播使用简单的原生JS，更换 <img>的url就可以，但是这样做出来的不够美观，此处介绍两种方式来对图片轮播进行美化。（在我的博文中多次提到了AUI框架，我会在下一篇文章中详细介绍一下AUI。AUI官网地址：http://www.auicss.com）

第一种：使用AUI框架完成图片轮播

首先在HTML文件中引入以下文件：

<link rel="stylesheet" type="text/css" href="aui-20170109-v2.1/css/aui.css" />
<link rel="stylesheet" type="text/css" href="aui-20170109-v2.1/css/aui-slide.css" />
<script type="text/javascript" src="aui-20170109-v2.1/script/aui-slide.js"></script>

HTML部分的代码：

<div class="aui-content-padded">
        <div id="aui-slide3">
	<div class="aui-slide-wrap">
		<div class="aui-slide-node bg-dark">
		<img src="aui-20170109-v2.1/image/l1.png" />
	</div>
	<div class="aui-slide-node bg-dark">
		<img src="aui-20170109-v2.1/image/l2.png" />
	</div>
		<div class="aui-slide-node bg-dark">
		<img src="aui-20170109-v2.1/image/l3.png" />
	</div>
	</div>
	<div class="aui-slide-page-wrap">
	<!--分页容器-->
</div>
</div>
</div>

JS部分的代码：

var slide = new auiSlide({
   container:document.getElementById("aui-slide3"),   //容器
   "width":300,  //宽度
   "height":240,   //高度
   "speed":500,   //图片轮换时的速度
   "autoPlay": 3000,   //自动播放（一张图片的停留时间）
   "loop":true,   //是否循环
   "pageShow":true,   //是否显示分页器
   "pageStyle":'line',  //分页器样式：dot（圆点）,line（横线）
   'dotPosition':'center'   //当分页器样式为dot时控制分页器位置：left,center,right
})；

第二种：使用原生JS进行图片轮播

HTML代码：

<div id="div1">
	<img src="../img/l1.png" alt="1" width="300" />
	<img src="../img/l2.png" alt="2" width="300" />
	<img src="../img/l3.png" alt="3" width="300"/>
	<img src="../aui-20170109-v2.1/image/l3.png" alt="4"  width="300"/>
</div>

CSS代码：

<style>
	#div1 {
		width: 300px;
		height: 200px;
		border: 1px solid gray;
		margin: 0 auto;
		position: relative;
		overflow: hidden;/*溢出隐藏*/
	}
			
	#div1 img {
		height: 100%;
		width: 100%;
		position: absolute;
	}
	</style>

JS代码：

<script>
   //获取页面元素
   var div1 = document.getElementById('div1');
   var imgs = div1.getElementsByTagName('img');//定义图片数组
   var maxRange = 300*(imgs.length-1)+'px';
   //初始化页面图片的位置
   window.onload = function() {
      for(var i = 0; i < imgs.length; i++) {
	 imgs[i].style.left = i * 300 + 'px';
      }
   };
   //轮播移动的函数
   function imgMove() {
      var b1 = false;
      for(var i = 0; i < imgs.length; i++) {
	 imgs[i].style.left = imgs[i].offsetLeft - 1 + 'px';//offsetLeft:获取的是相对于父对象的左边距，让此距离逐渐减小
	 if(imgs[i].offsetLeft == 0) {//当图片移动到div中时，执行的操作。
	     b1 = true;//让图片停留一段时间
	     if(i == 0) {imgs[imgs.length - 1].style.left = maxRange;}//当前图片为第一个图片,让最后一个图片位于最右侧（距离div最远的地方）
	     else{imgs[i - 1].style.left = maxRange;}//让当前图片的上一个图片位于最右侧（距离div最远的地方）
	 }
      }
     if(!b1){setTimeout(imgMove, 2);}//定义图片移动的速度（每2毫秒移动1px）
     else{setTimeout(imgMove, 2000);}//定义图片停留的时间
  }
  setTimeout(imgMove, 3000);//第一张图片的停留时间(函数第一次执行在页面加载完成后3000毫秒)</script>

本人为JS实习生一枚，不断学习，不断进步。欢迎各位前辈批评指教。