总结广告轮播书写方式（一.js原生）

最新推荐文章于 2024-02-10 14:19:14 发布

NewDaDa

最新推荐文章于 2024-02-10 14:19:14 发布

阅读量495

点赞数

分类专栏： js 文章标签：广告轮播

本文链接：https://blog.csdn.net/NewDaDa/article/details/58658874

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.js原生+DOM

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>广告轮播js原生</title>
    <link rel="stylesheet" href="css/slider.css">
    <script src="js/slider.js"></script>
</head>
<body>
    <div id="slider">
        <ul id="imgs">
        </ul>
        <ul id="indexs">
        </ul>
    </div>
</body>

总结：
只有两个容器，一个用来放图片，另一个放下标

css代码：


> div,ul{
    margin:0px;
    padding:0px;
    list-style: none;
}
#slider {
    width: 670px;
    height:240px;
    margin:10px auto;
    position:relative;
    overflow: hidden;
}
#slider #imgs {
    position:absolute;
    top: 0;  left: 0;
    height:240px;
}
#slider #imgs li{
    float:left;
    z-index:0;
}
#slider #indexs {
    position:absolute;
    bottom:15px;
    right:30px;
}
#slider #indexs li {
    width: 22px;
    height: 22px;
    line-height: 22px;
    display: inline-block;
    background: #3e3e3e;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
    margin-left:10px;
}
#slider #indexs li.hover,#slider #indexs li:hover{
    background:#b61b1f ;
}

总结：
简单设置了容器的宽高，定位方式，还有小图标的样式和位置。

js代码

/*封装$，利用JQ思想，简化DOM，也可以换成DOM的书写方式*/
window.$=HTMLElement.prototype.$=function(selector){
    var elems=(this==window?document:this)
        .querySelectorAll(selector);
    return elems.length==0?null:elems.length==1?elems[0]:elems;
}
/*广告图片数组，这里也可以利用异步交互从服务器端获取图片数据*/
var imgs=[
    {"i":0,"img":"imgs/banner_01.jpg"},
    {"i":1,"img":"imgs/banner_02.jpg"},
    {"i":2,"img":"imgs/banner_03.jpg"},
    {"i":3,"img":"imgs/banner_04.jpg"},
    {"i":4,"img":"imgs/banner_05.jpg"},
];
//面向对象的方法做轮播图
var slider={
    LIWIDTH:0,
    DURATION:2000,
    STEPS:80,
    INTERVAL:0,
    step:0,
    moved:0,
    WAIT:3000,//自动轮播的等待时间
    timer:null,

    canAuto:true,//判断是否自动轮播

    /*页面初始化*/
    init:function(){
        this.LIWIDTH=parseFloat(getComputedStyle($("#slider")).width);
        this.INTERVAL=this.DURATION/this.STEPS;
        $("#imgs").style.width=this.LIWIDTH*imgs.length+"PX";
        for(var i=1,num="";i<=imgs.length;num+="<li>"+i+"</li>",i++);
        $("#indexs").innerHTML=num;
        $("#indexs li:first-child").className="hover";
        $("#indexs").addEventListener("mouseover",function(e){
            e=e||window.event;
            var target=e.target||e.srcElement;
            if(target.nodeName=="LI"&&target.className!="hover"){
                this.move(target.innerHTML-$("#indexs>li.hover").innerHTML);//计算n
            }
        }.bind(this));

        //自动轮播事件绑定
        this.autoMove();//启动自动轮播事件
        $("#slider").addEventListener("mouseover",this.changeCanAuto.bind(this));
        $("#slider").addEventListener("mouseout",this.changeCanAuto.bind(this));

this.updateView();  //更新页面操作
    },

    changeCanAuto:function(){
        this.canAuto=this.canAuto?false:true;
    },
    autoMove:function(){
        this.timer=setTimeout(function(){
            if(this.canAuto){
                this.move(1);
            }else{
                this.autoMove();
            }
        }.bind(this),this.WAIT);
    },
    move:function(n){//启动动画
        //防止两个动画叠加，开始前先关闭当前动画
        clearTimeout(this.timer);
        this.timer=null;
        if(n<0){
            //现拼接
            imgs=imgs.splice(imgs.length-(-n),-n).concat(imgs);
            this.updateView();
            //设置left的值
            var left=parseFloat(getComputedStyle($("#imgs")).left);
            $("#imgs").style.left=left-(-n)*this.LIWIDTH+"px";
        }
        this.moveStep(n);
    },
    moveStep:function(n){//移动一步的动画事件
        var DISTANCE=n*this.LIWIDTH;
        this.step=DISTANCE/this.STEPS;
        //改变left值
        var left=parseFloat(getComputedStyle($("#imgs")).left);
        $("#imgs").style.left=left-this.step+"px";
        this.moved++;
        if(this.moved<this.STEPS){//记录步数，启动动画
            this.timer=setTimeout(this.moveStep.bind(this,n),this.interval);
        }else{
            if(n>0){
                imgs=imgs.concat(imgs.splice(0,n));
                this.updateView();
            }
            $("#imgs").style.left="";
            this.moved=0;
            this.autoMove();
        }
    },
    updateView:function(){
        for(var i=0,html="";i<imgs.length;i++){
            html+='<li><img src="'+imgs[i].img+'"></li>';
        }
        $("#imgs").innerHTML=html;
        //下标与图片相对应
        $("#indexs>li.hover").className="";
        $("#indexs>li")[imgs[0].i].className="hover";
    },
};
window.addEventListener("load",function(){
    slider.init();

总结：
主要动画效果有：

鼠标移入事件(mouseover)，获取移入目标的数字值，计算出需要移动几张图片，根据图片的宽度计算出移动的距离。

代码实现：
if(target.nodeName==”LI”&&target.className!=”hover”){
this.move(target.innerHTML-$(“#indexs>li.hover”).innerHTML);//计算n
}
n的值有正，有负，图片数组的拼接方式就不同！！
右移时：先调整数组图片和页面的顺序，然后在调用移动方法。
左移时：先进行移动，然后在调整数组图片。