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

最新推荐文章于 2020-03-08 20:14:39 发布

置顶长沙-小刚

最新推荐文章于 2020-03-08 20:14:39 发布

阅读量322

点赞数

分类专栏： js / jquery笔记

本文链接：https://blog.csdn.net/lixiaogang1113/article/details/8591684

版权

js / jquery笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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
评论
jquery版本banner的效果[面向对象]

1. JS部分如下;(function (){ /** * JSON 数据格式 [面向对象方式：优势，避免大量的全局变量，重用性高] * imgs : 轮转图片 * overlays : 轮转图片的title / info 说明 * btns : 按钮 * count : 轮转图片的个数 * cur : 当前图片的编号，默认是：0 （数组
复制链接

扫一扫