图片友情链接滚动 横向,带控制按钮

<br /> <title><a href="https://kunjuke.com/tag/3317/" title="友情链接" target="_blank">友情链接</a><a href="https://kunjuke.com/tag/103/" title="滚动" target="_blank">滚动</a>特效</title> </p> <p>.roun .rouncenter_fh{width:248px;float:left;overflow:hidden;border-left:1px solid #d3d3d3;border-right:1px solid<br /> #d3d3d3;background-color: #ffffff;background-position: 193px top; height:133px; padding-top:8px;}<br /> .container, .container img{width:180px; height:50px;}<br /> .index_bank{width:250px; height:60px; background:url(//files.jb51.net/demoimg/200910//bank_back.gif) no-<br /> repeat; padding:30px 0 0 15px;} </p> <table width="190px" border="0" cellspacing="0" cellpadding="0"> <tr> <td></td> <td> <table id="idslider2" border="0" cellpadding="0" cellspacing="0"> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> </td> <td></td> </tr> </table> <p>var $ = function (id) {<br /> return "string" == typeof id ? document.getelementbyid(id) : id;<br /> };<br /> var extend = function(destination, source) {<br /> for (var property in source) {<br /> destination[property] = source[property];<br /> }<br /> return destination;<br /> }<br /> var currentstyle = function(element){<br /> return element.currentstyle || document.defaultview.getcomputedstyle(element, null);<br /> }<br /> var bind = function(object, fun) {<br /> var args = array.prototype.slice.call(arguments).slice(2);<br /> return function() {<br /> return fun.apply(object, args.concat(array.prototype.slice.call(arguments)));<br /> }<br /> }<br /> var tween = {<br /> quart: {<br /> easeout: function(t,b,c,d){<br /> return -c * ((t=t/d-1)*t*t*t - 1) + b;<br /> }<br /> },<br /> back: {<br /> easeout: function(t,b,c,d,s){<br /> if (s == undefined) s = 1.70158;<br /> return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;<br /> }<br /> },<br /> bounce: {<br /> easeout: function(t,b,c,d){<br /> if ((t/=d) < (1/2.75)) {<br /> return c*(7.5625*t*t) + b;<br /> } else if (t < (2/2.75)) {<br /> return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;<br /> } else if (t < (2.5/2.75)) {<br /> return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;<br /> } else {<br /> return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;<br /> }<br /> }<br /> }<br /> }<br /> //容器对象,滑动对象,切换数量<br /> var slidetrans = function(container, slider, count, options) {<br /> this._slider = $(slider);<br /> this._container = $(container);//容器对象<br /> this._timer = null;//定时器<br /> this._count = math.abs(7);//切换数量<br /> this._target = 0;//目标值<br /> this._t = this._b = this._c = 0;//tween参数<br /> this.index = 0;//当前索引<br /> this.setoptions(options);<br /> this.auto = !!this.options.auto;<br /> this.duration = math.abs(this.options.duration);<br /> this.time = math.abs(this.options.time);<br /> this.pause = math.abs(this.options.pause);<br /> this.tween = this.options.tween;<br /> this.onstart = this.options.onstart;<br /> this.onfinish = this.options.onfinish; </p> <p> var bvertical = !!this.options.vertical;<br /> this._css = bvertical ? "left" : "left";//方向 </p> <p> //样式设置<br /> var p = currentstyle(this._container).position;<br /> p == "relative" || p == "absolute" || (this._container.style.position = "relative");<br /> this._container.style.overflow = "hidden";<br /> this._slider.style.position = "absolute"; </p> <p> this.change = this.options.change ? this.options.change :<br /> this._slider[bvertical ? "offsetheight" : "offsetwidth"] / this._count;<br /> };<br /> slidetrans.prototype = {<br /> //设置默认属性<br /> setoptions: function(options) {<br /> this.options = {//默认值<br /> vertical: true,//滚动方向，这里是垂直，已固定，且不能修改）<br /> auto: true,//是否自动<br /> change: 0,//改变量<br /> duration: 50,//滑动持续时间<br /> time: 10,//滑动延时<br /> pause: 2000,//停顿时间(auto为true时有效)<br /> onstart: function(){},//开始转换时执行<br /> onfinish: function(){},//完成转换时执行<br /> tween: tween.quart.easeout//tween算子<br /> };<br /> extend(this.options, options || {});<br /> },<br /> //开始切换<br /> run: function(index) {<br /> //修正index<br /> index == undefined && (index = this.index);<br /> index = this._count && (index = 0);<br /> //设置参数<br /> this._target = -math.abs(this.change) * (this.index = index);<br /> this._t = 0;<br /> this._b = parseint(currentstyle(this._slider)[this.options.vertical ? "top" : "left"]);<br /> this._c = this._target - this._b; </p> <p> this.onstart();<br /> this.move();<br /> },<br /> //移动<br /> move: function() {<br /> cleartimeout(this._timer);<br /> //未到达目标继续移动否则进行下一次滑动<br /> if (this._c && this._t < this.duration) {<br /> this.moveto(math.round(this.tween(this._t++, this._b, this._c, this.duration)));<br /> this._timer = settimeout(bind(this, this.move), this.time);<br /> }else{<br /> this.moveto(this._target);<br /> this.auto && (this._timer = settimeout(bind(this, this.next), this.pause));<br /> }<br /> },<br /> //移动到<br /> moveto: function(i) {<br /> this._slider.style[this._css] = i + "px";<br /> },<br /> //下一个<br /> next: function() {<br /> this.run(++this.index);<br /> },<br /> //上一个<br /> previous: function() {<br /> this.run(--this.index);<br /> },<br /> //停止<br /> stop: function() {<br /> cleartimeout(this._timer); this.moveto(this._target);<br /> }<br /> };<br /> var foreach = function(array, callback, thisobject){<br /> if(array.foreach){<br /> array.foreach(callback, thisobject);<br /> }else{<br /> for (var i = 0, len = array.length; i < len; i++) { callback.call(thisobject, array[i], i, array); }<br /> }<br /> }<br /> var st = new slidetrans("idcontainer2", "idslider2", 3, { vertical: false });<br /> var nums = [];<br /> foreach(nums, function(o, i){<br /> o.onmouseover = function(){ o.classname = "on"; st.auto = false; st.run(i); }<br /> o.onmouseout = function(){ o.classname = ""; st.auto = true; st.run(); }<br /> })<br /> //设置<a href="https://kunjuke.com/tag/279/" title="按钮" target="_blank">按钮</a>样式<br /> st.onstart = function(){<br /> foreach(nums, function(o, i){ o.classname = st.index == i ? "on" : ""; })<br /> }<br /> $("idnext").onclick = function(){ st.next(); }<br /> $("idpre").onclick = function(){ st.previous(); }<br /> st.run(); </p> <p>
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]