Java Script实现轮播图

轮播图的实现原理：

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

---

轮播图的结构

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

 <div id="box">
        <div class="screen" id="screen">
            <ul id="images">
                <li>
                    <img src="images/1.png" alt="">
                </li>
                <li>
                    <img src="images/2.png" alt="">
                </li>
                <li>
                    <img src="images/3.png" alt="">
                </li>
                <li>
                    <img src="images/4.png" alt="">
                </li>
                <li> 
                    <img src="images/5.png" alt="">
                </li>
            </ul>
            <ol id="point"></ol>
        </div>
        <div id="focus">
            <span id="left">&lt;</span>
            <span id="right">&gt;</span>
        </div>
    </div>

css样式

<style>
 		* {
            box-sizing: border-box;
        }

        body,
        ul, 
        li {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        #box {
            width: 606px;
            height: 306px;
            border: 10px solid #ccc;
            margin: 100px auto 0;
            position: relative;
        }

        #screen {
            width: 586px;
            height: 286px;
            overflow: hidden;
            position: relative;
        }

        #screen>ul {
            width: 3516px;
            position: absolute;
            left: 0;
            top: 0;
        }

        #screen>ul>li {
            float: left;
        }

        #focus {
            display: none;
        }

        #focus>span {
            display: block;
            width: 30px;
            height: 50px;
            background-color: rgba(0, 0, 0, .3);
            text-align: center;
            line-height: 50px;
            position: absolute;
            top: 50%;
            margin-top: -25px;
            cursor: pointer;
            font-size: 24px;
            color: #fff;
            transition: background-color .3s;
        }

        #focus>span:hover {
            background-color: rgba(0, 0, 0, .5);
        }

        #focus>span#left {
            left: 0;
        }

        #focus>span#right {
            right: 0;
        }

        #point {
            position: absolute;
            right: 30px;
            bottom: 10px;
        }

        #point>li {
            float: left;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: #fff;
            cursor: pointer;
        }

        #point>li+li {
            margin-left: 10px;
        }

        #point>li.current {
            background-color: pink;
        }
</style>

效果图：

---

轮播图实现步骤：

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);
        }

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