JS同级联图片切换-优快云博客

本文链接：https://blog.youkuaiyun.com/swanhung/article/details/7712536
<!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.οnlοad=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.οnclick=function(){
			if(iNow <=0)
			{
				alert("前边没图鸟");
				return;
			}
			iNow--;
			oLifn()
			cons.style.left=cons.offsetLeft + cont.offsetWidth + "px";
		}
		next.οnclick=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].οnclick=function(){
				index=this.index
				for(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>
左右点击
