• js无缝滚动


    1.html代码

    <div class="box"> 
            <ul>
                <li class="show"><img src="images/1.jpg"></li>
                <li><img src="images/2.jpg"></li>
                <li><img src="images/3.jpg"></li>
                <li><img src="images/4.jpg"></li>
                <li><img src="images/5.jpg"></li>
            </ul>
            <ol>
                <li class="active">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ol>
        </div>

    2.css代码

    <style type="text/css">
        body, div, ul ,li, ol{margin:0;padding:0;} 
        img{border:none;vertical-align: top}
        li{list-style: none}
        .box{width:470px;height: 150px;margin:30px auto;overflow:hidden;position: relative;}
        ul{width:470px;height: 150px;position: absolute;left:0;top:0;z-index:1;}
        ul li{float: left;width: 470px;}
        ul li.show{display: block;}
        ol{position: absolute;right: 10px;bottom:10px;z-index: 2;width:120px}
        ol li{float: left;width: 20px;height:20px;background: #fff;color:orange;margin-right:3px;line-height: 20px;text-align: center;cursor:pointer;}
        ol li.active{background: orange;color:#fff;}
        </style>

    3.js

    window.onload = function(){
            var oUl = document.getElementsByTagName('ul')[0],
                oOL = document.getElementsByTagName('ol')[0],
                aLi = oUl.getElementsByTagName('li'),
                aOL = oOL.getElementsByTagName('li'),
                oneHeight = aLi[0].offsetHeight,
                iNow = 0,
                iNow2 = 0,
                time = null,
                oBox = document.querySelector('.box');
                for(var i=0; i<aLi.length;i++){
                    aOL[i].index = i;
                    aOL[i].onclick = function(){
                        for(var j=0; j<aOL.length; j++){
                            aOL[j].className = '';
                        }
                    aOL[this.index].className = 'active';
                    iNow = this.index;
             iNow2 = this.index' startMove(oUl,{top :
    -this.index*oneHeight}) } } time = setInterval(run,1000) oBox.onmouseover = function(){ clearInterval(time); } oBox.onmouseout = function(){ time = setInterval(run,1000) } function run(){ if(iNow == 0){ aLi[0].style.position = 'static'; oUl.style.top = 0; iNow2 = 0; } if(iNow == aLi.length - 1){ iNow = 0; aLi[0].style.position = "relative"; aLi[0].style.top = aLi.length*oneHeight + 'px'; }else{ iNow++; } iNow2++; for(var j=0; j<aOL.length; j++){ aOL[j].className = ''; } aOL[iNow].className = 'active'; startMove(oUl,{top : -iNow2*oneHeight}) } }

    4.运动框架

    // JavaScript Document
    
    function startMove(obj,json,endFn){
        
            clearInterval(obj.timer);
            
            obj.timer = setInterval(function(){
                
                var bBtn = true;
                
                for(var attr in json){
                    
                    var iCur = 0;
                
                    if(attr == 'opacity'){
                        if(Math.round(parseFloat(getStyle(obj,attr))*100)==0){
                        iCur = Math.round(parseFloat(getStyle(obj,attr))*100);
                        
                        }
                        else{
                            iCur = Math.round(parseFloat(getStyle(obj,attr))*100) || 100;
                        }    
                    }
                    else{
                        iCur = parseInt(getStyle(obj,attr)) || 0;
                    }
                    
                    var iSpeed = (json[attr] - iCur)/8;
                iSpeed = iSpeed >0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                    if(iCur!=json[attr]){
                        bBtn = false;
                    }
                    
                    if(attr == 'opacity'){
                        obj.style.filter = 'alpha(opacity=' +(iCur + iSpeed)+ ')';
                        obj.style.opacity = (iCur + iSpeed)/100;
                        
                    }
                    else{
                        obj.style[attr] = iCur + iSpeed + 'px';
                    }
                    
                    
                }
                
                if(bBtn){
                    clearInterval(obj.timer);
                    
                    if(endFn){
                        endFn.call(obj);
                    }
                }
                
            },30);
        
        }
        
        
        function getStyle(obj,attr){
            if(obj.currentStyle){
                return obj.currentStyle[attr];
            }
            else{
                return getComputedStyle(obj,false)[attr];
            }
        }

    5.一个无缝滚动的效果就做了出来

  • 相关阅读:
    debian 9 安装AMD驱动
    DDL、DML、DCL、DQL的理解
    呼叫中心坐席功能都有哪些?
    使用vi编辑器的问题
    百度聊天机器人UNIT http访问
    通过http方式 post天气,并合成语音
    单链表的基本操作
    pip下载慢解决(添加国内镜像)
    Anaconda+Tensorflow配置说明
    gdb的基本使用
  • 原文地址:https://www.cnblogs.com/fuxiang-yang/p/4646450.html
Copyright © 2020-2023  润新知