jquery 横幅动态广告

浏览数：22 / 时间：2015年06月09日

1.效果图：

2.css

.bannerBox{height:385px;margin:0 auto;box-shadow:2px 2px 3px #b3b3b3;}
.bnLeftBtn,.bnRightBtn{position:absolute;top:140px;z-index:999;width:88px;height:74px;cursor:pointer;display:none;}
.bnLeftBtn{left:0px;background-position:0 -396px;}
.bnRightBtn{right:0px;background-position:-91px -396px;}
.bannerF{height:385px;overflow:hidden;position:absolute;z-index:1;left:6px;top:0;filter:alpha(opacity:0);opacity:0;display:-none;width:100%}
.bannerF .imgW{width:100%;height:385px;}
.bannerZIndex{position:absolute;top:47px;left:49px;z-index:3;}
.knowMore{background-color:#fd4239;width:131px;height:42px;font-size:14px;font-family:"宋体";text-align:center;line-height:42px;position:absolute;top:235px;left:49px;z-index:5;}
.knowMore a{color:#fff;}
.bnLeftBtn{background:url(../images/bleft.png) no-repeat;display:none;}
.bnRightBtn{background:url(../images/bright.png) no-repeat;display:none;}

3.js

$(function(){
	 
	/*banner */
	var now=0;
	function tab(){
		$("#ftBanner .bannerF").stop().animate({opacity: 0});
		$("#ftBanner .bannerF").eq(now).stop().animate({opacity:1});
	}
	function next(){
		now++;
		if(now==$("#ftBanner .bannerF").length){now=0;}
		tab();
	}
	var timer=setInterval(next, 5000);
	$(‘#ftBanner‘).hover(function (){
		
		clearInterval(timer);
		$(".bnLeftBtn").show();
		$(".bnRightBtn").show();
	}, function (){
		
		timer=setInterval(next, 5000);
		$(".bnLeftBtn").hide();
		$(".bnRightBtn").hide();
	});
	$(".bnLeftBtn").click(function(){
			now==0?now=2:now--;
			tab();
	});
	$(".bnRightBtn").click(function(){
			now==2?now=0:now++;
			tab();
	});
});

4.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>

    
    <title>My JSP ‘dynamic.jsp‘ starting page</title>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/dynamic.js"></script>
	<link rel="stylesheet" type="text/css" href="css/dynamic.css"/>

  </head>
  
  <body>

        	<div class="bannerBox"  id="ftBanner">
    				<span class="bnLeftBtn"></span>
                    <span  class="bnRightBtn"></span>
                    <div class="bannerF" style="filter:alpha(opacity:100);opacity:1;">
                            <a href=""><img src="images/bn_pic01.jpg" alt="ft_pic01"  class="imgW"/></a>
                            <div class="bannerZIndex">
                                <img src="images/bn_index01.gif" />
                            </div>
                            <div class="knowMore"><a href="#">了解更多</a></div>
                    </div>
                    <div class="bannerF">
                            <a href=""><img src="images/bn_pic02.gif" alt="ft_pic02" class="imgW" /></a>
                    </div>
                  	<div class="bannerF">
                            <a href=""><img src="images/bn_pic03.gif" alt="ft_pic03"  class="imgW" /></a>
                    </div>

        </div>

  </body>
</html>

5.目录结构，图片自己找。