鼠标控制图层内容左右滚动网页特效，压住左右切换按钮实现滚动显示特效，根据自己的需求来修改图层内容。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>点击左右按钮切换图层显示效果_武鸣人</title>
<style type="text/css">
#wuming_scroll{width:960px;height:70px;border:#ccc 1px solid;}
#left_wuming_ren{float:left;width:15px;height:42px;padding:28px 0 0 6px;background:#eee;cursor:pointer;color:#06c;margin-right:5px;}
#right_wuming_ren{float:right;width:15px;height:42px;padding:28px 0 0 6px;background:#eee;cursor:pointer;color:#06c;}
#wuming_scroll .mousedown{background:#ccc;}
#left_wuming_ren:hover,#right_wuming_ren:hover{color:#909;font-weight:bold;}
#wwwwumingren_box{width:900px;float:left;background:#fff;overflow:hidden;}
#wwwwumingren_box ul{width:1500px;height:60px;padding:5px;margin:0;font-size:12px;line-height:20px;list-style:outside none none;}
#wwwwumingren_box ul li{background:#909;float:left;display:inline;padding:20px 10px;margin:0 5px;color:#fff;}
</style>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
鼠标压住左右按钮看效果！
<div id="wuming_scroll"><span id="left_wuming_ren"><</span><span id="right_wuming_ren">></span>
<div id="wwwwumingren_box">
<ul>
<li>武鸣一号</li>
<li>武鸣二号</li>
<li>武鸣三号</li>
<li>武鸣四号</li>
<li>武鸣五号</li>
<li>武鸣六号</li>
<li>武鸣七号</li>
<li>武鸣八号</li>
<li>武鸣九号</li>
<li>武鸣十号</li>
<li>武鸣十一号</li>
<li>武鸣十二号</li>
<li>武鸣十三号</li>
<li>武鸣十四号</li>
<li>武鸣十五号</li>
</ul>
</div>
</div>
<script type="text/javascript">
var obj=document.getElementById("wwwwumingren_box");
var left_wuming_ren=document.getElementById("left_wuming_ren");
var right_wuming_ren=document.getElementById("right_wuming_ren");
i=0;
function scrollfucleft(){
i++;
if(obj.scrollLeft<290){
obj.scrollLeft+=i;
}else{
clearInterval(t);
i=0;
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function scrollfucright(){
i++;
if(obj.scrollLeft>0){
obj.scrollLeft-=i;
}else{
clearInterval(t);
i=0;
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
right_wuming_ren.onmousedown=function(){t=setInterval(scrollfucleft,5);right_wuming_ren.className="mousedown";}
right_wuming_ren.onmouseup=function(){clearInterval(t);i=0;right_wuming_ren.className="";}
left_wuming_ren.onmousedown=function(){t=setInterval(scrollfucright,5);left_wuming_ren.className="mousedown";}
left_wuming_ren.onmouseup=function(){clearInterval(t);i=0;left_wuming_ren.className="";}
</script>
</body>
</html>本文来自武鸣人网站，转载请注明出处