原生Javascript制作轮播图

1. 根据ul中li个数(图片的个数)动态的创建li,并且加入到ol中,作为小按钮来使用为每个ol中的li添加鼠标进入的事件,(添加事件之前,先把索引保存在每个li的自定义属性中),鼠标进入li的时候做排他功能(背景颜色),移动图片(图片整体移动,移动的ul,每次移动的是一个图片的宽度,图片的宽度就是向宽的宽度),调用的是动画函数,移动ul,移动的是索引值*图片的宽度,并且把索引值存储在一个全局变量中,pic

2. 创建li之后,1---设置ol中第一个li有默认的背景颜色,2---把ul中的第一个li克隆一下(无缝连接的效果)追加到ul中所有的li的最后面(无缝效果:页面中的第一个图片和最后一个图片是同一个图片)

 3.左右焦点的div显示和隐藏

 4.为左右按钮注册点击事件
每一次点击右边的按钮,先判断pic的值是不是ul中li的length-1(pic的值最大是8),此时设置pic的值为0,同时设置ul距离左边的left值为0(初始值),此时pic立刻加1,移动ul,用户看到的就是第二个图片 设置小按钮的背景颜色

左边按钮,需要判断pic值是不是0,如果是0此时pic=8,ul的left为8*图片的宽,立刻pic-1,然后ul移动一张图片,此时用户看到了第8个图片

 5.自动播放在页面加载的时候,启动一个定时器,里面调用的就是右边按钮的点击事件的处理函数

 

html代码 :

<div id="box" class="jd-clo2-hd">
    <span id="left" href="#" class="arr-l"></span> 
    <span id="right" href="#" class="arr-r"></span>

    <ol>
    </ol>

    <ul>
        <li><a href=""><img src="images/banner01.jpg" alt=""></a></li>
	    <li><a href=""><img src="images/banner02.jpg" alt=""></a></li>
	    <li><a href=""><img src="images/banner03.jpg" alt=""></a></li>
	    <li><a href=""><img src="images/banner04.jpg" alt=""></a></li>
	    <li><a href=""><img src="images/banner05.jpg" alt=""></a></li>
	    <li><a href=""><img src="images/banner06.jpg" alt=""></a></li>
	    <li><a href=""><img src="images/banner07.jpg" alt=""></a></li>
	    <li><a href=""><img src="images/banner08.jpg" alt=""></a></li>
    </ul>
</div>

css代码： 

/*轮播图*/
		.jd-clo2-hd{
			position: relative;
            width：790px;
			height: 340px;
			margin-bottom: 10px;
			overflow: hidden;
		}
		.jd-clo2-hd ul{
			position: absolute;
			width: 1000%;
			z-index: 1;
			top: 0;
			left: 0;
		}
		.jd-clo2-hd ul li{
			float: left;
		}
		.jd-clo2-hd ol{
			position: absolute;
			z-index: 2;
			padding: 0;
			bottom: 10px;
			left: 50%;
			margin: 0 0 0 -90px;
			height: 20px;
			width: 180px;
			border-radius: 10px;
			background: rgba(255,255,255,0.5);

		}
		.jd-clo2-hd ol li{
			float: left;
			width: 12px;
			height: 12px;
			background-color: #fff;
			margin: 4px 5px;
			border-radius: 50%;
		}
		.jd-clo2-hd .current{
			background-color: #f10215;
			cursor: pointer;
		}
		.arr-l,.arr-r{
			position: absolute;
			z-index: 2;
			top: 50%;
			margin-top: -30px;
			background: rgba(0,0,0,0.3);
			font-family: "icomoon";
			font-style: normal;
			height: 60px;
			width: 30px;
			font-size: 25px;
			line-height: 60px;
			text-align: center;
			color: #fff;
		}
		.arr-l:hover,.arr-r:hover{
			cursor: pointer;
		}
		.arr-l{
			left: 0;
		}
		.arr-r{
			right: 0;
		}

js代码 ：

