运动框架和轮播图_运动网店轮播图-CSDN博客

本文链接：https://blog.csdn.net/SUNZEXUE/article/details/117231680

这个博客介绍了一个使用JavaScript编写的运动框架，用于实现元素的平滑动画效果。同时，它还展示了如何利用这个框架来创建一个轮播功能，包括左右切换和点击导航点切换。轮播功能中包含了自动播放、过渡动画以及点击事件处理。

摘要由CSDN通过智能技术生成

运动框架

 function startMove(dom, attrObj,callback) { // 传入一个元素，我让元素运动城你想要的的目标
            clearInterval(dom.timer)
            var iSpeed = null,
                iCur = null;
            dom.timer = setInterval(function () {
                var bStop = true;
                for (var attr in attrObj) { 
                    if (attr == "opacity") {
                        iCur = parseFloat(getStyle(dom, attr)) * 100
                    } else {
                        iCur = parseFloat(getStyle(dom, attr))
                    }
                    iSpeed = (attrObj[attr] - iCur) / 7;
                    iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed)
                    if (attr == "opacity") {
                        dom.style.opacity = (iCur + iSpeed) / 100
                    } else {
                        dom.style[attr] = iCur + iSpeed + "px"
                    }
                    if(iCur != attrObj[attr]){
                        bStop = false
                    }
                }
                if(bStop){
                    clearInterval(dom.timer)
                    typeof callback == "function" && callback()
                }
            }, 30)
        }
        function getStyle(dom,attr){
            if(window.getComputedStyle){
                return window.getComputedStyle(dom,null)[attr]
            }else{
                return dom.currentStyle[attr]
            }
        }

轮播

  var ul = document.getElementsByTagName("ul")[0]
        var moveWidth = ul.children[0].offsetWidth;
        var right = document.getElementsByTagName("btn")[0]
        var left = document.getElementsByTagName("btn")[1]
        var span = document.querySelectorAll("span")
        var num = ul.children.length -1;
        var timer = setTimeout(autoMove,2500)
        var lock = true;
        var index = 0
        right.onclick =function(){
            autoMove("下")
        }
        left.onclick =function(){
            autoMove("上")
        }
        function autoMove(dertion){
            if(lock){
                lock = false
                    clearTimeout(autoMove,2500)
                    if(!dertion||dertion =="下"){
                        index ++;
                        startMove(ul,{ul:ul.offsetLeft - moveWidth},function(){
                            if(ul.offsetLeft == - num*moveWidth){
                                ul.style.left = "0px"
                            }
                            timer = setTimeout(autoMove,2500)
                            lock = true
                           changeIndex(index)
                        })
                    }else if(dertion == "上"){
                        if(ul.offsetLeft == 0){
                            ul.style.left = -num *moveWidth +"px"
                        }
                        index --;
                        startMove(ul,{ul:ul.offsetLeft + moveWidth},function(){
                            timer = setTimeout(autoMove,2500)
                            lock = true
                            changeIndex(index)
                        })
                    }
                }
            }
        function changeIndex(_index){
            for(var i=0;i<span.length;i++){
                span[i].className = ""
            }
            spam[_index].className = "active"
            for(var i =0;i<span.length;i++){
                (function(myindex){
                    span[i].onclick = function(){
                        lock = false
                        clearTimeout(timer)
                        startMove(ul,{left:-myindex*moveWidth},function(){
                            lock=true
                            timer =setTimeout(autoMove,2500)
                            changeIndex(myindex)
                            index=myindex
                        })
                       
                    }
                })(i)
            }
        }