一个Js的banner主广告播放器

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



原来flash的手机看不怎么方便,加载又慢。。。奔着这个想法，我找了一堆js脚本改了又改做个现在这样的。
原版是仿QQ软件效果的，我改了特效,宽高。
演示：

天美服装租赁



个人感觉马马虎虎了,大概达到心中想要的结果了。虽然不太完美，还没空去研究怎么做成一个后台可控制的播放器,先将就用着,以后有空了再改。


安装方法
附件不知道为什么传了找不到路径。。。。chrome浏览器。。ie10.。 代码直接粘贴到楼下吧。。
安装方法，附件解压打开,
index.html 记事本打开全选复制到后台：系统设置-首页主广告管理-自定义-添加播放器-选择代码-粘贴进去
里面可以更改css文件的路径，默认是<LINK rel=stylesheet type=text/css href="css/sharejs.css">
还有50,//滑动持续时间

Time:
10,//滑动延时

Pause:
4000,//停顿时间(Auto为true时有效)


图片路径还有链接这里改
<DIV id=idContainer2 class=container>
<TABLE id=idSlider2 border=0 cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD class=td_f><A href="http://www.021tianmei.com/" target="_blank"><IMG src="images/1.jpg"></A></TD>

<TD class=td_f><A href="http://www.021tianmei.com/" target="_blank"><IMG src="images/2.jpg"></A></TD>

<TD class=td_f><A href="http://www.021tianmei.com/" target="_blank"><IMG src="images/3.jpg"></A></TD>

<TD class=td_f><A href="http://www.021tianmei.com/" target="_blank"><IMG src="images/4.jpg"></A></TD>

<TD class=td_f><A href="http://www.021tianmei.com/" target="_blank"><IMG src="images/5.jpg"></A></TD>
</TR></TBODY></TABLE>
<UL id=idNum class=num></UL>
</DIV>


