JavaScript實(shí)現(xiàn)圖片滑動(dòng)切換的代碼示例分享
假設(shè)我們這里有1到5五張bmp圖片,那么控制圖片切換顯示的核心代碼可以為:
<script> var i=1; var img = new Array(); img[0] = "1.bmp"; img[1] = "2.bmp"; img[2] = "3.bmp"; img[3] = "4.bmp"; img[4] = "5.bmp"; function playImg(){ i=i+1; var imgs = document.getElementById("img"); imgs.src =img[i]; if(i>=4){ i=1; } } window.onload = function(){ document.getElementById("img").src="1.bmp"; } </script> <img id="img" src="" width="500" hieght="500" onclick="playImg()" style="cursor:pointer;">
主要體現(xiàn)了一個(gè)圖片的切換控制思路,可以用于各種場(chǎng)景,那么下面我們來看一個(gè)復(fù)雜一些的實(shí)現(xiàn),能夠控制滑動(dòng)和停頓事件等具體的實(shí)現(xiàn)圖片的滑動(dòng)切換效果的例子:
var $$ = function (id) { return "string" == typeof id ? document.getElementById(id) : id; }; var Extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } return destination; } var CurrentStyle = function(element){ return element.currentStyle || document.defaultView.getComputedStyle(element, null); } var Bind = function(object, fun) { var args = Array.prototype.slice.call(arguments).slice(2); return function() { return fun.apply(object, args.concat(Array.prototype.slice.call(arguments))); } } var forEach = function(array, callback, thisObject){ if(array.forEach){ array.forEach(callback, thisObject); }else{ for (var i = 0, len = array.length; i < len; i++) { callback.call(thisObject, array[i], i, array); } } } var Tween = { Quart: { easeOut: function(t,b,c,d){ return -c * ((t=t/d-1)*t*t*t - 1) + b; } }, Back: { easeOut: function(t,b,c,d,s){ if (s == undefined) s = 1.70158; return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; } }, Bounce: { easeOut: function(t,b,c,d){ if ((t/=d) < (1/2.75)) { return c*(7.5625*t*t) + b; } else if (t < (2/2.75)) { return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; } else if (t < (2.5/2.75)) { return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; } else { return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; } } } } //容器對(duì)象,滑動(dòng)對(duì)象,切換數(shù)量 var SlideTrans = function(container, slider, count, options) { this._slider = (slider);this.container= (container);//容器對(duì)象 this._timer = null;//定時(shí)器 this._count = Math.abs(count);//切換數(shù)量 this._target = 0;//目標(biāo)值 this._t = this._b = this._c = 0;//tween參數(shù) this.Index = 0;//當(dāng)前索引 this.SetOptions(options); this.Auto = !!this.options.Auto; this.Duration = Math.abs(this.options.Duration); this.Time = Math.abs(this.options.Time); this.Pause = Math.abs(this.options.Pause); this.Tween = this.options.Tween; this.onStart = this.options.onStart; this.onFinish = this.options.onFinish; var bVertical = !!this.options.Vertical; this._css = bVertical ? "top" : "left";//方向 //樣式設(shè)置 var p = CurrentStyle(this._container).position; p == "relative" || p == "absolute" || (this._container.style.position = "relative"); this._container.style.overflow = "hidden"; this._slider.style.position = "absolute"; this.Change = this.options.Change ? this.options.Change : this._slider[bVertical ? "offsetHeight" : "offsetWidth"] / this._count; }; SlideTrans.prototype = { //設(shè)置默認(rèn)屬性 SetOptions: function(options) { this.options = {//默認(rèn)值 Vertical: true,//是否垂直方向(方向不能改) Auto: true,//是否自動(dòng) Change: 0,//改變量 Duration: 30,//滑動(dòng)持續(xù)時(shí)間 Time: 10,//滑動(dòng)延時(shí) Pause: 3000,//停頓時(shí)間(Auto為true時(shí)有效) onStart: function(){},//開始轉(zhuǎn)換時(shí)執(zhí)行 onFinish: function(){},//完成轉(zhuǎn)換時(shí)執(zhí)行 Tween: Tween.Quart.easeOut//tween算子 }; Extend(this.options, options || {}); }, //開始切換 Run: function(index) { //修正index index == undefined && (index = this.Index); index < 0 && (index = this._count - 1) || index >= this._count && (index = 0); //設(shè)置參數(shù) this._target = -Math.abs(this.Change) * (this.Index = index); this._t = 0; this._b = parseInt(CurrentStyle(this._slider)[this.options.Vertical ? "top" : "left"]); this._c = this._target - this._b; this.onStart(); this.Move(); }, //移動(dòng) Move: function() { clearTimeout(this._timer); //未到達(dá)目標(biāo)繼續(xù)移動(dòng)否則進(jìn)行下一次滑動(dòng) if (this._c && this._t < this.Duration) { this.MoveTo(Math.round(this.Tween(this._t++, this._b, this._c, this.Duration))); this._timer = setTimeout(Bind(this, this.Move), this.Time); }else{ this.MoveTo(this._target); this.Auto && (this._timer = setTimeout(Bind(this, this.Next), this.Pause)); } }, //移動(dòng)到 MoveTo: function(i) { this._slider.style[this._css] = i + "px"; }, //下一個(gè) Next: function() { this.Run(++this.Index); }, //上一個(gè) Previous: function() { this.Run(--this.Index); }, //停止 Stop: function() { clearTimeout(this._timer); this.MoveTo(this._target); } };
相關(guān)文章
js實(shí)現(xiàn)簡(jiǎn)單的選項(xiàng)卡效果
本文主要介紹了js實(shí)現(xiàn)簡(jiǎn)單的選項(xiàng)卡效果的示例代碼,具有很好的參考價(jià)值,下面跟著小編一起來看下吧2017-02-02JS保留小數(shù)點(diǎn)(四舍五入、四舍六入)實(shí)現(xiàn)思路及實(shí)例
保留兩位小數(shù):將浮點(diǎn)數(shù)四舍五入,取小數(shù)點(diǎn)后2位;如:2,會(huì)在2后面補(bǔ)上00.即2.00,感興趣的朋友看下具體的實(shí)現(xiàn)思路及代碼2013-04-04js實(shí)現(xiàn)字符串轉(zhuǎn)日期格式的方法
這篇文章主要介紹了js實(shí)現(xiàn)字符串轉(zhuǎn)日期格式的方法,涉及javascript針對(duì)字符串與日期操作的相關(guān)技巧,需要的朋友可以參考下2015-05-05js編寫當(dāng)天簡(jiǎn)單日歷效果【實(shí)現(xiàn)代碼】
下面小編就為大家?guī)硪黄猨s編寫當(dāng)天簡(jiǎn)單日歷效果【實(shí)現(xiàn)代碼】。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考2016-05-05JS檢測(cè)window.open打開的窗口是否關(guān)閉
在開發(fā)中遇到需要在打開窗口的同時(shí)給父窗口添加遮罩防止用戶誤操作,而在窗口關(guān)閉時(shí)需要去掉父窗口的遮罩以便用戶操作。所以可以利用setInterval()來周期性的檢測(cè)打開的窗口是否關(guān)閉2017-06-06checkbox全選所涉及到的知識(shí)點(diǎn)介紹
checkbox全選涉及到的知識(shí)點(diǎn)比如IE里起作用,火狐不起作用,getElementById()與getElementsByName()的區(qū)別等等2013-12-12