1.通过数组利用栈和队列添加删除元素的方法
通过js声明一个数组来存放图片的的地址信息,再通过栈和队列中的队列的(只能从一端进,从另一端出)的特点:通过开头进,结尾出;结尾进,开头出.并把得到删除去的值循环,始终不断的将数组中新的下标为'0'的arr[0]的数组元素赋值通过给元素设置属性值的方法xx.setAttribute("属性名","属性值")给html中的img加上src的地址信息来展示不同的照片,时效轮播效果.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>最low轮播</title>
<style>
* {
margin: 0;
padding: 0;
}
img {
width: 100%;
height: 500px;
}
div {
position: relative;
}
button {
position: absolute;
top: 50%;
margin-top: -25px;
width: 50px;
height: 50px;
border-radius: 50%;
color: #fff;
background: rgba(200, 198, 198, 0.6);
border: none;
cursor: pointer;
}
button:nth-of-type(1) {
left: 50px;
}
button:nth-of-type(2) {
right: 50px;
}
</style>
</head>
<body>
<div class="banner">
<img src="../image/5.jpg" alt="">
<button> < </button>
<button>></button>
</div>
<script>
var imgs = ["../image/1.jpg", "../image/2.jpg", "../image/3.jpg", "../image/4.jpg", "../image/5.jpg", "../image/5.jpg"];
var btns = document.getElementsByTagName('button');
var image = document.getElementsByTagName('img')[0];
// var div = document.getElementsByTagName('div')[0];
var banner = document.getElementsByClassName('banner')[0];
for (i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
if (this.innerText == '<') {
var first = imgs.shift();
imgs.push(first);
image.src = first;
console.log(first);
} else if (this.innerText == '>') {
var last = imgs.pop();
console.log(last);
imgs.unshift(last);
image.src = last;
}
}
}
timer = setInterval(function () {
var first = imgs.shift();
imgs.push(first);
image.src = first;
}, 1000)
banner.onmouseover = function () {
clearInterval(timer);
}
banner.onmouseout = function () {
timer = setInterval(function () {
var first = imgs.shift();
imgs.push(first);
image.src = first;
}, 1000)
}
</script>
</body>
</html>
2.通过DOM对html获取的元素得到一个DOM集合/类数组对象
主要是通过对获取的类数组对象进行遍历,结合点击事件来完成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播未封装</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.banner {
position: relative;
/* overflow: hidden; */
}
img {
width: 100%;
height: 800px;
vertical-align: top;
opacity: 0;
}
.banner>.banner-img>img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 800px;
transition: 1s;
}
img.active {
opacity: 1;
}
button {
position: absolute;
top: 50%;
margin-top: -25px;
width: 50px;
height: 50px;
border-radius: 50%;
font-size: 32px;
color: #fff;
background: rgba(200, 198, 198, 0.6);
border: none;
cursor: pointer;
}
.banner>button:active {
background: rgba(0, 0, 0, .8);
}
button:nth-of-type(1) {
left: 50px;
}
button:nth-of-type(2) {
right: 50px;
}
.banner ul {
position: absolute;
left: 50%;
bottom: 50px;
width: 100px;
margin-left: -50px;
text-align: center;
}
.banner>ul>li {
width: 10px;
height: 10px;
border-radius: 50%;
cursor: pointer;
background: skyblue;
display: inline-block;
}
.banner>ul>li.active {
background: #fff;
}
</style>
</head>
<body>
<div class="banner">
<div class="banner-img">
<img class="active" src="../image/y2.jfif" alt="">
<img src="../image/y3.jfif" alt="">
<img src="../image/y4.jfif" alt="">
<img src="../image/y5.jfif" alt="">
<img src="../image/4.jpg" alt="">
<img src="../image/5.jpg" alt="">
</div>
<img src="../image/5.jpg" alt="">
<button>
< </button>
<button>></button>
<ul>
<li a="0" class="active"></li>
<li a="1"></li>
<li a="2"></li>
<li a="3"></li>
<li a="4"></li>
<li a="5"></li>
</ul>
</div>
<script>
var banner = document.getElementsByClassName('banner')[0];
var btns = document.getElementsByTagName('button');
var imgs = document.getElementsByTagName('img');
var lis = document.getElementsByTagName('li');
var j = 0;
console.log(banner);
// for (var i = 0; i < btns.length; i++) { }
for (var i in btns) {
btns[i].onclick = function () {
if (this.innerText == '>') {
j++;
j == lis.length && (j = 0);
// for (j = 1; j < lis.length; j++) {
for (i = 0; i < lis.length; i++) {
lis[i].className = '';
imgs[i].className = '';
}
// console.log(lis[i]);
lis[j].className = 'active';
imgs[j].className = 'active';
// console.log(lis[i]);
// }
} else {
j--;
j == -1 && (j = lis.length - 1);
// for (j = lis.length; j > -1; j--) {
for (var i = 0; i < lis.length; i++) {
lis[i].className = '';
imgs[i].className = '';
}
// console.log(lis[i]);
imgs[j].className = 'active';
lis[j].className = 'active';
// }
}
}
}
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = function () {
j = this.getAttribute('a');
for (var i = 0; i < lis.length; i++) {
lis[i].className = '';
imgs[i].className = '';
}
imgs[j].className = 'active';
lis[j].className = 'active';
}
}
timer = setInterval(function () {
j++;
j == lis.length && (j = 0);
for (i = 0; i < lis.length; i++) {
lis[i].className = '';
imgs[i].className = '';
}
lis[j].className = 'active';
imgs[j].className = 'active';
}, 1500)
//banner是class类,返回是集合,注意下标,否则出错没有clear效果
banner.onmouseover = function () {
clearInterval(timer);
}
banner.onmouseout = function () {
timer = setInterval(function () {
j++;
j == lis.length && (j = 0);
for (i = 0; i < lis.length; i++) {
lis[i].className = '';
imgs[i].className = '';
}
lis[j].className = 'active';
imgs[j].className = 'active';
}, 1500)
}
</script>
</body>
</html>
