如何将网站模板里的几个不同公司的logo图片,做成向左间歇式的滑动,不同公司的logo图片是在友情链接里面 5

 我来答
优网
2015-09-26 · 十五年企业网络策划运营
优网
采纳数:8615 获赞数:28383

向TA提问 私信TA
展开全部
  1. 友情链接滚动特效 带控制按钮

  2. <title>友情链接滚动特效 带控制按钮</title>

  3. <style>

  4. .roun .rounCenter_fh{width:248px;float:left;overflow:hidden;border-left:1px solid #D3D3D3;border-right:1px solid 

  5. #D3D3D3;background-color: #FFFFFF;background-position: 193px top; height:133px; padding-top:8px;}

  6. .container, .container img{width:180px; height:50px;}

  7. .index_bank{width:250px; height:60px; background:url(/jscss/demoimg/200910/bank_back.gif) no-

  8. repeat; padding:30px 0 0 15px;}

  9. </style>

  10. <DIV class="roun right mT8px">

  11. <div class="index_bank">

  12.   <table width="190px" border="0" cellspacing="0" cellpadding="0">

  13.     <tr>

  14.       <td><input id="idPre" type="image" src="/jscss/demoimg/200910//bank_btn_left.gif" 

  15. onFocus="this.blur()" /></td>

  16.       <td><div class="container" id="idContainer2">

  17.           <table id="idSlider2" border="0" cellpadding="0" cellspacing="0">

  18.             <tr>

  19.               <td><a href="http://boaer.com"><img src="/bank1.gif"></a></td>

  20.               <td><a href="http://boaer.com"><img src="/bank2.gif"></a></td>

  21.               <td><a href="http://boaer.com"><img src="/bank3.gif"></a></td>

  22.               <td><a href="http://boaer.com"><img src="/bank4.gif"></a></td>

  23.               <td><a href="http://boaer.com"><img src="/bank5.gif"></a></td>

  24.               <td><a href="http://boaer.com"><img src="/bank6.gif"></a></td>

  25.               <td><a href="http://boaer.com"><img src="/bank7.gif"></a></td>

  26.             </tr>

  27.           </table>

  28.         </div></td>

  29.       <td><input id="idNext" type="image" src="/jscss/demoimg/200910//bank_btn_right.gif" 

  30. onFocus="this.blur()" /></td>

  31.     </tr>

  32.   </table>

  33. </div>

  34. <script> 

  35. var $ = function (id) {

  36. return "string" == typeof id ? document.getElementById(id) : id;

  37. };

  38. var Extend = function(destination, source) {

  39. for (var property in source) {

  40. destination[property] = source[property];

  41. }

  42. return destination;

  43. }

  44. var CurrentStyle = function(element){

  45. return element.currentStyle || document.defaultView.getComputedStyle(element, null);

  46. }

  47. var Bind = function(object, fun) {

  48. var args = Array.prototype.slice.call(arguments).slice(2);

  49. return function() {

  50. return fun.apply(object, args.concat(Array.prototype.slice.call(arguments)));

  51. }

  52. }

  53. var Tween = {

  54. Quart: {

  55. easeOut: function(t,b,c,d){

  56. return -c * ((t=t/d-1)*t*t*t - 1) + b;

  57. }

  58. },

  59. Back: {

  60. easeOut: function(t,b,c,d,s){

  61. if (s == undefined) s = 1.70158;

  62. return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;

  63. }

  64. },

  65. Bounce: {

  66. easeOut: function(t,b,c,d){

  67. if ((t/=d) < (1/2.75)) {

  68. return c*(7.5625*t*t) + b;

  69. } else if (t < (2/2.75)) {

  70. return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;

  71. } else if (t < (2.5/2.75)) {

  72. return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;

  73. } else {

  74. return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;

  75. }

  76. }

  77. }

  78. }

  79. //容器对象,滑动对象,切换数量

  80. var SlideTrans = function(container, slider, count, options) {

  81. this._slider = $(slider);

  82. this._container = $(container);//容器对象

  83. this._timer = null;//定时器

  84. this._count = Math.abs(7);//切换数量

  85. this._target = 0;//目标值

  86. this._t = this._b = this._c = 0;//tween参数

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

  88. this.SetOptions(options);

  89. this.Auto = !!this.options.Auto;

  90. this.Duration = Math.abs(this.options.Duration);

  91. this.Time = Math.abs(this.options.Time);

  92. this.Pause = Math.abs(this.options.Pause);

  93. this.Tween = this.options.Tween;

  94. this.onStart = this.options.onStart;

  95. this.onFinish = this.options.onFinish;

  96. var bVertical = !!this.options.Vertical;

  97. this._css = bVertical ? "left" : "left";//方向

  98. //样式设置

  99. var p = CurrentStyle(this._container).position;

  100. p == "relative" || p == "absolute" || (this._container.style.position = "relative");

  101. this._container.style.overflow = "hidden";

  102. this._slider.style.position = "absolute";

  103. this.Change = this.options.Change ? this.options.Change :

  104. this._slider[bVertical ? "offsetHeight" : "offsetWidth"] / this._count;

  105. };

  106. SlideTrans.prototype = {

  107.   //设置默认属性

  108.   SetOptions: function(options) {

  109. this.options = {//默认值

  110. Vertical: true,//滚动方向,这里是垂直,已固定,且不能修改)

  111. Auto: true,//是否自动

  112. Change: 0,//改变量

  113. Duration: 50,//滑动持续时间

  114. Time: 10,//滑动延时

  115. Pause: 2000,//停顿时间(Auto为true时有效)

  116. onStart: function(){},//开始转换时执行

  117. onFinish: function(){},//完成转换时执行

  118. Tween: Tween.Quart.easeOut//tween算子

  119. };

  120. Extend(this.options, options || {});

  121.   },

  122.   //开始切换

  123.   Run: function(index) {

  124. //修正index

  125. index == undefined && (index = this.Index);

  126. index < 0 && (index = this._count - 1) || index >= this._count && (index = 0);

  127. //设置参数

  128. this._target = -Math.abs(this.Change) * (this.Index = index);

  129. this._t = 0;

  130. this._b = parseInt(CurrentStyle(this._slider)[this.options.Vertical ? "top" : "left"]);

  131. this._c = this._target - this._b;


  132. this.onStart();

  133. this.Move();

  134.   },

  135.   //移动

  136.   Move: function() {

  137. clearTimeout(this._timer);

  138. //未到达目标继续移动否则进行下一次滑动

  139. if (this._c && this._t < this.Duration) {

  140. this.MoveTo(Math.round(this.Tween(this._t++, this._b, this._c, this.Duration)));

  141. this._timer = setTimeout(Bind(this, this.Move), this.Time);

  142. }else{

  143. this.MoveTo(this._target);

  144. this.Auto && (this._timer = setTimeout(Bind(this, this.Next), this.Pause));

  145. }

  146.   },

  147.   //移动到

  148.   MoveTo: function(i) {

  149. this._slider.style[this._css] = i + "px";

  150.   },

  151.   //下一个

  152.   Next: function() {

  153. this.Run(++this.Index);

  154.   },

  155.   //上一个

  156.   Previous: function() {

  157. this.Run(--this.Index);

  158.   },

  159.   //停止

  160.   Stop: function() {

  161. clearTimeout(this._timer); this.MoveTo(this._target);

  162.   }

  163. };

  164. var forEach = function(array, callback, thisObject){

  165. if(array.forEach){

  166. array.forEach(callback, thisObject);

  167. }else{

  168. for (var i = 0, len = array.length; i < len; i++) { callback.call(thisObject, array[i], i, array); }

  169. }

  170. }

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

  172. var nums = [];

  173. forEach(nums, function(o, i){

  174. o.onmouseover = function(){ o.className = "on"; st.Auto = false; st.Run(i); }

  175. o.onmouseout = function(){ o.className = ""; st.Auto = true; st.Run(); }

  176. })

  177. //设置按钮样式

  178. st.onStart = function(){

  179. forEach(nums, function(o, i){ o.className = st.Index == i ? "on" : ""; })

  180. }

  181. $("idNext").onclick = function(){ st.Next(); }

  182. $("idPre").onclick = function(){ st.Previous(); }

  183. st.Run();

  184. </script>

更多追问追答
追问
你好你列出来的是一个完整的代码还另外加了内容么
追答
另外?什么内容
代码都在这看到什么就是什么了。。。
sunny-郭
2019-06-03 · 知道合伙人互联网行家
sunny-郭
知道合伙人互联网行家
采纳数:31 获赞数:60
2015年学习SEO/SEM,并从事相关工作,十年行业经验!

向TA提问 私信TA
展开全部
浏览器全屏打开后网页实际的内容区域离屏幕两边有一定空白,网页做的时候一般宽九百多像素吧,自己看着做吧。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 1条折叠回答
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式