* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
.container {
margin: 100px auto;
position: relative;
width: 600px;
height: 400px;
overflow: hidden;
box-shadow: 0 0 5px #92ce36;
}
.container .wrap {
width: 4200px;
height: 400px;
position: absolute;
top: 0;
z-index: 1;
}
.container .wrap img {
float: left;
width: 600px;
height: 400px;
}
.container .buttons {
position: absolute;
right: 0;
bottom: 20px;
width: 146px;
height: 10px;
z-index: 2;
}
.container .buttons span {
float: left;
margin-right: 5px;
display: inline-block;
width: 20px;
height: 20px;
text-align: center;
border-radius: 500%;
color: #FFFFFF;
background: #bfea7b;
cursor: pointer;
}
.container .buttons .active {
color: #ffed00;
background: #1fd659;
}
.container .arrow {
position: absolute;
top: 42%;
display: none;
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
color: #FFFFFF;
font-size: 24px;
z-index: 2;
}
.container .arrow:hover {
background: rgba(0, 0, 0, 0.5);
}
.container .arrow_left {
left: 10px;
}
.container .arrow_right {
right: 10px;
}
.container:hover .arrow {
display: block;
}
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)
}
})()
网友评论