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，否则下标++，并调用运动框架。