banner图效果

最新推荐文章于 2020-09-03 14:43:57 发布

原创最新推荐文章于 2020-09-03 14:43:57 发布 · 187 阅读

CC 4.0 BY-SA版权

本文详细介绍了如何使用CSS和JavaScript实现一个动态轮播图效果，包括图片的无缝滚动、定时器控制及动画平滑过渡等关键技术点。

* {
                margin:0px;
                padding:0px;
            }
            #ul1 li {
                list-style: none;
                width:200px;
                height:200px;
                margin:10px;
                float:left;
            }
            #ul1 li img {
                width:100%;
                height:100%;
            }
            #ul1 {
                position: absolute;
                left:0px;
            }
            #div1 {
                width:880px;
                height:220px;
                border:1px solid black;
                margin: 50px auto;
                position: relative;
                overflow: hidden;
            }

在这里插入图片描述

window.onload = function(){
                var oUl1 = document.getElementById("ul1");
                var oDiv1 = document.getElementById("div1");

                /*
                  直接把这四张图片再添加到末尾
                */

                oUl1.innerHTML += oUl1.innerHTML;

                //重新设置一下ul的宽
                oUl1.style.width = 220 * 8 + "px";

                setInterval(function(){
                    //让ul向左运动一个图片宽
                    starMove(oUl1,{
                        left:oUl1.offsetLeft - 220
                    },function(){
                        if(oUl1.offsetLeft <= -oUl1.offsetWidth / 2){
                            oUl1.style.left = "0px";
                        }
                    });
                },2000);

            }

startMove.js

//样式框架
function starMove(node,cssObj,complete){
    clearInterval(node.timer);
    node.timer = setInterval(function(){
        var isEnd = true;//假设所有的动画都达到目的值了
        for(var attr in cssObj)
        {
            var iTarget = cssObj[attr];
            //计算速度
        if(attr=="opacity"){
            iCur = parseInt(parseFloat(getStyle(node,"opacity"))*100);
        }else{
            iCur = parseInt(getStyle(node,attr));
        }
        var speed = (iTarget - iCur) / 8;
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
        
        if(attr=="opacity"){
            iCur += speed;
            node.style.opacity = iCur / 100;
            node.style.filter = "alpha(opacity=" + iCur +")"
        }else{
        node.style[attr] = iCur + speed + "px";
        }

        if(iCur != iTarget){
            isEnd = false;
        }

        }
        if(isEnd){
            clearInterval(node.timer);
            if(complete){
                complete.call(node);
            }
        }
        
        
    },30);

}
//获取当前有效样式浏览器兼容写法
function getStyle(node,cssStr){
    return node.currentStyle ? node.currentStyle[cssStr]:getComputedStyle(node)[cssStr];
}