焦图插件（mark下）

wxbwyx821 , 2010/02/01 18:10 , Jquery , 评论(0) , 阅读(521) , Via 本站原创

收藏到 [天天] [和讯] [我摘] [新浪] [Google] [bolaa] [POCO] [百度] [Yahoo] [QQ书签] [twitter]

项目中有三个类似的焦图，就想着做个插件。说真的，还真是第一次写JQ的插件，虽然写的可能不好,大家可以路过，哈哈。所以发上来，自己mark下,以后回来再瞧~
结构：

CSS代码：发现博客的高亮显示插件会把有些定位属性重复。大家明白就行！

插件代码：

$(function() {
    $.fn.ppt = function(options) {
    var j = 1;
    var setting = {
      imgBox: "",
      turnBox: "",
      textsBox: "",
      maxNum: "",
      speed: "",
      autoRun:""
    };
    var _this = $(this);
    if (options) $.extend(setting, options);
    _this.find(setting.turnBox).each(function(i) {                
      $(this).mouseover(function() {
        $(this).addClass("pptOn").siblings().removeClass("pptOn");
        _this.find(setting.imgBox).eq(i).fadeIn().siblings().fadeOut();
        $(this).parent().prev().find("li").eq(i).show().siblings().hide();
      });
    });
    var myTime;
    if(setting.autoRun){
      myTime = setInterval(function() {
      _this.find(setting.turnBox).eq(j).mouseover();
      j++;
      if (j == setting.maxNum) {
        j = 0;
      }}, setting.speed);
    }else{
      clearInterval(myTime);
    };
  };
  $("#pptBox01").ppt({
    imgBox: ".pptList li",
    turnBox: ".numBox li",
    textsBox: ".textBox li",
    maxNum: "4",
    speed: "4000",
    autoRun:true
  });
});

实例[IE下运行先刷新，原因见blog首页公告]：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="wg"/>
<script type="text/javascript" src="http://www.wgcss.com/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function() {
   $.fn.ppt = function(options) {
    var j = 1;
    var setting = {
      imgBox: "",
      turnBox: "",
      textsBox: "",
      maxNum: "",
      speed: "",
      autoRun:""
    };
    var _this = $(this);
    if (options) $.extend(setting, options);
    _this.find(setting.turnBox).each(function(i) {                
      $(this).mouseover(function() {
        $(this).addClass("pptOn").siblings().removeClass("pptOn");
        _this.find(setting.imgBox).eq(i).fadeIn().siblings().fadeOut();
        $(this).parent().prev().find("li").eq(i).show().siblings().hide();
      });
    });
    var myTime;
    if(setting.autoRun){
      myTime = setInterval(function() {
      _this.find(setting.turnBox).eq(j).mouseover();
      j++;
      if (j == setting.maxNum) {
        j = 0;
      }}, setting.speed);
    }else{
      clearInterval(myTime);
    };
  };
  $("#pptBox01").ppt({
    imgBox: ".pptList li",
    turnBox: ".numBox li",
    textsBox: ".textBox li",
    maxNum: "4",
    speed: "4000",
    autoRun:true
  });  });
</script>
<style type="text/css">
*{margin:0; padding:0;}
img{ border:0;}
ul, ol { list-style:none; }
/*pptBox*/
.pptBox { position:relative; width:683px; height:272px; margin-bottom:10px; overflow:hidden; border:1px solid #dbdbdb; }
.pptList li { display:none; }
.pptList img { width:683px; height:272px; }
.numBox { position:absolute; right:8px; bottom:14px; z-index:9999; width:88px; }
.numBox li { float:left; display:inline; width:14px; height:14px; margin:0 6px 0 0; line-height:14px; color:#ff7e00; cursor:pointer; text-align:center; border:1px solid #ff6c00; background:#fff; }
.numBox li.pptOn { background:#ff6c00; color:#fff; }
.textBox { position:absolute; left:0; bottom:0; z-index:888; width:683px; height:44px; Opacity:0.7; filter: Alpha(Opacity=70); background:#000; overflow:hidden; }
.textBox li { display:none; height:44px; padding:0 0 0 10px; line-height:44px; font-size:14px; font-weight:700; color:#fff; }
</style>
<title>汉语桥大学生首页</title>
</head>
<body         >
<div class="pptBox" id="pptBox01">
            <ul class="pptList">
                <li style="display:block"><a href="#nogo"><img src="http://www.wgcss.com/zp/dxz/images/683x272.jpg" alt=" " /></a></li>
                <li><a href="#nogo"><img src="http://www.wgcss.com/zp/dxz/images/1.jpg" alt=" " /></a></li>
                <li><a href="#nogo"><img src="http://www.wgcss.com/zp/dxz/images/2.jpg" alt=" " /></a></li>
                <li><a href="#nogo"><img src="http://www.wgcss.com/zp/dxz/images/3.jpg" alt=" " /></a></li>
            </ul>
            <ul class="textBox">
                <li style="display:block">图解一</li>
                <li>图解二</li>
                <li>图解三</li>
                <li>图解四</li>
            </ul>
            <ul class="numBox">
                <li class="pptOn">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        </div>
</body>
</html>

提示：您可以先修改部分代码再运行

作者：wxbwyx821 @ 蜈蚣's Blog
地址：http://www.wugong.net.ru/blog/read.php?68
版权所有。转载时请以链接形式注明作者和原始出处.

最新日志		随机日志		综合排行
	FF3.6.8和op... 图片滚动插件jcar... 一道实验小学入学考试... jQuery tab... 焦点图推荐认识lastInde... 第七期WEB标准交流... 哀悼玉树大地震死难者 html5test 阿拉伯语鸟语的那些事...		试下，想不通是怎么回... 看来还得学flash... 第七期WEB标准交流... html5test 生命的列车 JS使用问题很久就有的一个的fl... xhtml校验关于CNZZ病毒关于转义字符		select下拉列表... 返回顶部代码 jquery效果在I... FF下输入框中光标居... ico图标 FF O... 关于舞女顺时针转或逆... JQuery 模拟下... 很久就有的一个的fl... 有利于SEO的di... 一道实验小学入学考试...