jquery版本banner的效果[面向对象]

1. JS部分如下

;(function (){
	/**
	 * JSON 数据格式 [面向对象方式:优势,避免大量的全局变量,重用性高]
	 * imgs			:		轮转图片
	 * overlays		:		轮转图片的title / info 说明
	 * btns			:		按钮
	 * count		:		轮转图片的个数
	 * cur			:		当前图片的编号,默认是:0 (数组下标从0开始)
	 * time			:		延时执行时间,默认是:2000,即:2秒
	 * running		:		轮转启动的标记,默认:true,即:开启
	 * show_pic		:		显示轮转图片 [函数]
	 * go			:		轮转功能启动入口 [函数]
	 * pointer		:		显示特定某个图片 [函数]
	 * run			:		显示特定某个图片重启轮转功能 [函数]
	 */
	var slide = {
		imgs : $("#index_focus .img_show .item"),
		overlays : $("#index_focus .img_info .item"),
		btns : $("#index_focus .img_num a"),
		count : $("#index_focus .img_num a").length,
		cur : 0,
		time : 2000,
		running : true,
		show_pic : function (){
			slide.imgs.each(function (i){
				if(slide.cur == i)
					$(this).fadeIn();
				else
					$(this).fadeOut();
			});
			slide.overlays.each(function (i){
				if(slide.cur == i)
					$(this).fadeIn();
				else
					$(this).fadeOut();
			});
			slide.btns.each(function (i){
				if(slide.cur == i)
					$(this).addClass('sel');
				else
					$(this).removeClass('sel');
			});
			
			slide.cur++;
		},
		go : function (){
			window.setInterval(function (){
				if(!slide.running)
					return true;
				if(slide.cur >= slide.count)
					slide.cur = 0;
				
				slide.show_pic();
			}, slide.time);
		},
		pointer : function (x){
			slide.running = false;
			slide.cur = x;
			slide.show_pic();
		},
		run : function (x){
			slide.running = true;
			slide.cur = x;
		}
	};
	
	//入口开启
	slide.go(); 
	$('#index_focus').hover(
		function (){
			slide.running = false;
		},
		function (){
			slide.running = true;
		}
	);
	slide.btns.hover(
		function (){
			slide.pointer($(this).index());
		},
		function (){
			slide.run($(this).index());
		}
	);
})();

2. html部分

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>首页焦点图实例</title>
<link type="text/css" rel="stylesheet" href="./css/css.css" />
<script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>
</head>
<body>
<div id="index_focus">
      <div class="img_show">
            <div class="item" style="display: block">
                  <a target="_blank" title="1" href="1"><img alt="1" src="./images/index_banner_1.jpg"></a>
            </div>
            <div class="item">
                  <a target="_blank" title="2" href="2"><img alt="2" src="./images/index_banner_2.jpg"></a>
            </div>
            <div class="item">
                  <a target="_blank" title="3" href="3"><img alt="3" src="./images/index_banner_3.jpg"></a>
            </div>
            <div class="item">
                  <a target="_blank" title="4" href="4"><img alt="444" src="./images/index_banner_4.jpg"></a>
            </div>
            <div class="item">
                  <a target="_blank" title="5" href="5"><img alt="555" src="./images/index_banner_5.jpg"></a>
            </div>
      </div>
      <div class="img_info">
            <span class="bg"></span>
            <div class="img_num">
                  <a href="#" class="sel"></a>
                  <a href="#" class=""></a>
                  <a href="#" class=""></a>
                  <a href="#" class=""></a>
                  <a href="#" class=""></a>
            </div>
            <div class="item" style="display: block">
                  <h3 class="title"><a target="_blank" title="1" href="1">1</a></h3>
                  <p class="info">1</p>
            </div>
            <div class="item">
                  <h3 class="title"><a target="_blank" title="2" href="2">2</a></h3>
                  <p class="info">2</p>
            </div>
            <div class="item">
                  <h3 class="title"><a target="_blank" title="3" href="3">3</a></h3>
                  <p class="info">3</p>
            </div>
            <div class="item">
                  <h3 class="title"><a target="_blank" title="444" href="4">4</a></h3>
                  <p class="info">4</p>
            </div>
            <div class="item">
                  <h3 class="title"><a target="_blank" title="555" href="5">5</a></h3>
                  <p class="info">5</p>
            </div>
      </div>
</div>

<script type="text/javascript" src="./js/js.js"></script>
</body>
</html>


3. CSS部分
#index_focus {width :663px; height:310px; overflow:hidden ; position:relative ;}
#index_focus .img_show{ width:663px ; height :310px; overflow: hidden;}
#index_focus .img_show .item { position :absolute; display: none;}
#index_focus .img_info{ width:100% ; height :95px; position: absolute; left:0 ; bottom :0;}
#index_focus .img_info .bg {width :100%; height:95px; background:#fff ; opacity:0.85 ; filter :alpha(opacity = 85); display:block ; position:absolute ; left :0; bottom:0; _bottom:-1px ;}
#index_focus .img_info .item { height :95px; overflow: hidden; position:absolute ; left :10px; top:0; z-index:90 ; display: none;}
#index_focus .img_info .title {margin-top :8px;}
#index_focus .img_info .title a{ color:#333 ; font :400 20px/1.6 "Microsoft Yahei","SimHei";}
#index_focus .img_info .info {}
#index_focus .img_info .img_num { position :absolute;top:12px; right:10px ; z-index:100 ;}
#index_focus .img_info .img_num a { width:8px ; height :8px; display:inline-block ; margin-right :9px; font:0/0 Arial; background:#fff ; border:1px solid #ccc ; border-radius :6px;}
#index_focus .img_info .img_num a:hover ,#index_focus .img_info .img_num a.sel { background :#f60; border:1px solid #f60;}


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值