KingCMS新版幻灯片

12 Next >

fox1383164k

发表于：10-09-02 09:48 [取消收藏] [添加收藏] 楼主 [回复] #Top#

人气：377 积分：864 金币：3006

KingCMS新版幻灯片

<scritp>
// JavaScript Document
var $ = function (id) {
      return "string" == typeof id ? document.getElementById(id) : id;
};

var Class = {
  create: function() {
      return function() {
      this.initialize.apply(this, arguments);
      }
  }
}

Object.extend = function(destination, source) {
      for (var property in source) {
            destination[property] = source[property];
      }
      return destination;
}

var TransformView = Class.create();
TransformView.prototype = {
  //容器对象,滑动对象,切换参数,切换数量
  initialize: function(container, slider, parameter, count, options) {
      if(parameter <= 0 || count <= 0) return;
      var oContainer = $(container), oSlider = $(slider), oThis = this;

      this.Index = 0;//当前索引

      this._timer = null;//定时器
      this._slider = oSlider;//滑动对象
      this._parameter = parameter;//切换参数
      this._count = count || 0;//切换数量
      this._target = 0;//目标参数

      this.SetOptions(options);

      this.Up = !!this.options.Up;
      this.Step = Math.abs(this.options.Step);
      this.Time = Math.abs(this.options.Time);
      this.Auto = !!this.options.Auto;
      this.Pause = Math.abs(this.options.Pause);
      this.onStart = this.options.onStart;
      this.onFinish = this.options.onFinish;

      oContainer.style.overflow = "hidden";
      oContainer.style.position = "relative";

      oSlider.style.position = "absolute";
      oSlider.style.top = oSlider.style.left = 0;
  },
  //设置默认属性
  SetOptions: function(options) {
      this.options = {//默认值
            Up:                      true,//是否向上(否则向左)
            Step:             5,//滑动变化率
            Time:             10,//滑动延时
            Auto:             true,//是否自动转换
            Pause:             2000,//停顿时间(Auto为true时有效)
            onStart:       function(){},//开始转换时执行
            onFinish:       function(){}//完成转换时执行
      };
      Object.extend(this.options, options || {});
  },
  //开始切换设置
  Start: function() {
      if(this.Index < 0){
            this.Index = this._count - 1;
      } else if (this.Index >= this._count){ this.Index = 0; }

      this._target = -1 * this._parameter * this.Index;
      this.onStart();
      this.Move();
  },
  //移动
  Move: function() {
      clearTimeout(this._timer);
      var oThis = this, style = this.Up ? "top" : "left", iNow = parseInt(this._slider.style[style]) || 0, iStep = this.GetStep(this._target, iNow);

      if (iStep != 0) {
            this._slider.style[style] = (iNow + iStep) + "px";
            this._timer = setTimeout(function(){ oThis.Move(); }, this.Time);
      } else {
            this._slider.style[style] = this._target + "px";
            this.onFinish();
            if (this.Auto) { this._timer = setTimeout(function(){ oThis.Index++; oThis.Start(); }, this.Pause); }
      }
  },
  //获取步长
  GetStep: function(iTarget, iNow) {
      var iStep = (iTarget - iNow) / this.Step;
      if (iStep == 0) return 0;
      if (Math.abs(iStep) < 1) return (iStep > 0 ? 1 : -1);
      return iStep;
  },
  //停止
  Stop: function(iTarget, iNow) {
      clearTimeout(this._timer);
      this._slider.style[this.Up ? "top" : "left"] = this._target + "px";
  }
};

window.idNum").getElementsByTagName("li");

      var tv = new TransformView("idTransformView", "idSlider", 249, 5, {//图片高度，显示几张
            onStart : function(){ Each(objs, function(o, i){ o.className = tv.Index == i ? "on" : ""; }) }//按钮样式
      });

      tv.Start();

      Each(objs, function(o, i){
            o.onmouseover = function(){
                     o.className = "on";
                     tv.Auto = false;
                     tv.Index = i;
                     tv.Start();
            }
            o.onmouseout = function(){
                     o.className = "";
                     tv.Auto = true;
                     tv.Start();
            }
      })
}
</scritp>

