HTML+CSS+JavaScript完成滚动栏效果

来源：互联网发布：数字图像处理算法研究编辑：程序博客网时间：2024/05/01 01:36
通过HTML+CSS+JavaScript完成滚动栏效果

效果如下：
源代码：
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        * {            margin: 0;            padding: 0;        }        #div1 ul{            position: absolute;            left: 0px;            top: 0px;        }        #div1 ul li img {            width: 187px;            height: 125px;        }        #div1 ul li{            float: left;            width: 187px;            height: 125px;            list-style: none;        }        #div1{            width: 748px;            height: 125px;            position: relative;            background-color: chartreuse;            overflow: hidden;            float: left;        }        #body{            width: 948px;            height: 125px;            margin: 100px auto;        }        #body #leftDiv{            float: left;            width: 100px;            height: 100px;        }        #body #rightDiv{            float: left;            width: 100px;            height: 100px;        }                #body #leftDiv button{            background-image: url("image/left.PNG");            width: 100px;            height: 100px;        }        #body #leftDiv button img{            width: 100px;            height: 100px;        }        #body #rightDiv button img{            width: 100px;            height: 100px;        }    </style>    <script>        window.onload=function(){            var oDiv=document.getElementById('div1');            var oUl=oDiv.getElementsByTagName('ul')[0];            var oLi=oUl.getElementsByTagName('li');            var oLeft=document.getElementById('leftDiv');            var oright=document.getElementById('rightDiv');            oUl.innerHTML+=oUl.innerHTML;            oUl.style.width=oLi[0].offsetWidth*oLi.length+'px';            var speed=-2;            function move(){                if (oUl.offsetLeft<-oUl.offsetWidth/2){                    oUl.style.left='0';                }else if(oUl.offsetLeft>0){                    oUl.style.left=-oUl.offsetWidth/2+'px';                }                oUl.style.left=oUl.offsetLeft+speed+'px';            };            var timer=setInterval(move,30);            oLeft.onclick=function(){                speed=-2;            };            oright.onclick= function () {                speed=2;            };            oUl.onmouseover=function(){                clearInterval(timer);            };            oUl.onmouseout=function(){                timer=setInterval(move,30);            };        }    </script></head><body><div id="body">    <div id="leftDiv"><button><img src="image/left.PNG"/></button></div>    <div id="div1">        <ul>            <li><img src="image/1.JPG"/></li>            <li><img src="image/2.JPG"/></li>            <li><img src="image/3.JPG"/></li>            <li><img src="image/4.JPG"/></li>        </ul>    </div>    <div id="rightDiv"><button><img src="image/right.PNG"/></button></div></div></body></html>
0 0