求大神帮忙修改下代码！

qingwadaxia_1 2017-08-30 04:27:06

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<title></title>

<meta name="keywords" content="移动，切换" />

<link rel="stylesheet" type="text/css" href="http://www.ncwseo.com/js/style.css" />

<script type="text/javascript" src="http://www.ncwseo.com/js/zepto_min.js"></script>

<script type="text/javascript" src="http://www.ncwseo.com/js/touchslider.js"></script>



<style type="text/css">

 

*{padding:0;margin:0;}

 

.aa{

 

height:54px;

 

overflow-x:scroll;

 

}

 

.aa ul {

 

white-space: nowrap;

 

height:40px;

 

}

 

.aa ul li {

 

width: 50px; height:40px;display: inline-block; vertical-align:middle;}

 

.aa ul li a{

 

display: block;

 

height: 40px;

 

line-height: 40px;

 

text-decoration:none;

 

text-align:center;

 

}

 

</style>



</head>



<body>



	<div class="aa">

		<ul id="pagenavi1" class="page1">

			<li><a href="#http://www.bcty365.com" class="active">科目</a></li>

			<li><a href="#http://www.bcty365.net">科目</a></li>

			<li><a href="#http://www.bcty365.com">科目</a></li>

			<li><a href="#http://www.bcty365.net">科目</a></li>

			<li><a href="#http://www.bcty365.com">科目</a></li>

			<li><a href="#http://www.bcty365.net">科目</a></li>

			<li><a href="#http://www.bcty365.com">科目</a></li>

			<li><a href="#http://www.bcty365.net">科目</a></li>

			<li><a href="#http://www.bcty365.com">科目</a></li>

			<li><a href="#http://www.bcty365.net">科目</a></li>

			<li><a href="#http://www.bcty365.com">科目</a></li>

			<li><a href="#http://www.bcty365.net">科目</a></li>

		</ul>

	</div>







    <div id="slider" class="swipe">



      <ul class="box01_list">

        <li class="li_list">

			<div class="pic_list"><a href="http://www.bcty365.com/view-blog-323.html">纯CSS3图标旋转效果</a></span></div>

		</li>





        <li class="li_list">

			<div class="pic_list"><span><a href="http://www.bcty365.com/view-blog-323.html">超酷的照片墙展示效果</a></span></div>

			

		</li>





		<li class="li_list">

			<div class="pic_list"><span><a href="#">PHP实现发红包程序</a></span></div>

		

		</li>





		<li class="li_list">

			<div class="pic_list"><span><a href="#">使用按钮控制HTML5背景音乐开关</a></span></div>

			

		</li>



		<li class="li_list">

			<div class="pic_list"><span><a href="#">使用按钮控制HTML5背景音乐开关</a></span></div>

			

		</li>



		<li class="li_list">

			<div class="pic_list"><span><a href="#">使用按钮控制HTML5背景音乐开关</a></span></div>

			

		</li>



		<li class="li_list">

			<div class="pic_list"><span><a href="#">使用按钮控制HTML5背景音乐开关</a></span></div>

			

		</li>



		<li class="li_list">

			<div class="pic_list"><span><a href="#">使用按钮控制HTML5背景音乐开关</a></span></div>

			

		</li>



		<li class="li_list">

			<div class="pic_list"><span><a href="#">使用按钮控制HTML5背景音乐开关</a></span></div>

			

		</li>



		<li class="li_list">

			<div class="pic_list"><span><a href="#">使用按钮控制HTML5背景音乐开关</a></span></div>

			

		</li>



		<li class="li_list">

			<div class="pic_list"><span><a href="#">使用按钮控制HTML5背景音乐开关</a></span></div>

			

		</li>



		<li class="li_list">

			<div class="pic_list"><span><a href="#">使用按钮控制HTML5背景音乐开关</a></span></div>

			

		</li>

      </ul>

	  

    </div>

	





<script type="text/javascript">

	var page1='pagenavi1';

	var mslide='slider';

	var mtitle='emtitle';

	arrdiv = 'arrdiv';



	var as=document.getElementById(page1).getElementsByTagName('a');



	var tt=new TouchSlider({id:mslide,'auto':'-1',fx:'ease-out',direction:'left',speed:600,timeout:5000,'before':function(index){

		var as=document.getElementById(this.page1).getElementsByTagName('a');

		as[this.p].className='';

		as[index].className='active';

		this.p=index;

		var txt=as[index].innerText;

		$("#"+this.page1).parent().find('.emtitle').text(txt);

		var txturl=as[index].getAttribute('href');		

		var turl=txturl.split('#');

		$("#"+this.page1).parent().find('.go_btn').attr('href',turl[1]);

	}});



	tt.page1 = page1;

	tt.p = 0;

	//console.dir(tt); console.dir(tt.__proto__);

	for(var i=0;i<as.length;i++){

		(function(){

			var j=i;

			as[j].tt = tt;

			as[j].onclick=function(){

				this.tt.slide(j);

				return false;

			}

		})();

	}

</script>



<div style="position:absolute;top: 32px;height:20px;background: #fff;width: 100%;"></div>



</body>

</html>

上面的代码可以做到滚动导航条，也可以切换下面的内容自动切换到对应的导航栏目，但是唯一有个问题就是在滑动内容切换的时候不会自动对焦到该栏目，多滑动几次之后，不会自动切换到后面的栏目导航去，我想滑动切换的时候可以自动对焦中心的导航栏目，请问如何做，

另外这个是我自己想的一个导航滑动的方法，如果有其它更好的解决方法并且能切换内容对应导航的话就更好了

...全文