左右点击
来源：互联网 发布：qq人肉软件 编辑：程序博客网 时间：2024/04/28 04:13
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>JS同级联切换</title><style>body{margin:0px;padding:0px;font-size:12px;}span,ul,li{margin:0px;padding:0px;}ul,li{list-style-type:none;}#box{width:400px;height:400px;margin:0 auto;}#btleft,#btright{width:80px;line-height:25px;float:left;}#cont{width:250px;height:100px;float:left;overflow:hidden;position:relative;}#conscroll{width:4000px;position:absolute;}#cont span{width:250px;height:100px;float:left;background:#FCC;color:#000;float:left;display:block;}#cul{width:400px;height:30px;float:left;}#cul li{width:50px;float:left;height:30px;background:#333;opacity:0.5;filter:alpha(opacity=50);margin-right:10px;color:#FFF;}#cul li.op{opacity:1;filter:alpha(opacity=100);}#culS{width:100%;float:left;}</style><script>var $=function(id){return typeof id === "string" ? document.getElementById(id) : id}window.onload=function(){var pre=$("btleft");var next=$("btright");var cont=$("cont");var cWidth=cont.clientWdith;var cons=$("conscroll");var sp=cont.getElementsByTagName("span");var oUl=$("cul");var oLi=oUl.getElementsByTagName("li");var iNow=0;var w=0;var index=0;pre.onclick=function(){if(iNow <=0){alert("前边没图鸟");return;}iNow--;oLifn()cons.style.left=cons.offsetLeft + cont.offsetWidth + "px";}next.onclick=function(){if(iNow >= sp.length-1){ alert("last pic");return;}iNow++; cons.style.left=cons.offsetLeft - cont.offsetWidth + "px";oLifn();}function oLifn(){for(var i=0;i<oLi.length;i++){for(var n=0;n<oLi.length;n++) oLi[n].className="";oLi[iNow].className="op";}}for(var n=0;n<oLi.length;n++){oLi[n].index=n;oLi[n].onclick=function(){index=this.indexfor(var s=0;s<oLi.length;s++) oLi[s].className="";this.className="op";a(index);iNow=index;}}function a(index){w=sp[0].clientWidth;cons.style.left=-(w * index)+ "px";}}</script></head><body><div id="box"> <a href="javascript:void(0)" id="btleft">Pre</a> <div id="cont"> <div id="conscroll"> <span>111111111111111111111111111111</span><span>2222222222222222</span><span>3333333333333</span><span>4444444444444444</span> <span>555544</span> <span>6666444</span> <span>7777444</span> </div> </div> <a href="javascript:void(0)" id="btright">Next</a> <ul id="cul"> <div id="culS"> <li class="op">1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li> </div> </ul></div></body></html>
