js:
////思路： 1 獲取相關(guān)元素 2 左右箭頭點擊事件 3 圓點樣式
////? ? ? 4 圓點點擊事件 5 自動播放? 6 鼠標(biāo)懸停事件
(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)
}
})()
