诡异！！！ecshop 首页广告轮播 只显示三张图片。。。。

2016-07-07 15:11 来源：www.chinab4c.com 作者：ecshop专家

ecshop首页广告轮播，不知道怎么回事，怎么设置都不行，只显示三张图片。。。

以下是首页代码
  1. <div class="container" id="idTransformView" style="overflow: hidden; position: relative;">
  2. <ul class="slider" id="idSlider" style="position: absolute; left: 0px; top: -420px;">
  3. <li><a href="http://pds9.com/category.php?id=1&brand=57&price_min=0&price_max=0" target="_blank"><img src="data/afficheimg/20140416taydqh.jpg"></a></li>
  4. <li><a href="http://www.pds9.com" target="_blank"><img src="data/afficheimg/20140416zxaahx.jpg"></a></li>
  5. <li><a href="http://pds9.com/category.php?id=12" target="_blank"><img src="data/afficheimg/20140416jgqwht.jpg"></a></li>
  6. <li><a href="http://pds9.com/category.php?id=6" target="_blank"><img src="data/afficheimg/20140416btcanj.jpg"></a></li>
  7. <li><a href="http://pds9.com/goods.php?id=424" target="_blank"><img src="data/afficheimg/20140416wltnxi.jpg"></a></li>
  8. <li><a href="http://" target="_blank"><img src="data/afficheimg/20140416mwsean.jpg"></a></li>

  10. </ul>
  11. <ul class="num" id="idNum">


  14. <li class="">
  15. 1 </li>
  16. <li class="on">
  17. 2 </li>
  18. <li class="">
  19. 3 </li>
  20. <li class="">
  21. 4 </li>
  22. <li class="">
  23. 5 </li>
  24. <li class="">
  25. 6 </li>

  27. </ul>
  28. </div>


  31. <script type="text/javascript">
  32. var $ = function (id) {
  33. return "string" == typeof id ? document.getElementById(id) : id;
  34. };
  35. var Class = {
  36. create: function() {
  37. return function() {
  38. this.initialize.apply(this, arguments);
  39. }
  40. }
  41. }
  42. Object.extend = function(destination, source) {
  43. for (var property in source) {
  44. destination[property] = source[property];
  45. }
  46. return destination;
  47. }
  48. var TransformView = Class.create();
  49. TransformView.prototype = {
  50. //容器对象,滑动对象,切换参数,切换数量
  51. initialize: function(container, slider, parameter, count, opti**) {
  52. if(parameter <= 0 || count <= 0) return;
  53. var oContainer = $(container), oSlider = $(slider), oThis = this;
  54. this.Index = 0;//当前索引

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

  62. this.SetOpti**(opti**);

  64. this.Up = !!this.opti**.Up;
  65. this.Step = Math.abs(this.opti**.Step);
  66. this.Time = Math.abs(this.opti**.Time);
  67. this.Auto = !!this.opti**.Auto;
  68. this.Pause = Math.abs(this.opti**.Pause);
  69. this.**tart = this.opti**.**tart;
  70. this.onFinish = this.opti**.onFinish;

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

  75. oSlider.style.position = "absolute";
  76. oSlider.style.top = oSlider.style.left = 0;
  77. },
  78. //设置默认属性
  79. SetOpti**: function(opti**) {
  80. this.opti** = {//默认值
  81. Up: true,//是否向上(否则向左)
  82. Step: 5,//滑动变化率
  83. Time: 10,//滑动延时
  84. Auto: true,//是否自动转换
  85. Pause: 2000,//停顿时间(Auto为true时有效)
  86. **tart: function(){},//开始转换时执行
  87. onFinish: function(){}//完成转换时执行
  88. };
  89. Object.extend(this.opti**, opti** || {});
  90. },
  91. //开始切换设置
  92. Start: function() {
  93. if(this.Index < 0){
  94. this.Index = this._count - 1;
  95. } else if (this.Index >= this._count){this.Index = 0;}

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

  106. if (iStep != 0) {
  107. this._slider.style[style] = (iNow + iStep) + "px";
  108. this._timer = setTimeout(function(){oThis.Move();}, this.Time);
  109. } else {
  110. this._slider.style[style] = this._target + "px";
  111. this.onFinish();
  112. if (this.Auto) { this._timer = setTimeout(function(){oThis.Index++; oThis.Start();}, this.Pause); }
  113. }
  114. },
  115. //获取步长
  116. GetStep: function(iTarget, iNow) {
  117. var iStep = (iTarget - iNow) / this.Step;
  118. if (iStep == 0) return 0;
  119. if (Math.abs(iStep) < 1) return (iStep > 0 ? 1 : -1);
  120. return iStep;
  121. },
  122. //停止
  123. Stop: function(iTarget, iNow) {
  124. clearTimeout(this._timer);
  125. this._slider.style[this.Up ? "top" : "left"] = this._target + "px";
  126. }
  127. };
  128. window.onload=function(){
  129. function Each(list, fun){
  130. for (var i = 0, len = list.length; i < len; i++) {fun(list[i], i);}
  131. };

  133. var objs = $("idNum").getElementsByTagName("li");

  135. var tv = new TransformView("idTransformView", "idSlider", 420, 3, {
  136. **tart : function(){ Each(objs, function(o, i){o.className = tv.Index == i ? "on" : "";}) }//按钮样式
  137. });

  139. tv.Start();

  141. Each(objs, function(o, i){
  142. o.onmouseover = function(){
  143. o.className = "on";
  144. tv.Auto = false;
  145. tv.Index = i;
  146. tv.Start();
  147. }
  148. o.onmouseout = function(){
  149. o.className = "";
  150. tv.Auto = true;
  151. tv.Start();
  152. }
  153. })

  155. ////////////////////////test2

  157. var objs2 = $("idNum2").getElementsByTagName("li");

  159. var tv2 = new TransformView("idTransformView2", "idSlider2", 990, 3, {
  160. **tart: function(){ Each(objs2, function(o, i){o.className = tv2.Index == i ? "on" : "";}) },//按钮样式
  161. Up: false
  162. });

  164. tv2.Start();

  166. Each(objs2, function(o, i){
  167. o.onmouseover = function(){
  168. o.className = "on";
  169. tv2.Auto = false;
  170. tv2.Index = i;
  171. tv2.Start();
  172. }
  173. o.onmouseout = function(){
  174. o.className = "";
  175. tv2.Auto = true;
  176. tv2.Start();
  177. }
  178. })

  180. $("idStop").onclick = function(){tv2.Auto = false; tv2.Stop();}
  181. $("idStart").onclick = function(){tv2.Auto = true; tv2.Start();}
  182. $("idNext").onclick = function(){tv2.Index++; tv2.Start();}
  183. $("idPre").onclick = function(){tv2.Index--;tv2.Start();}
  184. $("idFast").onclick = function(){ if(--tv2.Step <= 0){tv2.Step = 1;} }
  185. $("idSlow").onclick = function(){ if(++tv2.Step >= 10){tv2.Step = 10;} }
  186. $("idReduce").onclick = function(){ tv2.Pause-=1000; if(tv2.Pause <= 0){tv2.Pause = 0;} }
  187. $("idAdd").onclick = function(){ tv2.Pause+=1000; if(tv2.Pause >= 5000){tv2.Pause = 5000;} }

  189. $("idReset").onclick = function(){
  190. tv2.Step = Math.abs(tv2.opti**.Step);
  191. tv2.Time = Math.abs(tv2.opti**.Time);
  192. tv2.Auto = !!tv2.opti**.Auto;
  193. tv2.Pause = Math.abs(tv2.opti**.Pause);
  194. }

  196. }
  197. </script>
复制代码



请教各位，这究竟是神马问题啊？明明6张图片呢。只显示仨，但是轮播哪里依旧显示123456只是123可点，456不显示也不可点击。

回答：
问题基本解决，修改index_ad.lbi 库文件
  1. var tv = new TransformView("idTransformView", "idSlider", 420, 3, {
  2. **tart : function(){ Each(objs, function(o, i){ o.className = tv.Index == i ? "on" : ""; }) }//按钮样式
  3. });
复制代码
修改为var tv = new TransformView("idTransformView", "idSlider", 420, 6
3改为6,6为图片数量
  1. var tv2 = new TransformView("idTransformView2", "idSlider2", 990, 3, {
  2. **tart: function(){ Each(objs2, function(o, i){ o.className = tv2.Index == i ? "on" : ""; }) },//按钮样式
  3. Up: false
  4. });
复制代码
一样把3改为6.


如果能把3这个数字改为图片总数的变量就更好了。

仔细检查下代码