JS实现八种焦点轮播图（上）

最新推荐文章于 2023-08-07 16:12:45 发布

马灿发

最新推荐文章于 2023-08-07 16:12:45 发布

阅读量5.8k

点赞数 6

分类专栏： javascript 文章标签： javascript 轮播图

本文链接：https://blog.csdn.net/macanfa/article/details/50452028

版权

javascript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

注：基于完美运动框架move2.js而完成的八种焦点录播图

基本布局：

<div id="box">
        <ul id="ul">
            <li style='display:block;'><img src="images/1.jpg" alt=""></li>
            <li><img src="images/2.jpg" alt=""></li>
            <li><img src="images/3.jpg" alt=""></li>
            <li><img src="images/4.jpg" alt=""></li>
            <li><img src="images/5.jpg" alt=""></li>
        </ul>
        <ol id='ol'>
            <li class='active'>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
    </div>

1.普通焦点图

window.onload=function(){
            var oUl=document.getElementById('ul');
            var aLi_u=oUl.getElementsByTagName('li');
            var oOl=document.getElementById('ol');
            var aLi_o=oOl.getElementsByTagName('li');
            for(var i=0;i<aLi_o.length;i++){
                aLi_o[i].index=i;
                aLi_o[i].onmouseover=function(){
                    for(var i=0;i<aLi_o.length;i++){
                        aLi_o[i].className='';
                        aLi_u[i].style.display='none';
                    }
                    this.className='active';
                    // console.log(aLi_o[this.index]);
                    aLi_u[this.index].style.display='block';
                }
            }
        }

效果图：图略

2.淡入淡出效果

var oUl=document.getElementById('ul');
var aLi_u=oUl.getElementsByTagName('li');
var oOl=document.getElementById('ol');
var aLi_o=oOl.getElementsByTagName('li');

for(var i=0;i<aLi_o.length;i++){
    aLi_o[i].index=i;
    aLi_o[i].onmouseover=function(){
            for(var i=0;i<aLi_o.length;i++){
                aLi_o[i].className='';
                aLi_u[i].style.display='none';
                aLi_u[i].style.filter='alpha(opacity=0)';
                aLi_u[i].style.opacity=0;
            }
            this.className='active';
            aLi_u[this.index].style.display='block';
            startMove(aLi_u[this.index],{opacity:100});
    };
}

效果图：
淡入淡出效果轮播图

3.向上滚动效果：

var oUl=document.getElementById('ul');
var aLi_u=oUl.getElementsByTagName('li');
var oOl=document.getElementById('ol');
var aLi_o=oOl.getElementsByTagName('li');
var LiHeight=aLi_u[0].offsetHeight;

for(var i=0;i<aLi_o.length;i++){
    aLi_o[i].index=i;
    aLi_o[i].onmouseover=function(){
       for(var i=0;i<aLi_o.length;i++){
          aLi_o[i].className='';

          this.className='active';

          startMove(oUl,{top:-this.index*LiHeight});
        }
    };
}

效果图：
上下切换效果

4.定时上下滚动：

window.onload=function(){
    var oBox=document.getElementById('box');
    var oUl=document.getElementById('ul');
    var aLi_u=oUl.getElementsByTagName('li');
    var oOl=document.getElementById('ol');
    var aLi_o=oOl.getElementsByTagName('li');
    var LiHeight=aLi_u[0].offsetHeight;
    var iNow=0;//当前索引
    var timer=null;//定时器

    for(var i=0;i<aLi_o.length;i++){
        aLi_o[i].index=i;
        aLi_o[i].onmouseover=function(){
            for(var i=0;i<aLi_o.length;i++){
                aLi_o[i].className='';

                this.className='active';
                //建立关系：很重要
                iNow=this.index;

                startMove(oUl,{top:-this.index*LiHeight});
            }
        };
    //开定时器
    timer=setInterval(toRun,2000);

    oBox.onmouseover=function(){
        clearInterval(timer);
    };
    oBox.onmouseout=function(){
        timer=setInterval(toRun,2000);
    };
    //定时函数
    function toRun(){
        if(iNow==aLi_o.length-1){
            iNow=0;
        }else{
            iNow++;
        }

        for(var i=0;i<aLi_o.length;i++){
            aLi_o[i].className='';
        }
        aLi_o[iNow].className='active';
        startMove(oUl,{top:-iNow*LiHeight});
    }
};