当前位置： 移动技术网 > IT编程>网页制作>HTML > 轮播图方法，原型链上编程？？

轮播图方法，原型链上编程？？

2020年07月07日  | 移动技术网IT编程  | 我要评论

自动生成轮播图

相当于在数组的对象里面增加一个地址就会多一张图片（我是小白，写的差请多多包涵，运用了之前的一些框架然后组成了一个自动的框架）

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就相当于代表着一张图片
    {src : './imager/1.jpg'},
    {src : './imager/2.jpg'},
    {src : './imager/3.jpg'},
    {src : './imager/4.jpg'},
    {src : './imager/5.jpg'},
    {src : './imager/1.jpg'}
    //至于为什么要多一个{src : './imager/1.jpg'}，相当于在移动到最后一张图片的时候让他的位置变为0，就是第一张
]

//这是在数组原型上写了一个方法
Array.prototype.banner = function(box){
//初始变量值
//下面小圆点索引
var index = 0;
//字符串拼接生成标签
var innerHTML = '';
//清除定时器
var timer = null;
//加锁，防止定时器冲突
var key = true;

//生成元素
var oDivBox = document.createElement('div');//这是最大的box，整个盒子用来包banner的
var leFt = document.createElement('span');//左边按钮
var rigHt = document.createElement('span');//右边按钮
var oUl = document.createElement('ul');//生成ul
var syBox = document.createElement('div')//生成索引位盒子
oUl.setAttribute('class','ulBox');//
leFt.setAttribute('class','lf');//
rigHt.setAttribute('class','rg');//都是给创建好的元素加class类名
oDivBox.setAttribute('class','bannerBox');//
syBox.setAttribute('class','syBox');//
oDivBox.appendChild(oUl);//大盒子插入ul标签
oDivBox.appendChild(leFt);//大盒子插入左按钮
oDivBox.appendChild(rigHt);//大盒子插入右按钮
oDivBox.appendChild(syBox);//大盒子插入索引位盒子

var boDy = document.getElementsByTagName('body')[0];//获取Body
//遍历数组，字符串拼接插入标签方法
                //数组  索引位  数组集合
box.forEach(function(ele,index,self){
    //数组的forEach方法
    innerHTML += '<a href=""><li><img src="' + ele.src + '"></li></a>'
    //让ul标签里面的内容等于插入的字符串然后变为标签
    oUl.innerHTML = innerHTML;

})
//这些都生成好之后将这个banner盒子插入到页面里面去
boDy.appendChild(oDivBox);
//获取当前的ul里面的所有a标签
var myA = oUl.getElementsByTagName('a');
//获取当前ul的宽度也就是轮播图的宽度
var movewidth = oUl.children[0].offsetWidth;
//我准备生成索引位的按钮只要5个所以要让他-1
var myAlen = myA.length - 1;
//遍历a标签生成span按钮的方法
for(var i = 0; i < myAlen; i ++){
    //生成Span标签
    var mySpan = document.createElement('span');
    //将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"){
                //索引位+1
                index ++;
                //执行动画方法
                startMove(oUl,{left :oUl.offsetLeft - movewidth},
                //回调函数
                    function(){
                        //如果oul到边界了就是最后一张轮播的位置
                    if(oUl.offsetLeft == -myAlen * movewidth){
                        index = 0; 
                        //让索引位第一个按钮
                        //让轮播图的位置变为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;
               }
               //每一次执行动画的时候索引位-1
               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)

渡一培训机构的课后作业，代码可能太臃肿了，还有很多需要优化的地方，多多包涵，还是个前端小白，立志做一个前端大佬

本文地址：https://blog.csdn.net/Yzhoun/article/details/107148186

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网