自动生成轮播图
相当于在数组的对象里面增加一个地址就会多一张图片(我是小白,写的差请多多包涵,运用了之前的一些框架然后组成了一个自动的框架)
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<script src="./js/tool.js"></script>
<script src="./js/index.js"></script>
</body>
</html>
- 这里我只写了css文件和引入了两个js的文件,我准备把所有的标签都在js里面自动生成,虽然这样会频繁的调动dom结构
一下是css代码
*{
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
}
.bannerBox{
overflow: hidden;
width: 800px;
height: 400px;
border: 1px solid black;
margin: 40px auto;
position: relative;
}
.ulBox{
width: 99999px;
height: 400px;
position: absolute;
left: 0;
}
.ulBox a{
float: left;
}
.ulBox a li img{
width: 800px;
height: 400px;
}
.bannerBox .lf{
width: 50px;
height: 50px;
position: absolute;
background-image: url(../imager/left.png);
background-size: 100% 100%;
left: 0;
top:170px;
cursor: pointer;
}
.bannerBox .rg{
width: 50px;
height: 50px;
position: absolute;
background-image: url(../imager/right.png);
background-size: 100% 100%;
right: 0;
top: 170px;
cursor: pointer;
}
.bannerBox .syBox{
width: 300px;
height: 20px;
position: absolute;
left: 235px;
bottom: 30px;
}
.bannerBox .syBox span{
width: 20px;
height: 20px;
float: left;
margin-left:20px;
border: 1px solid black;
border-radius: 50%;;
cursor: pointer;
}
.indexA{
background: black;
}
- 这里是我写的轮播图的样式,我写的相当于是会自动的添加动画和效果,样式还是需要css来写的,我准备用js来调用这些样式。(还是很耗效率)css比较简单我就不过多阐述了。
var arrBanner = [
{src : './imager/1.jpg'},
{src : './imager/2.jpg'},
{src : './imager/3.jpg'},
{src : './imager/4.jpg'},
{src : './imager/5.jpg'},
{src : './imager/1.jpg'}
]
Array.prototype.banner = function(box){
var index = 0;
var innerHTML = '';
var timer = null;
var key = true;
var oDivBox = document.createElement('div');
var leFt = document.createElement('span');
var rigHt = document.createElement('span');
var oUl = document.createElement('ul');
var syBox = document.createElement('div')
oUl.setAttribute('class','ulBox');
leFt.setAttribute('class','lf');
rigHt.setAttribute('class','rg');
oDivBox.setAttribute('class','bannerBox');
syBox.setAttribute('class','syBox');
oDivBox.appendChild(oUl);
oDivBox.appendChild(leFt);
oDivBox.appendChild(rigHt);
oDivBox.appendChild(syBox);
var boDy = document.getElementsByTagName('body')[0];
box.forEach(function(ele,index,self){
innerHTML += '<a href=""><li><img src="' + ele.src + '"></li></a>'
oUl.innerHTML = innerHTML;
})
boDy.appendChild(oDivBox);
var myA = oUl.getElementsByTagName('a');
var movewidth = oUl.children[0].offsetWidth;
var myAlen = myA.length - 1;
for(var i = 0; i < myAlen; i ++){
var mySpan = document.createElement('span');
syBox.appendChild(mySpan);
}
var oSpan = syBox.getElementsByTagName('span');
oSpan[0].className = 'indexA'
function aoutMove(fx){
clearTimeout(timer)
if(key == true){
key = false;
if(!fx || fx == "left>right"){
index ++;
startMove(oUl,{left :oUl.offsetLeft - movewidth},
function(){
if(oUl.offsetLeft == -myAlen * movewidth){
index = 0;
oUl.style.left = 0 + 'px';
}
changIndex(index)
timer = setTimeout(aoutMove,1500);
key = true;
})
}else if(fx == "right>left"){
if(oUl.offsetLeft == 0){
oUl.style.left = -myAlen * movewidth + 'px';
index = myAlen;
}
index --;
startMove(oUl,{left: oUl.offsetLeft + movewidth},
function(){
changIndex(index);
timer = setTimeout(aoutMove,1500);
key = true;
})
}
}
}
setTimeout(aoutMove,1500)
leFt.onclick = function(){
aoutMove('right>left');
}
rigHt.onclick = function(){
aoutMove('left>right');
}
function changIndex(_index){
for(var i = 0; i < oSpan.length; i ++){
oSpan[i].className = ' ';
}
oSpan[_index].className = "indexA";
}
for(var i = 0; i < oSpan.length; i ++){
(function(i){
oSpan[i].onclick = function(){
key = false;
index = i;
startMove(oUl,{left : -index * movewidth},
function(){
key = true;
timer = setTimeout(aoutMove,1500);
changIndex(index)
})
}
}(i))
}
}
arrBanner.banner(arrBanner)
渡一培训机构的课后作业,代码可能太臃肿了,还有很多需要优化的地方,多多包涵,还是个前端小白,立志做一个前端大佬