js:
////思路： 1 获取相关元素 2 左右箭头点击事件 3 圆点样式
//// 4 圆点点击事件 5 自动播放 6 鼠标悬停事件
(function() {
var container = document.querySelector('.container'),
wrap = container.querySelector('.wrap'),
pre = container.querySelector('.arrow_left'),
next = container.querySelector('.arrow_right'),
dots = document.getElementsByTagName('span'),
timer = null,
movDis = 0,
index = 0;
//左右箭头点击效果
next.onclick = function() {
nextRun();
}
pre.onclick = function() {
preRun();
}
function nextRun() {
index++;
if(index > 4) {
index = 0;
}
dotShow();
if(wrap.style.left === '-3600px') {
movDis = -1200;
} else {
movDis = parseInt(wrap.style.left) - 600;
}
wrap.style.left = movDis + 'px';
}
function preRun() {
index--;
if(index < 0) {
index = 4;
}
dotShow();
if(wrap.style.left === '0px') {
movDis = -2400;
} else {
movDis = parseInt(wrap.style.left) + 600;
}
wrap.style.left = movDis + 'px';
}
//自动播放
function autoPlay() {
timer = setInterval(nextRun, 2000);
}
autoPlay();
//整体移动效果
container.onmouseover = function() {
clearInterval(timer);
}
container.onmouseout = function() {
autoPlay();
}
//原点换色
function dotShow() {
for(var i = 0; i < dots.length; i++) {
if(dots[i].className = 'active') {
dots[i].className = '';
}
}
dots[index].className = 'active';
}
//原点点击事件
for(var i = 0; i < dots.length; i++) {
(function(i) {
dots[i].onclick = function() {
var dis = index - i;
if(index == 4 && parseInt(wrap.style.left) !== -3000) {
dis = dis - 5;
}
if(index == 0 && parseInt(wrap.style.left) !== -600) {
dis = dis + 5;
}
wrap.style.left = parseInt(wrap.style.left) + dis * 600 + 'px';
index = i;
dotShow();
}
})(i)
}
})()
