首页 > 代码库 > 没事写个幻灯片玩一下，发现了一个问题

没事写个幻灯片玩一下，发现了一个问题

2024-07-05 07:13:27   226人阅读

没事写个幻灯片玩了一下，开始没有问题，挺好的，后来我把页面最小化了，然后再最大化之后，整个效果就错了，应该是id为ppt的滚动距离错了，不知道怎么回事，有人碰见过类似的问题吗？

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>幻灯片</title>
<style type="text/css">
*{ margin:0; padding:0; list-style:none;}
.pptWrap{ position:relative; width:800px; height:280px; background:#f2f2f2; margin:100px auto; overflow:hidden;}
.pptWrap img{ display:block;}
#ppt{ height:280px; display:block; position:absolute; left:0; top:0; width:800px;}
#ppt li{ float:left;}
.bot{ position:absolute; width:100%; height:30px; text-align:right; color:#000; bottom:0; left:0; z-index:100;}
.bot a{display:inline-block; height:18px; width:18px; font-size:14px; color:#fff; text-align:center; line-height:18px; border:1px solid #f4f4f4; background:#6CF; margin:5px 10px 0 0; text-decoration:none;}
.bot a.active{ border:1px solid #fff; color:#6CF; background:#FF9;}
.bg{ opacity:0.5; background:#000; position:absolute; bottom:0; left:0; width:100%; height:30px; z-index:99;}
</style>
</head>
<body>
<div class="pptWrap" id="pptWrap">
        <ul id="ppt">
            <li><img src="images/01.jpg" /></li>
            <li><img src="images/02.jpg" /></li>
            <li><img src="images/03.jpg" /></li>
            <li><img src="images/04.jpg" /></li>
            <li><img src="images/05.jpg" /></li>
        </ul>
</div>
</body>
</html>
<script type="text/javascript">
window.onload=function(){
    var now=0;
    var timer=null;
    var wrap=document.getElementById("pptWrap");
    var ppt=document.getElementById("ppt");
    var aLi=ppt.getElementsByTagName("li");
    var step=aLi[0].offsetWidth;
    var num=aLi.length;
    ppt.style.width=step*num+"px";
    var oDiv=document.createElement("div");
    var oDivbg=document.createElement("div");
    oDivbg.className="bg";
    wrap.appendChild(oDivbg)
    oDiv.className="bot";
    for(var i=0;i<aLi.length;i++){
        var aA=document.createElement("a");
        if(i==now){
            aA.className="active";
        }
        aA.innerHTML=i+1;
        aA.setAttribute("href","#");
        oDiv.appendChild(aA);
    }
    
    wrap.appendChild(oDiv)
    
    //生成按钮，且给按钮添加点击滚动效果
    var aa=wrap.getElementsByTagName("a");
    for(var i=0;i<num;i++){
        (function(n){
            aa[n].onclick=function(){            
                for(var j=0;j<num;j++){
                    aa[j].className="";
                }
                now=n;
                aa[n].className="active";
                move(ppt,-step*now);
                
            }
        })(i)
    }
    
    //鼠标移上计时器关闭
    wrap.onmouseover=function(){
        clearInterval(timer);
    }
    
    //鼠标移开后计时器开启
    wrap.onmouseout=function(){
        timer=setInterval(function(){
        for(var j=0;j<num;j++){
            aa[j].className="";
        }
        aa[now].className="active";
        move(ppt,-step*now);
        now++;
        if(now==num){
            now=0;
        }
        
    },2000)    
    }
    
    //默认鼠标移开
    wrap.onmouseout();
    

    //运动框架
    function move(obj,target){
        var timer=null;
        clearInterval(timer);
        var speed=parseInt((target-obj.offsetLeft)/10);
        timer=setInterval(function(){
            if(obj.offsetLeft==target){
                clearInterval(timer);
            }else{
                if(speed<1){
                    apeed=1;
                    }
                obj.style.left=obj.offsetLeft+speed+"px";
            }
        },30)
    }    
}
</script>

 


联系
我们