jquery.superslide.js使用方法

来源：互联网发布：淘宝推荐系统编辑：程序博客网时间：2024/05/01 10:26
一，superslide.js是轮播插件元素
二，必须参数设置（详细参数设置）
三，使用实例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta http-equiv="Content-Language" content="zh-CN"><meta name="Keywords" content="SuperSlide,jQuery-实用焦点图"><meta name="Description" content="SuperSlide,jQuery-实用焦点图"><title>SuperSlide - 实用焦点图</title><script src="http://libs.baidu.com/jquery/1.4.2/jquery.min.js"></script><script src="jquery.SuperSlide.2.1.1.js"></script></head><body><style type="text/css">        *{margin:0; padding:0; list-style:none; }body{ background:#fff; font:normal 12px/22px 宋体;  }img{ border:0;  }a{ text-decoration:none; color:#333;  }a:hover{ color:#1974A1;  }.focusBox { position: relative; width: 320px; height: 240px; overflow: hidden; font: 12px/1.5 Verdana, Geneva, sans-serif; text-align: left; background: white; }.focusBox .pic img { width: 320px; height: 240px; display: block; }.focusBox .txt-bg { position: absolute; bottom: 0; z-index: 1; height: 36px; width:100%;  background: #333; filter: alpha(opacity=40); opacity: 0.4; overflow: hidden; }.focusBox .txt { position: absolute; bottom: 0; z-index: 2; height: 36px; width:100%; overflow: hidden; }.focusBox .txt li{ height:36px; line-height:36px; position:absolute; bottom:-36px;}.focusBox .txt li a{ display: block; color: white; padding: 0 0 0 10px; font-size: 12px; font-weight: bold; text-decoration: none; }.focusBox .num { position: absolute; z-index: 3; bottom: 8px; right: 8px; }.focusBox .num li{ float: left; position: relative; width: 18px; height: 15px; line-height: 15px; overflow: hidden; text-align: center; margin-right: 1px; cursor: pointer; }.focusBox .num li a,.focusBox .num li span { position: absolute; z-index: 2; display: block; color: white; width: 100%; height: 100%; top: 0; left: 0; text-decoration: none; }.focusBox .num li span { z-index: 1; background: black; filter: alpha(opacity=50); opacity: 0.5; }.focusBox .num li.on a,.focusBox .num a:hover{ background:#f60;  }    </style><div class="focusBox" style="margin:0 auto">    <ul class="pic">        <li><a href="#" target="_blank"><img src="images/1.jpg"/></a></li>        <li><a href="#" target="_blank"><img src="images/2.jpg"/></a></li>        <li><a href="#" target="_blank"><img src="images/3.jpg"/></a></li>        <li><a href="#" target="_blank"><img src="images/4.jpg"/></a></li>    </ul>    <div class="txt-bg"></div>    <div class="txt">        <ul>            <li><a href="#">SuperSlid图Quiet</a></li>            <li><a href="#">SuperSlid图DoubleLi</a></li>            <li><a href="#">SuperSlid练习曲</a></li>            <li><a href="#">SuperSlid夜莺</a></li>        </ul>    </div>    <ul class="num">        <li><a>1</a><span></span></li>        <li><a>2</a><span></span></li>        <li><a>3</a><span></span></li>        <li><a>4</a><span></span></li>    </ul></div><script type="text/javascript">jQuery(".focusBox").slide({    titCell : ".num li",    mainCell : ".pic",    effect : "fold",    autoPlay : true,    trigger : "click",    startFun : function (i) {        jQuery(".focusBox .txt li").eq(i).animate({            "bottom" : 0        }).siblings().animate({            "bottom" : -36        });    }});</script></body></html>
1 0