JavaScript 最终版无缝轮播图

🌙
手机阅读
本文目录结构
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>优化后的无缝轮播图</title>
    <style>
        body{-webkit-user-select: none; }
        ul,li{
            list-style: none;
        }
        #outer{
            width: 400px;
            height: 300px;
            position: relative;
            margin: 50px auto;
            overflow: hidden;
            cursor: pointer;
        }
        #inner{
            width: 2000px;
            height: 300px;
            position: absolute;
            left:0;
        }
        #inner div{
            width: 400px;
            height: 300px;
            float: left;
        }
        #ulHead{
            position: absolute;
            top: 250px;
            right: 20px;
        }
        #ulHead li{
            float: left;
            width: 20px;
            height: 20px;
            line-height: 20px;
            border-radius: 50%;
            text-align: center;
            background: #CCC;
            border: 1px solid orange;
            margin-right: 10px;
        }
    </style>
</head>
<body>
<div id="outer">
    <div id="inner">
        <div style="background:olive;"> 111111</div>
        <div style="background:blueviolet;"> 222222</div>
        <div style="background:aquamarine;"> 333333</div>
        <div style="background:chocolate;"> 444444</div>
        <div style="background:darkgoldenrod;"> 555555</div>
    </div>
    <ul id="ulHead">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>
</body>
</html>
<script>
    var innerDiv=document.getElementById("inner"),
            innerDivChild=innerDiv.getElementsByTagName("div");
    var ulHeadLi=document.getElementById("ulHead").getElementsByTagName("li");

    for(var i= 0,len=ulHeadLi.length;i<len;i++){
        ulHeadLi[i].index=i;
        var curNumber=null;
        /*鼠标点击的时候发生的;*/
        ulHeadLi[i].onclick=function(){
            startMove(innerDiv,{"left":-this.index*400});//开始运动
            autoMove.index=this.index;/*鼠标点击的时候,改变autoMove的索引值,这样定时器再次运动的时候,就会以当前的索引往下一个跳转了*/
            clearInterval(timer);
            timer=setInterval(autoMove,2000);
            /*下面是鼠标点击后的颜色设置*/
            liBackground();
        };
        /*鼠标放在图片上,离开图片的效果*/
        innerDivChild[i].onmouseover=function(){
            clearInterval(timer);
        };
        innerDivChild[i].onmouseout=function(){
            timer=setInterval(autoMove,2000);
        }
    }

    /*复制第一张图片添加到最后;实现无缝滚动*/
    var oFirstDiv=innerDiv.getElementsByTagName("div")[0];
    var oCopy=oFirstDiv.cloneNode(true);
    innerDiv.appendChild(oCopy);
    innerDiv.style.width=innerDiv.offsetWidth+oFirstDiv.offsetWidth+"px";


    /*下面是自动运动的*/
    autoMove.index=0;
    function autoMove(){
        autoMove.index++;
        if(autoMove.index==6){//如果索引值是6,则马上图片换成第一张图片;
            innerDiv.style.left=0;
            autoMove.index=1;//从第一张,往第二张走;
        };
        liBackground();
        startMove(innerDiv,{"left":autoMove.index*-400});
    }
    var timer=window.setInterval(autoMove,2000);

    /*下面是设置LI的背景颜色*///引用了autoMove上的index属性;
    ulHeadLi[autoMove.index].style.background="orange";/*给第一个li默认的颜色*/
    function liBackground(){
        /*设置li的颜色*/
        for(var i= 0,len=ulHeadLi.length;i<len;i++){
            ulHeadLi[i].style.background=""/*清空li的属性;*/
        }
        if(autoMove.index==5){/*第六章图片的时候,让第一个li选择*/
            ulHeadLi[0].style.background="orange";
        }else{
            ulHeadLi[autoMove.index].style.background="orange";
        }
    }

    /*运动的框架*/
    function startMove(ele, json, fnEnd) {//json是一个包含样式的JSON格式字符串;
//        var MAX=58;//如果是匀速运动,可以通过这个数控制匀速;
        clearInterval(ele.timer);
        ele.timer=setInterval(function (){
            var booleanTarget=true;
            for(var name in json) {//枚举JSON里面的属性和目标值;
                var iTarget=json[name];//目标值;
                if(name=='opacity') {//透明度因为要写兼容性处理,2种写法,所以opacity需要X100;
                    var cur=Math.round(parseFloat(setCss(ele, name))*100);
                } else if(name=='background'){
                    var cur=json[name];
                } else {
                    var cur=parseInt(setCss(ele, name));//对象的初始值;
                }
                var speed=(iTarget-cur)/8;//速度=(目标值-初始值)/一个数,属于减速运动;取速度;
                speed=speed>0?Math.ceil(speed):Math.floor(speed);//速度的取整;
//                if(Math.abs(speed)>MAX)speed=speed>0?MAX:-MAX;//如果是匀速,可以通过这个来控制速度;

                if(name=='opacity') {//如果输入透明度,需要为80这种的,不能是0.8
                    ele.style.filter='alpha(opacity:'+(cur+speed)+')';
                    ele.style.opacity=(cur+speed)/100;
                }else if(name=='background'){
                    ele.style[name]=cur;
                } else {
                    ele.style[name]=cur+speed+'px';
                }
                if(cur!=iTarget) {
                    booleanTarget=false;
                }
            }
            if(booleanTarget) {
                clearInterval(ele.timer);
                if(typeof fnEnd==="function") {
                    fnEnd();
                }
            }
        }, 20);
    }
    function setCss(curEle,attr,value) {//设置CSS属性值和获取CSS;如果三个参数就是设置,2个参数就是获取;att是attribute的缩写;
        if(typeof value==="undefined"){//如果有第三个参数,就是设置Css;如果没有就是获取Css;
            var reg = /^(?:margin|padding|border|float|position|display|background|backgroundColor)$/;
            var flag="getElementsByClassName" in document;
            var value = flag ? window.getComputedStyle(curEle, null)[attr] : curEle.currentStyle[attr];
            return !reg.test(attr) ? parseFloat(value) : value;
        } else{
            switch (attr) {
                case "opacity":
                    curEle["style"][attr] = value;
                    curEle["style"]["filter"] = "alpha(opacity=" + (value * 100) + ")";
                    break;
                case "zIndex":
                    curEle["style"][attr] = value;
                    break;
                default:
                    curEle["style"][attr] = !isNaN(value) ? value += "px" : value;
            }
        }
    };

</script>

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

目前重心已经放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>