バッファスクロール

13225 ワード

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
        <style>
                *{margin: 0;padding: 0;}
                ul,li{list-style: none;}
                img{border: none;}

                #scroll{margin: 0px auto;width: 180px;height: 110px; 
                position: relative;overflow: hidden;}
                #scroll ul{width: 720px;height: 110px; position: 
                absolute;left: 0px;top: 0px;}
                #scroll ul li{float: left;}
                #scroll li:hover{padding: 2px;}
                style>
        <script src="js/hcgd.js">script>
    head>
    <body>
        <div id="scroll">
            <ul >
                <li><img src="img/1.jpg" >li>
                <li><img src="img/2.jpg" >li>
                <li><img src="img/3.jpg" >li>
                <li><img src="img/4.jpg" >li>
            ul>
            
        div>
    body>
html>
window.onload=function()
{
    var oDiv=document.getElementById('scroll');
    var oUl=oDiv.getElementsByTagName('ul')[0];
    var aLi=oUl.getElementsByTagName('li');
    var dots = document.querySelectorAll(".dot li");
    var imgs = document.querySelectorAll(".scroll>li");
    
    var timer = null;
    var ispeed=5;
    var Width=178;
    oUl.innerHTML+=oUl.innerHTML;
    
    oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
    startMove();          // 
    oDiv.onmouseover=function(){
        clearInterval(timer);
        timer=null;
    }
    oDiv.onmouseout=function(){
        startMove();   // 
    }
    function startMove(){            // 
        timer=setInterval(function(){
    
            
            if(oUl.offsetLeft>-oUl.offsetWidth/2){
                ispeed=(Width+oUl.offsetLeft)/8;
                ispeed=Math.ceil(ispeed);
                oUl.style.left=oUl.offsetLeft-ispeed+'px';
                
                }
            else{
                oUl.style.left='0px';
                oUl.offsetLeft='0px';
                Width=178;}
            if(ispeed<=0)
            {ispeed=5;
            Width=Width+178;}        
        
        },50);
        }
    
    }