<style>
/* 幻灯片 */
.container, .container *{margin:0; padding:0;}
.container{width:298px; height:242px; overflow:hidden;position:relative; float:right;border:solid 1px #FF33CC}
.slider{width:298px;position:absolute;}
.slider li{ list-style:none;display:inline;}
.slider img{ width:300px; height:245px; display:block;}
.num{ position:absolute; right:5px; bottom:5px;}
.num li{float: left;color: #FF33CC;text-align:center;line-height:16px;width:16px;height:16px;font-family:Arial;font-size:12px;cursor:pointer;overflow:hidden;margin:3px 1px;border:1px solid #FF33CC;background-color:#fff;}
.num li.on{color: #fff;line-height: 21px;width: 21px;height: 21px;font-size: 16px;margin: 0 1px;border: 0;background-color:#FF33CC;font-weight:bold;}
</style>

<div class="container" id="idTransformView">
         <ul class="slider" id="idSlider">
         {king:article number="5" type="commend" listid="1"}
            <li><a href="(king:path/)"><img src="(king:image width="408" height="168"/)" alt="(king:title/)" /></a></li>
         {/king}
         </ul>
         <ul class="num" id="idNum">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
      </ul>
</div>

好名字容易娶媳妇？悦买网-专业导购网

Ta最近还发表过 [分享] 25个时尚杰出的登录表单设计 (23-03-10) [错误] kingcms5.0/5.1漏洞 (19-02-14) [分享] 关于php版自定义模块搜索问题解决 (17-10-21) [使用] 可以下拉的自动生成导航栏menu (13-09-19) [错误] KingCMS 企业版(PHP) 6.0.970(Sp1)几个错误的解决方案 (13-06-20)

随机阅读 [使用] 最近发现，生成后台文章之后，打开什么都没有了 (13-01-14) [模板] 有没有婚纱类的模板啊？ (12-02-19) [使用] kingcms5.1实现内容页调用所属栏目文章列表 (12-01-14) [分享] 购买新闻门户链接，谨防落入PR陷阱 (11-11-08) [其他] 请大家推荐下稳定的、性价比高的空间 (11-11-07)

无聊的飞翔	发表于：11-03-20 12:46 沙发 [回复] #Top#
人气：402 积分：1696 金币：20053	asp的还是PHP的啊？怎么使用啊

yuxinpop	发表于：11-07-05 22:55 板凳 [回复] #Top#
人气：146 积分：75 金币：9402	都可以用的！

cnxo	发表于：11-07-07 21:38 4楼 [回复] #Top#
人气：185 积分：196 金币：1298	试试，回头一定试试

zongxiao08	发表于：11-07-08 10:21 5楼 [回复] #Top#
人气：145 积分：994 金币：3553	回头一定试试

liuzdong	发表于：11-07-25 08:23 7楼 [回复] #Top#
人气：40 积分：341 金币：2613	这个js代码应该在哪里插入啊？ head里插入不行，其他几个位置试了也没用

pktsandy	发表于：11-07-25 09:57 8楼 [回复] #Top#
人气：1181 积分：3438 金币：29313	太罗索

qhjohn2010	发表于：11-07-25 20:33 9楼 [回复] #Top#
人气：0 积分：52 金币：85	感觉什么地方有误

ruohan	发表于：11-08-26 22:01 10楼 [回复] #Top#
人气：3 积分：11 金币：56	哈哈，看看恩

popui	发表于：11-09-05 18:33 11楼 [回复] #Top#
人气：4 积分：76 金币：63	不错呀，学习了

12 Next >

发表回复

帐号	匿名发布审核后可见 [加载完整在线编辑器]
内容
验证码	计算题太难?换个简单点的.

我已认真阅读服务条款，并遵守具体协议内容

KingCMS 内容管理系统

关于我们联系我们广告报价付款方式站点导航

广州唯众网络科技有限公司粤ICP备08008106号