当然 图片轮播有很多好用的插件 (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('已是最后一张!');
}
}
})
})