无缝轮播
HTML
<div id="box"> <ul id="ul"> <li><img src="随堂案例/img/1.jpg" alt=""></li> <li><img src="随堂案例/img/2.jpg" alt=""></li> <li><img src="随堂案例/img/3.jpg" alt=""></li> </ul> <div id="leftright"> <aside><</aside> <aside>></aside> </div> <div id="circle"> <nav class="black"></nav> <nav></nav> <nav></nav> </div> </div> JS var oBox = document.getElementById("box"); var ul = document.getElementById("ul"); var li = document.getElementsByTagName("li"); var leftright = document.getElementById("leftright"); var circle = document.querySelectorAll("#circle>nav"); var aside = document.getElementsByTagName("aside"); var iNow = 0; var timer = null; ul.appendChild(li[0].cloneNode(true)); ul.style.width = li.length * li[0].offsetWidth + "px"; oBox.addEventListener("mouseover", function () { clearInterval(timer); }) oBox.addEventListener("mouseout", function () { goTime(); }) for (var o = 0; o < circle.length; o++) { circle[o].index = o; circle[o].addEventListener("mouseover", function () { iNow = this.index; for (var i = 0; i < circle.length; i++) { circle[i].className = ""; } circle[iNow == li.length - 1 ? 0 : iNow].className = "black"; toImg(); }) } aside[0].addEventListener("click", function () { if (iNow == 0) { iNow = li.length - 2; ul.style.left = -(li.length - 1) * li[0].offsetWidth + "px"; } else { iNow--; } toImg(); }) aside[1].addEventListener("click", function () { if (iNow == li.length - 1) { iNow = 1; ul.style.left = 0; } else { iNow++; } toImg(); }) goTime(); function goTime() { timer = setInterval(function () { if (iNow == li.length - 1) { iNow = 1; ul.style.left = 0; } else { iNow++; } toImg(); }, 3000) } function toImg() { for (var i = 0; i < circle.length; i++) { circle[i].className = ""; } circle[iNow == li.length - 1 ? 0 : iNow].className = "black"; move(ul, { left: -li[0].offsetWidth * iNow }); } 思路： 首先利用运动框架和定时器让ul动起来，并进行判断，如果符合条件则更改位置，其次设置划过关闭定时器，离开重启定时器。为了方便，将定时器封装为一个函数，同时将运动条件也封装为一个函数，并利用定时器函数将其调用使其运动。接着蛇者划过下方圆点轮播图跟着切换的事件。首先遍历，利用对象属性将每个的下标值进行保留。当划过某个圆点时，将所有圆点的className属性设为空字符串，将自身的className设为样式绑定的className（设置时，判断下标是否为length-1，如果是，则变为0，并将其className名设为样式className名）,并将图片的活动下标iNow设为当前圆点的遍历值，以此实现划过切换圆点样式和图片的事件，并再次调用封装好的运动函数（由于计时器函数在创建好之后就立即进行了调用，因此在更改iNow值之后，它也会自行运转）。最后设置点击左右尖角进行切换的操作，当点击左边时，判断是否为iNow==0，（因为多克隆了一份第一张图，所以需要减去），若是，则将ul的left值设置为-（li的宽度*li.length-1），下标设为li.length-2，否则下标--，并且调用运动框架。当点击右边时，判断是否下标为length-1，若是，则下标变为1，ul的left设为0，否则下标++，并调用运动框架。
更多精彩
