Java Script实现轮播图

轮播图的实现原理：

原理：
1.在一个盒子box里面放一个ul，ul下面的li放置图片，li浮动float：left，让图片显示在同行。
2.box设置overflow：hiden，将超出的ul隐藏
3.通过创建一个定时器（setInterval（function，ms）），每过n毫秒，将该ul的left位置改变，实现视觉上的移动效果。当达到指定位置时，清除定时器

---

轮播图的结构

轮播图通过左右两侧按钮和底部的小圆点实现轮播效果，html结构如下

 

        

            

                

                    


                
                

                    


                
                

                    


                
                

                    


                
                
 
                    


                
            
            

        
        

            <
            ">>
        
    

css样式

效果图： 

---

轮播图实现步骤：

1.动态首先创建好小圆点，在给小圆点一个鼠标移入事件。
因为小圆点mouseover，图片移动。当点击两侧小按钮时，底部的小圆点也要跟着移动。所以先创建可以方便后面设置两侧小按钮的点击事件
2.创建移动的函数，当小圆点mouseover时触发函数，移动当相应的位置
3.给两侧按钮一个点击事件，点击按钮，移动图片、小圆点移动。
4.给box一个mouseout时，创建一个定时器，让图片从左至右移动

---

步骤1，创建小圆点：

		//获取元素节点
        var box = my$("box");// 装轮播图的盒子
        var screen = my$("screen");// 相框
        var imgWidth = screen.offsetWidth;// 相框的宽度
        var ulObj = my$("images");// 装图片的ul
        var list = ulObj.getElementsByTagName("li");// 所有图片的li节点
        var point = my$("point");// 装小圆点的ol
        var btnBox = my$("focus");// 左右两侧按钮的盒子
        
		// 1.创建小按钮，根据小按钮切换对应图片
        for(var i = 0; i < list.length; i++) {
            var liObj = document.createElement("li");
            point.appendChild(liObj);
            liObj.setAttribute("index", i);
            // 注册鼠标移入事件
            liObj.onmouseover = function() {
                // 先干掉所有li的背景色
                for(var j = 0; j < point.children.length; j++) {
                    point.children[j].removeAttribute("class");
                }
                this.className = "current";
                // 获取对应的索引值 
                var picIndex = this.getAttribute("index");
                // 移动装图片的ul
                move(ulObj, -picIndex * imgWidth);
            }
        }
        // 设置point第一个li有默认背景颜色
        point.firstElementChild.className = "current";

2.创建图片移动函数

//element 标签节点
//target 移动的目标位置
function move (element, target) {
		 // 先清理定时器
	    clearInterval(element.timeId);
	    element.timeId = setInterval(function () {
	        var flag = true;
	        // 1.获取元素当前的位置
	        var current = element.offsetLeft;
	        // 2.div每次移动多少
	        var step = (target - current) / 10;
	        // 判断步数 > 0 向上取整，否则向下取整
	        step = step > 0 ? Math.ceil(step) : Math.floor(step);
	        // 3.每次移动后得距离
	        current += step;
	        element.style.left = current + "px";
	        if (current == target) {
	            clearInterval(element.timeId);
	        }
        }
	},10);
}

3.给两侧按钮一个点击事件，实现图片切换

 // 4.点击两侧按钮
        my$("right").onclick = move;
        my$("left").onclick = function() {
            if(index == 0) {
                index = list.length - 1;
                ulObj.style.left = -index * imgWidth + "px";
            }
            index--;
            move(ulObj, -index * imgWidth);
            for(var j = 0; j < point.children.length; j++) {
               point.children[j].removeAttribute("class");
            }
            point.children[index].className = "current";
        }

4.当鼠标不在box上面时进行图片自动切换，鼠标在box上面时，自动切换取消

 // 3.鼠标移入移出
  		var timeId = setInterval(move, 1000);
        var index = 0;
        box.onmouseover = function() {
            btnBox.style.display = "block";
            clearInterval(timeId);
        }
        box.onmouseout = function() {
            btnBox.style.display = "none";
            timeId = setInterval(move, 1000);
        }

到这里就实现了一个简单的轮播图