js banner图片效果 支持火狐

网上的js banner图片效果有几个,但是没有支持火狐的,所以决定自己写个支持火狐浏览器的,很简单的小效果。

一、首先定义banner样式

#productBanner{ height:320px; position:relative;z-index:1;}
#productBanner img{width:666px;height:320px;display:block;position:absolute;left:0;top:0; }

宽度、高度根据自己需要定义。


二、Html代码

<div id="productBanner">
  <img src="images/banner1.jpg" alt="ProductPortfolio"/><img src="images/banner2.jpg" alt="ProductPortfolio" /><img src="images/banner3.jpg" alt="ProductPortfolio" /> 
 </div>

图片数量可灵活控制。


三、js代码

<!--jq库文件,直接从网上下载即可-->
<script language="javascript" src="js/jquery-1.4.2.min.js"></script>
<script src="js/jquery.timers-1.2.js" type="text/javascript"></script>
<script>
<!--
$(function(){
 funTabImg();
 function funTabImg(){
  var imgLength = $('#productBanner img').length-1; 
  var thisTab = 0;    //从第几张图片开始,0为第1张
  var imgTime = '3s'; //设置图片切换时间
  
   $('#productBanner img').hide();
   $('#productBanner img').eq(thisTab).show();
  
   $('#productBanner').everyTime(imgTime,'nextBtnTime',nextImg);
   $('#productBanner').hover(function(){
   $(this).stopTime('nextBtnTime');
  },function(){
   $('#productBanner').everyTime(imgTime,'nextBtnTime',nextImg);
  })
  
   function nextImg(){
   thisTab = thisTab < imgLength ? thisTab+=1:0;
   $('#productBanner img').eq(thisTab).fadeIn().siblings('img').fadeOut();
   }
 } 
})
//-->
</script>

以上就可以实现banner图片自动切换效果。