焦点轮播图的方式和不同思路

最近整理了一下轮播图的需求以及不同的轮播图所用方式的比较。
制作轮播图首先要理清思路，然后实践起来就会很easy啦，下面总结一下遇到的需求和具体解决方法。

1、点击或者鼠标划过时显示对应的图片

轮播.gif

这种模式比较简单，属于最基础的点击切换图片，
html布局

<div id="box">
    <ul>
        <li style='display:block'>![](1.jpg)</li>
        <li>![](2.jpg)</li>
        <li>![](3.jpg)</li>
    </ul>
    <ol>
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
    </ol>
</div>

主要思路：图片的display为none，点击对应按钮时使对应图片的display为block。

window.onload=function(){
            var uli=document.getElementsByTagName('ul')[0].getElementsByTagName('li');
            var oli=document.getElementsByTagName('ol')[0].getElementsByTagName('li');
            for (var i = 0; i < oli.length; i++) {
                oli[i].index=i;
                oli[i].onmouseover=function(){
                    for (var i = 0; i < oli.length; i++) {
                        oli[i].className='';
                        uli[i].style.display='none';
                    }
                    this.className='active';
                    uli[this.index].style.display='block';
                }
            }
        }

2、淡入淡出效果

淡入淡出.gif

做淡入淡出效果的布局主要是利用定位，先将几张图片采用absolute定位，并将display设置为none，初始的透明度opacity设置为0.需要显示哪张就将他的display设置为block，并将透明度设置为1；

window.onload=function(){
            var uli=document.getElementsByTagName('ul')[0].getElementsByTagName('li');
            var oli=document.getElementsByTagName('ol')[0].getElementsByTagName('li');
            for (var i = 0; i < oli.length; i++) {
                oli[i].index=i;
                oli[i].onmouseover=function(){
                    for (var i = 0; i < oli.length; i++) {
                        oli[i].className='';
                        uli[i].style.display='none';
                        startMove(uli[i],{opacity:0},function(){
                            this.style.display='none';
                        })
                    }
                    this.className='active';
                    uli[this.index].style.display='block';
                    startMove(uli[this.index],{opacity:100})
                }
            }
        }

3、自动播放

自动播放无缝连接.gif

实现自动播放主要设置一个定时器，每2s自动播放下一张图片，播放到最后一张转到第一张图片时需要使用无缝衔接，有几种思路

首尾复制图片，到首尾的时候再拉取到最初的位置，但这样做有点麻烦
第二种做法是采用定位，当播放到最后一张图片时，将第一张图片定位到最后一张下面，要采用relative定位，不能用absolute，再播放完后在拉取到最初的位置。我采用的是第二种做法。

window.onload = function() {
        var uli = document.getElementsByTagName('ul')[0].getElementsByTagName('li');
        var oli = document.getElementsByTagName('ol')[0].getElementsByTagName('li');
        var ul = document.getElementsByTagName('ul')[0];
        var box=document.getElementById('box');
        var onePicHeight = uli[0].offsetHeight;
        var iNow = 0;
        var iNow2=0;
        for (var i = 0; i < oli.length; i++) {
            oli[i].index = i;
            oli[i].onmouseover = function() {
                for (var i = 0; i < oli.length; i++) {
                    oli[i].className = '';
                }
                this.className = 'active';
                iNow=this.index;
                iNow2=this.index;
                startMove(ul, { top: -this.index * onePicHeight })
            }
        }
        timer=setInterval(toRun, 2000);
        box.onmouseover=function(){
           clearInterval(timer);
        }
        box.onmouseout=function(){
             timer=setInterval(toRun, 2000);
        }
        function toRun() {
            if(iNow==0){
                uli[0].style.position='static';
                ul.style.top=0;
                iNow2=0;
            }
            if (iNow == uli.length-1) {
                iNow = 0;
                uli[0].style.position='relative';
                uli[0].style.top=uli.length*onePicHeight+'px';
            } else {
                iNow++;
            }
            iNow2++;
            for (var i = 0; i < oli.length; i++) {
                oli[i].className = '';
            }
            oli[iNow].className = 'active';
            startMove(ul, { top: -iNow2 * onePicHeight })
        }
    }