这些都可以在这堆代码里修改
还有banner具体大小可以在css里修改
.container {

WIDTH: 960px;

HEIGHT: 400px
}
.container A IMG {

WIDTH: 960px;

HEIGHT: 400px
另外求助我网站ie6打开排版问题，foot跑到上面来：
http://bbs.ecshop.com/thread-1108886-1-1.html

回答：
css文件的
  1. BODY {font-size:12px}
  2. UL {PADDING: 0px; MARGIN: 0px;}
  3. LI {PADDING: 0px; MARGIN: 0px;}
  4. P {line-height:10px;}

  6. .container {
  7. WIDTH: 960px;
  8. HEIGHT: 400px
  9. }
  10. .container A IMG {
  11. WIDTH: 960px;
  12. HEIGHT: 400px
  13. }
  14. .container IMG {
  15. BORDER-BOTTOM-STYLE: none;
  16. BORDER-RIGHT-STYLE: none;
  17. BORDER-TOP-STYLE: none;
  18. BORDER-LEFT-STYLE: none
  19. }
  20. .td_f A IMG {
  21. PADDING-BOTTOM: 0px;
  22. MARGIN: 0px;
  23. PADDING-LEFT: 0px;
  24. PADDING-RIGHT: 0px;
  25. PADDING-TOP: 0px
  26. }
  27. .num {
  28. POSITION: absolute;
  29. WIDTH: 90px;
  30. FLOAT: right;
  31. TOP: 380px;
  32. LEFT: 870px
  33. }
  34. .num LI {
  35. TEXT-ALIGN: center;
  36. LINE-HEIGHT: 15px;
  37. LIST-STYLE-TYPE: none;
  38. MARGIN: 1px;
  39. WIDTH: 15px;
  40. FONT-FAMILY: Arial;
  41. FLOAT: left;
  42. HEIGHT: 15px;
  43. COLOR: #86a2b8;
  44. FONT-SIZE: 12px;
  45. CURSOR: pointer
  46. }
  47. .num LI.on {
  48. LINE-HEIGHT: 15px;
  49. WIDTH: 15px;
  50. HEIGHT: 15px;
  51. COLOR: #ffffff
  52. }
复制代码






需要粘贴到后台的

  1. <LINK rel=stylesheet type=text/css href="css/sharejs.css">
  2. <SCRIPT type=text/javascript>
  3. var $ = function (id) {
  4. return "string" == typeof id ? document.getElementById(id) : id;
  5. };

  7. var Extend = function(destination, source) {
  8. for (var property in source) {
  9. destination[property] = source[property];
  10. }
  11. return destination;
  12. }

  14. var CurrentStyle = function(element){
  15. return element.currentStyle || document.defaultView.getComputedStyle(element, null);
  16. }

  18. var Bind = function(object, fun) {
  19. var args = Array.prototype.slice.call(arguments).slice(2);
  20. return function() {
  21. return fun.apply(object, args.concat(Array.prototype.slice.call(arguments)));
  22. }
  23. }

  25. var Tween = {
  26. Quart: {
  27. easeOut: function(t,b,c,d){
  28. return -c * ((t=t/d-1)*t*t*t - 1) + b;
  29. }
  30. },
  31. Back: {
  32. easeOut: function(t,b,c,d,s){
  33. if (s == undefined) s = 1.70158;
  34. return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
  35. }
  36. },
  37. Bounce: {
  38. easeOut: function(t,b,c,d){
  39. if ((t/=d) < (1/2.75)) {
  40. return c*(7.5625*t*t) + b;
  41. } else if (t < (2/2.75)) {
  42. return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
  43. } else if (t < (2.5/2.75)) {
  44. return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
  45. } else {
  46. return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
  47. }
  48. }
  49. }
  50. }


  53. //容器对象,滑动对象,切换数量
  54. var SlideTrans = function(container, slider, count, opti**) {
  55. this._slider = $(slider);
  56. this._container = $(container);//容器对象
  57. this._timer = null;//定时器
  58. this._count = Math.abs(count);//切换数量
  59. this._target = 0;//目标值
  60. this._t = this._b = this._c = 0;//tween参数

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

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

  66. this.Auto = !!this.opti**.Auto;
  67. this.Duration = Math.abs(this.opti**.Duration);
  68. this.Time = Math.abs(this.opti**.Time);
  69. this.Pause = Math.abs(this.opti**.Pause);
  70. this.Tween = this.opti**.Tween;
  71. this.**tart = this.opti**.**tart;
  72. this.onFinish = this.opti**.onFinish;

  74. var bVertical = !!this.opti**.Vertical;
  75. this._css = bVertical ? "top" : "left";//方向

  77. //样式设置
  78. var p = CurrentStyle(this._container).position;
  79. p == "relative" || p == "absolute" || (this._container.style.position = "relative");
  80. this._container.style.overflow = "hidden";
  81. this._slider.style.position = "absolute";

  83. this.Change = this.opti**.Change ? this.opti**.Change :
  84. this._slider[bVertical ? "offsetHeight" : "offsetWidth"] / this._count;
  85. };
  86. SlideTrans.prototype = {
  87. //设置默认属性
  88. SetOpti**: function(opti**) {
  89. this.opti** = {//默认值
  90. Vertical: true,//是否垂直方向（方向不能改）
  91. Auto: true,//是否自动
  92. Change: 0,//改变量
  93. Duration: 50,//滑动持续时间
  94. Time: 10,//滑动延时
  95. Pause: 4000,//停顿时间(Auto为true时有效)
  96. **tart: function(){},//开始转换时执行
  97. onFinish: function(){},//完成转换时执行
  98. Tween: Tween.Quart.easeOut//tween算子
  99. };
  100. Extend(this.opti**, opti** || {});
  101. },
  102. //开始切换
  103. Run: function(index) {
  104. //修正index
  105. index == undefined && (index = this.Index);
  106. index < 0 && (index = this._count - 1) || index >= this._count && (index = 0);
  107. //设置参数
  108. this._target = -Math.abs(this.Change) * (this.Index = index);
  109. this._t = 0;
  110. this._b = parseInt(CurrentStyle(this._slider)[this.opti**.Vertical ? "top" : "left"]);
  111. this._c = this._target - this._b;

  113. this.**tart();
  114. this.Move();
  115. },
  116. //移动
  117. Move: function() {
  118. clearTimeout(this._timer);
  119. //未到达目标继续移动否则进行下一次滑动
  120. if (this._c && this._t < this.Duration) {
  121. this.MoveTo(Math.round(this.Tween(this._t++, this._b, this._c, this.Duration)));
  122. this._timer = setTimeout(Bind(this, this.Move), this.Time);
  123. }else{
  124. this.MoveTo(this._target);
  125. this.Auto && (this._timer = setTimeout(Bind(this, this.Next), this.Pause));
  126. }
  127. },
  128. //移动到
  129. MoveTo: function(i) {
  130. this._slider.style[this._css] = i + "px";
  131. },
  132. //下一个
  133. Next: function() {
  134. this.Run(++this.Index);
  135. },
  136. //上一个
  137. Previous: function() {
  138. this.Run(--this.Index);
  139. },
  140. //停止
  141. Stop: function() {
  142. clearTimeout(this._timer); this.MoveTo(this._target);
  143. }
  144. };
  145. </SCRIPT>
  146. </head>

  148. <DIV id=idContainer2 class=container>
  149. <TABLE id=idSlider2 border=0 cellSpacing=0 cellPadding=0>
  150. <TBODY>
  151. <TR>
  152. <TD class=td_f><A href="http://www.021tianmei.com/" target="_blank"><IMG src="images/1.jpg"></A></TD>
  153. <TD class=td_f><A href="http://www.021tianmei.com/" target="_blank"><IMG src="images/2.jpg"></A></TD>
  154. <TD class=td_f><A href="http://www.021tianmei.com/" target="_blank"><IMG src="images/3.jpg"></A></TD>
  155. <TD class=td_f><A href="http://www.021tianmei.com/" target="_blank"><IMG src="images/4.jpg"></A></TD>
  156. <TD class=td_f><A href="http://www.021tianmei.com/" target="_blank"><IMG src="images/5.jpg"></A></TD>
  157. </TR></TBODY></TABLE>
  158. <UL id=idNum class=num></UL>
  159. </DIV>

  161. <SCRIPT>
  162. var forEach = function(array, callback, thisObject){
  163. if(array.forEach){
  164. array.forEach(callback, thisObject);
  165. }else{
  166. for (var i = 0, len = array.length; i < len; i++) { callback.call(thisObject, array[i], i, array); }
  167. }
  168. }

  170. var st = new SlideTrans("idContainer2", "idSlider2", 5, { Vertical: false });

  172. var nums = [];
  173. //插入数字
  174. for(var i = 0, n = st._count - 1; i <= n;){
  175. (nums[i] = $("idNum").appendChild(document.createElement("li"))).innerHTML = ++i;
  176. }

  178. forEach(nums, function(o, i){
  179. o.onmouseover = function(){ o.className = "on"; st.Auto = false; st.Run(i); }
  180. o.onmouseout = function(){ o.className = ""; st.Auto = true; st.Run(); }
  181. })

  183. //设置按钮样式
  184. st.**tart = function(){
  185. forEach(nums, function(o, i){ o.className = st.Index == i ? "on" : ""; })
  186. }
  187. st.Run();
  188. </SCRIPT>
复制代码

如果有主界面改好后的图就更好了。




？？？什么图，跟演示的一摸一样呀

顶一下。。。。。。。。。。。

很实用。。。

回头试一下 应该不错的

支持一下

一般不上论坛 有要共同进步的加QQ吧599207801
大菜鸟 互相学习

支持一下