javascript轮播图算法

前端之家收集整理的这篇文章主要介绍了javascript轮播图算法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

轮播图,是网站首页中常见的一种图片切换特效,作为前端开发者,我相信很多开发者都直接调用了Jquery中的封装好的方法实现图片轮播,省事简单。所以我想介绍一下javascript纯代码实现的图片轮播。

HTML

  • SEOver" style="margin-left: 300px;">1 2 3 4 5
  • SEOver" style="margin-left: 300px;">1 2 3 4 5
  • 这里我相信最多疑惑的是,明明五张图片为何要在首尾加两张图片(li)做首尾呼应呢?原因如下图:

    这里以向左滚动的例子为说明

    一开始布局的时候left: -470px;先处于第2个li也就是第2张图,当我们图片陆续向左滚动到第7张图片的时候,迅速扯回到第2张图,然后还是继续向左滚动。这样看起来就像是假象式的无限向左滚动循环,其实它里面只有7张图组成。同样的,如果实现向右滚动,我们一开始布局的时候,先处于第1个li也就是第1张图,当我们图片陆续向右滚动到第6张图片的时候,迅速扯回到第1张图,然后还是继续向右滚动。其实上下滚动轮播图道理是一样的,只不过少了一个float:left属性,让li垂直排列。

    CSS

    li{ width: 470px; height: 150px; float: left; } #content_img2{ position: relative; width: 470px; height: 150px; border: 2px black solid; margin: 30px auto; overflow: hidden; } #img2{ position: absolute; top: -150px; left: 0px; z-index: -1; width: 470px; height: 700%; } #img2>li{ width: 470px; height: 150px; }

    javascript函数方法

    //向左轮播图的span"按钮"鼠标经过事件

    for(var i=0;i<spannum1.length;i++){
    spannum1[i].index=i;
    spannum1[i].onmouSEOver=function(){
    for(var p=0;p<spannum1.length;p++){
    if(spannum1[p]==this){
    spannum1[p].className="mouSEOver";
    }else{
    spannum1[p].className="";
    }
    }
    clearTimeout(img1.timer1);
    now=this.index;
    scrollimg1(img1,spannum1);
    }
    }

    //向左轮播的主函数调用
    scrollimg1(img1,spannum1);

    //向上轮播图的span"按钮"鼠标经过事件

    for(var i=0;i<spannum2.length;i++){
    spannum2[i].index=i;
    spannum2[i].onmouSEOver=function(){
    for(var p=0;p<spannum2.length;p++){
    if(spannum2[p]==this){
    spannum2[p].className="mouSEOver";
    }else{
    spannum2[p].className="";
    }
    }
    clearTimeout(img2.timer1);
    nows=this.index;
    scrollimg2(img2,spannum2);
    }
    }

    //向上轮播的主<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a><a href="/tag/diaoyong/" target="_blank" class="keywords">调用</a>

    scrollimg2(img2,spannum2);

    }

    var now=1;
    function scrollimg1(obj,spannum1){
    if(obj.offsetLeft<=-(obj.children.length-1)obj.children[0].offsetWidth){//达到极限的计算位置,既是最后一个图就马上扯回初始位置
    now=0;
    obj.style.left=-(++now)
    obj.children[0].offsetWidth+"px";
    }else{
    Move(obj,-obj.children[0].offsetWidth*(++now),"left",5,30);//否则图片进行向左运动的缓冲动画
    }
    for(var i=0;i<spannum1.length;i++){

    spannum1[i].className="";
    }
    spannum1[(now-1)%spannum1.length].className="mouSEOver";
    obj.timer1=setTimeout(function(){//每3秒钟进行函数的回调,实现无限循环的图片轮播

    scrollimg1(obj,spannum1);
    },3000);
    }

    var nows=1;
    function scrollimg2(obj,spannum2){
    if(obj.offsetTop<=-(obj.children.length-1)obj.children[0].offsetHeight){//达到极限的计算位置,既是最后一个图就马上扯回初始位置
    nows=0;
    obj.style.top=-(++nows)
    obj.children[0].offsetHeight+"px";
    }else{
    Move(obj,-obj.children[0].offsetHeight*(++nows),"top",30);//否则图片进行向左运动的缓冲动画
    }
    for(var i=0;i<spannum2.length;i++){

    spannum2[i].className="";
    }
    spannum2[(nows-1)%spannum2.length].className="mouseover";
    obj.timer1=setTimeout(function(){//每3秒钟进行函数的回调,实现无限循环的图片轮播

    scrollimg2(obj,spannum2);
    },3000);
    }

    function Move(obj,target,stylename,average,cycle,continuefunction){参数类型:(对象,目标值,改变的样式属性,缓冲系数(速度与大小成反比),周期时间(速度与大小成反比),回调函数(可有可无))
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
    if(stylename=="opacity"){
    var offvalue=Math.round(parseFloat(getStyle(obj,stylename))*100);
    var speed=(target-offvalue)/average;
    speed=speed>0?Math.ceil(speed):Math.floor(speed);
    if(speed==0){
    clearInterval(obj.timer);
    if(continuefunction) continuefunction();
    }else{
    obj.style[stylename]=(offvalue+speed)/100;
    obj.style.filter="alpha(opacity:"+(offvalue+speed)+")";
    }
    }else{
    var offvalue=parseInt(getStyle(obj,stylename));
    var speed=(target-offvalue)/average;
    speed=speed>0?Math.ceil(speed):Math.floor(speed);
    if(speed==0){
    clearInterval(obj.timer);
    if(continuefunction) continuefunction();
    }else{
    obj.style[stylename]=offvalue+speed+"px";
    }
    }
    },cycle);
    }
    function getStyle(obj,stylename){//对象样式属性大小获取函数
    if(obj.currentStyle){
    return obj.currentStyle[stylename];
    }else if(getComputedStyle(obj,false)){
    return getComputedStyle(obj,false)[stylename];
    }
    }

    这种通过计算位置轮播算法的好处是,可以在我的样式范围内,在HTML的

      内无限添加li里的图片,但是要记得要在首尾加前后呼应的li图片,并且根据图片大小来更改样式,就能实现图片轮播。

      以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

    猜你在找的JavaScript相关文章