4、左右自动播放

实现这个主要是布局比较特殊，将未展示图片定位到他旁边，需要展示的时候拉取过来就可以了。正在展示的图片可以根据要展示的index大小决定向左定位还是向又定位，以实现从左或者从右拉取的效果。

image.png

 window.onload = function() {
        var uli = document.getElementsByTagName('ul')[0].getElementsByTagName('li');
        var oli = document.getElementsByTagName('ol')[0].getElementsByTagName('li');
        var ul = document.getElementsByTagName('ul')[0];
        var box=document.getElementById('box');
        var onePicHeight = uli[0].offsetHeight;
        var iNow = 0;
        var iNow2=0;
        for (var i = 0; i < oli.length; i++) {
            oli[i].index = i;
            oli[i].onmouseover = function() {
                for (var i = 0; i < oli.length; i++) {
                    oli[i].className = '';
                }
                this.className = 'active';
                iNow=this.index;
                iNow2=this.index;
                startMove(ul, { top: -this.index * onePicHeight })
            }
        }
        timer=setInterval(toRun, 2000);
        box.onmouseover=function(){
           clearInterval(timer);
        }
        box.onmouseout=function(){
             timer=setInterval(toRun, 2000);
        }
        function toRun() {
            if(iNow==0){
                uli[0].style.position='static';
                ul.style.top=0;
                iNow2=0;
            }
            if (iNow == uli.length-1) {
                iNow = 0;
                uli[0].style.position='relative';
                uli[0].style.top=uli.length*onePicHeight+'px';
            } else {
                iNow++;
            }
            iNow2++;
            for (var i = 0; i < oli.length; i++) {
                oli[i].className = '';
            }
            oli[iNow].className = 'active';
            startMove(ul, { top: -iNow2 * onePicHeight })
        }
    }

5、手风琴式效果

image.png

采用定位方式讲=将剩余图片定位到左边，有一定间隔，点击哪个就让那张定位到可视窗口即可。

 window.onload = function() {
        var uli = document.getElementsByTagName('ul')[0].getElementsByTagName('li');
        var ul = document.getElementsByTagName('ul')[0];
        var box = document.getElementById('box');
        var onePicWidth = uli[0].offsetWidth;
        var iNow = 0;
        var btn = true;
        for (var i = 1; i < uli.length; i++) {
            uli[i].style.left = (620 - 60) + (i - 1) * 30 + 'px';
        }
        for (var i = 0; i < uli.length; i++) {
            uli[i].index = i;
            uli[i].onmouseover = function() {
                for (var i = 0; i < uli.length; i++) {
                    if(i<=this.index){
                        startMove(uli[i],{left:i*30});
                    }else{
                        startMove(uli[i],{left:(620 - 60) + (i - 1) * 30 });
                    }
                }
            }

        }
    }

startMove封装函数

//封装运动函数
// var time=null;
// var alpha=30;
//attr, iTatget  startMove(obj,{attr1:iTarget1,attr2:iTarget2},fn)
function startMove(obj, json, fn) {
    var flag = true; //假设所有运动都到达了目标值
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        //取当前值
        for (var attr in json) {
            var incur = 0;
            if (attr == "opacity") {
                incur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
            } else {
                incur = parseInt(getStyle(obj, attr));
            }
            //算速度
            var speed = (json[attr] - incur) / 8;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

            //检测停止

            if (incur != json[attr]) {
                flag = false;
            }else{
                flag=true;
            }
            if (attr == "opacity") {
                obj.style.filter = 'alpha(opacity:' + (incur + speed) + ')';
                obj.style.opacity = (incur + speed) / 100;
            } else {
                obj.style[attr] = incur + speed + "px";
            }
            if (flag) {
                clearInterval(obj.timer);
                if (fn) {
                    fn();
                }
            }
        }
    }, 30);

}

function getStyle(obj, attr) {
    if (obj.currentStyle) { //ie
        return obj.currentStyle[attr];
    } else {
        return getComputedStyle(obj, false)[attr]; //firefox
    }

}