图片轮播

当然  图片轮播有很多好用的插件 （jQuery轮播插件slider）

提供以下地址：http://www.jq22.com/jquery-info889

下面是纯手工写法，供大家参考：

html代码

<!-- 图片轮播 -->
		 <div id="banner_tabs" class="flexslider">    <li>
			        <a><img class="td_phone"  οnclick="fileUpload();" src="${ctx}/resource/images/image_bg.png" alt="" height="100%" width="100%"></a>
			   </li>
			</ul>
			<ul class="flex-direction-nav" id="imgNext">
			    <li><a class="flex-prev" href="javascript:;">Previous</a></li>
			    <li><a class="flex-next" href="javascript:;">Next</a></li>
			</ul>
			<ol id="bannerCtrl" class="flex-control-nav flex-control-paging">
			        <li><a>1</a></li>
				<li><a>2</a></li>
				<li><a>2</a></li>-->
			</ol>
		</div>

js代码

$('.flex-prev').on('click',function(){			
					$("#imgData li").each(function(){
						if($(this).css("display")=='list-item'){
							index=$(this).index();
							if(index!=0){
								$("#imgData li:eq("+(index-1)+")").css('display','list-item').siblings('li').css('display','none');
								$(".flex-control-nav li:eq("+(index-1)+")").addClass("active").siblings('li').removeClass("active");
							}else{
								alert('已是第一张！');
							}	
						}
					})
				})
				$('.flex-next').on('click',function(){
					var numb=0;		
					$("#imgData li").each(function(){
						if($(this).css("display")=='list-item'){
							index=$(this).index();
							if(index<num&&numb==0){
								$("#imgData li:eq("+(index+1)+")").css('display','list-item').siblings('li').css('display','none');
								$(".flex-control-nav li:eq("+(index+1)+")").addClass("active").siblings('li').removeClass("active");
								numb++;
							}else if(index==num&&numb==0){
								alert('已是最后一张！');
							}	
						}
					})
				})