//获取整个轮播图
		var box=document.getElementById("box");
		//获取ol
		var olObj=box.children[2];
		//获取ul
		var ulObj=box.children[3];
		// 获取每个图片li
		var list=ulObj.children;
		//获取轮播图框宽度
		var imgWidth=box.offsetWidth;
		//设置全局变量
		var pic = 0;
		// 根据轮播个数来创建原点，并为每个原点添加事件
		for (var i = 0; i < list.length; i++) {
			// 创建li，把li放在ol便签里，再为每个li添加属性index并赋值作为索引
			var liObj=document.createElement('li');
			olObj.appendChild(liObj);
			liObj.setAttribute("index",i);
				// 为每个li添加鼠标事件
				liObj.onmouseover=function(){
					//移除所有的ol里面li的背景颜色，也就是去掉class=“current”
					for (var j = 0; j < olObj.children.length; j++) {
						olObj.children[j].removeAttribute("class");
					}
					// 为当前li添加背景颜色，也就是添加class=“current”
					this.className="current";
					// 获取当前的索引值
					pic = this.getAttribute('index');
					//移动ul
					animate(ulObj,- pic * imgWidth);
				};
		}
		//设置ol中第一个li有背景颜色
		olObj.children[0].className="current";
		//克隆一个ul中第一个li,加入到ul中的最后=====克隆（难点）
		ulObj.appendChild(ulObj.children[0].cloneNode(true));
		//获取左右按钮的id
		var leftObj=document.getElementById('left');
		var rightObj=document.getElementById('right');

		rightObj.onclick=rightGo;
		function rightGo(){
			//如果pic的值是8,恰巧是ul中li的个数-1的值,此时页面显示第九个图片,而用户会认为这是第一个图,
    		//所以,如果用户再次点击按钮,用户应该看到第二个图片
			if(pic==ulObj.children.length-1){
				//如何从第9个图,跳转到第一个图
				pic=0;//先设置pic=0
				ulObj.style.left=0+"px";//把ul的位置还原成开始的默认位置
			}
			pic++;//立刻设置pic加1,那么此时用户就会看到第二个图片了
			animate(ulObj,- pic * imgWidth);//移动ul
			//设置对应ol的li
			//先移除所有的背景颜色
			for (var i = 0; i < olObj.children.length; i++) {
				olObj.children[i].removeAttribute("class");
			}
			// 判断是否是最后一个图片，如果是就要设置第一个class=“current”
			if (pic==olObj.children.length) {
				olObj.children[0].className="current";
			}else{
				olObj.children[pic].className="current";
			}
			
		};
		// 左按钮同上
		leftObj.onclick=leftGo;
		function leftGo(){
			if(pic==0){
				pic=ulObj.children.length-1;
				ulObj.style.left=-imgWidth*pic+"px";
			}
			pic--;
			animate(ulObj,- pic * imgWidth);
			for (var i = 0; i < olObj.children.length; i++) {
				olObj.children[i].removeAttribute("class");
			}
			if (pic==0) {
				olObj.children[olObj.children.length].className="current";
			}else{
				olObj.children[pic].className="current";
			}
		};

		// 自动播放，添加定时器，原理就是右按钮一直被按
		clearInterval(timeItv);
		var timeItv=setInterval(rightGo,2000);
		// 鼠标进入的时候清除定时器
		box.onmouseover=function(){
			clearInterval(timeItv);
		}
		// 鼠标离开时设置定时器
		box.onmouseout=function(){
			timeItv=setInterval(rightGo,2000);
		}

		
		// 移动的原理函数
		//设置任意的一个元素,移动到指定的目标位置
	  function animate(element, target) {
	    clearInterval(element.timeId);
	    //定时器的id值存储到对象的一个属性中
	    element.timeId = setInterval(function () {
	      //获取元素的当前的位置,数字类型
	      var current = element.offsetLeft;
	      //每次移动的距离
	      var step = 10;
	      step = current < target ? step : -step;
	      //当前移动到位置
	      current += step;
	      if (Math.abs(current - target) > Math.abs(step)) {
	        element.style.left = current + "px";
	      } else {
	        //清理定时器
	        clearInterval(element.timeId);
	        //直接到达目标
	        element.style.left = target + "px";
	      }
	    }, 10);
	  }