首先对于轮播图要实现的功能,当点进页面时,轮播图会自动轮播,当鼠标进入轮播图时,轮播图会停止轮播此时的轮播图上的向左向右翻的的小标签会出现且页面的转换点也会出现。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.bigimg {
width: 700px;
height: 500px;
background-repeat: no-repeat;
margin: 0 auto;
background-image: url(focus1.jpg);
margin-top: 80px;
}
.left {
position: absolute;
background-image: url(arrow-prev.png);
top: 50%;
left: 25%;
height: 50px;
width: 50px;
background-repeat: no-repeat;
}
.right {
position: absolute;
background-image: url(arrow-next.png);
top: 50%;
left: 73%;
height: 50px;
width: 50px;
background-repeat: no-repeat;
}
ul {
position: absolute;
top: 75%;
left: 41%;
display: none;
}
li {
margin-left: 40px;
float: left;
}
</style>
</head>
<body>
<div class="bigimg">
<div class="left"></div>
<div class="right"></div>
<ul></ul>
</div>
<script>
var bigimg = document.querySelector('.bigimg');
var ul = document.querySelector('ul');
var left = document.querySelector('.left');
var right = document.querySelector('.right');
var num = 1;
var stop;
//开始
stop = setInterval(delp, 500);
function delp() {
if (num == 4) {
num = 1;
}
bigimg.style.backgroundImage = 'url(focus' + num + '.jpg)';
num++;
}
//动态生成li
for (var i = 0; i < 3; i++) {
var li = document.createElement('li');
ul.appendChild(li);
}
var lis = ul.querySelectorAll('li');
//当鼠标进入时,轮播停止
bigimg.onmouseover = function () {
clearInterval(stop);
ul.style.display = 'block';
left.style.display = 'block';
right.style.display = 'block';
//点击li会转换
for (var i = 0; i < lis.length; i++) {
//记录下标
lis[i].index = i;
lis[i].onclick = function () {//点击事件
var a=this.index +1;
bigimg.style.backgroundImage = 'url(focus' + a + '.jpg)';
console.log('url(focus' + a + '.jpg)');
}
}
//点击向左翻事件
left.onclick = function () {
num -= 1;
if (num == 0) {
num = 3;
}
console.log(num);
var index = num - 1;
if (index == 0) {
index = 3;
}
bigimg.style.backgroundImage = 'url(focus' + index + '.jpg)';
}
//点击向右翻事件
right.onclick = function () {
console.log(num);
if (num == 4) {
num = 1;
}
bigimg.style.backgroundImage = 'url(focus' + num + '.jpg)';
num++;
}
}
//鼠标离开时
bigimg.onmouseout = function () {
stop = setInterval(delp, 500);
ul.style.display = 'none';
left.style.display = 'none';
right.style.display = 'none';
}
</script>
</body>
</html>