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

来源：互联网发布：淘宝黑搜与白搜编辑：程序博客网时间：2024/05/17 03:36

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;}