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

最近整理了一下轮播图的需求以及不同的轮播图所用方式的比较。
制作轮播图首先要理清思路,然后实践起来就会很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
    }

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,904评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,581评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,527评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,463评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,546评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,572评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,582评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,330评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,776评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,087评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,257评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,923评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,571评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,192评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,436评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,145评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,127评论 2 352

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,005评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,086评论 4 62
  • 【秘爱之旅】活动通知 时间:2017.11.10 14:00−17:30 地址:珠海香洲区上华路2号...
    她说故事阅读 190评论 0 0
  • 该如何行走—真切明白,放下,开始 毕业三年,现在才开始走大四那年考试找工作的路,曾经看到身边的同学忙于实习、公考、...
    我是艺诺阅读 192评论 0 2
  • 来自 Mattt Thompson 利用代码块 Pragma Pragma Mark #pragma mark -...
    维维_iOS阅读 339评论 0 0