運行效果如下：
代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS按鈕控制內容左右滾動</title> <style> *{ padding: 0; margin: 0;} li{ list-style: none;} .clearfix{ *zoom:1;} .clearfix:after{ clear: both; display: block; content: ""; height: 0; overflow: hidden;} a{ text-decoration: none; color: #333;} a:hover{ color: #f00;} .center{ text-align: center; margin-top: 20px; font-family: "Microsoft Yahei";} #box{ width: 700px; margin: 20px auto; border: 1px solid #ccc; background: #fff; font-size: 12px; position: relative; height: 120px;} #left ,#right{ position: absolute; z-index: 2px; cursor: pointer; background: #eee; width: 20px; text-align: center; height: 100%; line-height: 2.4; } #left{ left: 0;} #right{ right: 0;} .content{ margin-left: 20px; width: 660px; height: 120px; overflow: hidden; position: relative; background: #ccc;} #wrap{ position: absolute; left: 0; width: 1500px;} #wrap ul{ padding: 10px 0;} #wrap li{ float: left; width: 120px; height: 100px; background: purple; margin-left: 10px;} </style> </head> <body> <h3 class="center">先向左滾動試試，然后向右滾動試試</h3> <div id="box"> <a id="left" href="javascript:;">向左滾動</a> <a id="right" href="javascript:;">右下滾動</a> <div class="content"> <div id="wrap"> <ul class="clearfix"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </div> </div> </div> <script> // 封裝getStyle函數 function getStyle(obj,attr){ return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,false)[attr]; } window.onload = function(){ var oBox = document.getElementById('box'); // alert(getStyle(oBox,'width')); // 700px var oLeft = document.getElementById('left'); var oRight = document.getElementById('right'); var oWrap = document.getElementById('wrap'); var num = 0; var timer = null; oLeft.onmousedown = function(){ oWrap.timer = setInterval(function(){ var dis = parseInt(getStyle(oWrap,'left')) - 5; if(dis < -650){ dis = -650; } oWrap.style.left = dis + 'px'; },30); }; oLeft.onmouseup = function(){ clearInterval(oWrap.timer); }; oRight.onmousedown = function(){ oWrap.timer = setInterval(function(){ var dis = parseInt(getStyle(oWrap,'left')) + 5; if(dis > 0){ dis = 0; } oWrap.style.left = dis + 'px'; },30); }; oRight.onmouseup = function(){ clearInterval(oWrap.timer); }; }; /*function getStyle(obj ,attr){ return obj.currentStyle ? obj.currentStyle[attr] :getComputedStyle(obj ,false)[attr]; } window.onload = function(){ var oBox = document.getElementById('box'); // alert(getStyle(oBox,'width')) // 168px var oUp = document.getElementById('up'); var oDown = document.getElementById('down'); var oWrap = document.getElementById('wrap'); var num = 0; var timer = null; // 鼠標按下向上鏈接，開啟定時器 oUp.onmousedown = function(){ oWrap.timer = setInterval(function(){ // 先獲取內容的top值[獲取的是字符串，所以要用parseInt轉換成數字]，然后讓它每隔300ms減少5px使之向上運動 var dis = parseInt(getStyle(oWrap,'top')) - 5; // 這里的200是根據當前案例設置的，可以根據實際情況調整數值 if( dis < -220){ dis = -220; } oWrap.style.top = dis + 'px'; },30); }; // 鼠標移開向上鏈接，關閉定時器 oUp.onmouseup = function(){ clearInterval(oWrap.timer); }; // 鼠標按下向下鏈接，開啟定時器 oDown.onmousedown = function(){ oWrap.timer = setInterval(function(){ var dis = parseInt(getStyle(oWrap,'top')) + 5; if(dis > 0){ dis = 0; } oWrap.style.top = dis + 'px'; },30); }; // 鼠標移開向下鏈接，關閉定時器 oDown.onmouseup = function(){ clearInterval(oWrap.timer); }; };*/ </script> </body> </html>