图片切换效果!

忘是亡心i 2022-08-06 05:17 381阅读 0赞

学了一段时间tween算法,也学习了一些好的代码,也写了一些例子,不过都是模仿的,

但这个绝对是原创, HOHO

<style type="text/css"> .ss\{ border:1px solid \#000000; height:100px; width:100px; position:absolute; left:100px; top:240px; z-index:1; border:1px solid \#FFFFFF; \} </style> <body style="background-color:\#000000;color:\#FFFFFF; font-size:12px;"> <div>循环播放<input id='a1' value="确定" type="button" onClick="cycle(this)" disabled="disabled"></div> <div>键盘操作(left,rigth键====>‘→’‘←’)<input id='a2' value="确定" type="button" onClick="keyboard(this)"></div> <script> Array.prototype.end =function()\{return (this.length) ? this\[this.length - 1\] : null;\}; function $(Id)\{return document.getElementById(Id)\}; function create(elm,parent,fn)\{var element = document.createElement(elm);parent.appendChild(element);if(fn)fn(element);\}; var CurrentStyle = function(element)\{return element.currentStyle || document.defaultView.getComputedStyle(element, null);\}; function foreach(arr,fn)\{for(var i=0;i<arr.length;i++)\{arr\[i\]=fn(arr\[i\])\}\} function parseint(elm,type)\{ switch(type) \{ case 1: return parseInt(CurrentStyle(elm).width); break; case 2: return parseInt(CurrentStyle(elm).height); break; case 3: return parseInt(CurrentStyle(elm).left); break; case 4: return parseInt(CurrentStyle(elm).top); break default: return ; \} \} var Tween = \{ Quintic:\{ easeOut: function(t,b,c,d)\{ //return c\*((t=t/d-1)\*t\*t\*t\*t + 1) + b; return c\*t/d + b; \} \} \} var extend = function() \{ var args = arguments; if(!args\[1\])args = \[this,args\[0\]\]; for(var property in args\[1\])args\[0\]\[property\] = args\[1\]\[property\]; return args\[0\]; \}; var Class = function(properties)\{ var \_class = function()\{return (arguments\[0\] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;\}; \_class.prototype = properties; return \_class; \}; var imgswitch = new Class(\{ options:\{ range :300, //扩大的范围; step :30, t :0, time :10, zindex :10, leftdiff:150 //图片的间距 \}, initialize:function(data,dif)\{ var self = this; this.data = data; this.dif = dif; this.lock = false; this.timer = null; this.position = \[\]; this.direction= true; this.current = new Array(4); this.range = this.options.range; this.step = document.all?this.options.step:this.options.step-20; this.t = this.options.t; this.time = this.options.time; this.zindex = this.options.zindex; this.leftdiff = this.options.leftdiff; for(var i=0; i<this.data.length;i++) \{ create('img',document.body,function(elm)\{ with(elm)\{id = self.data\[i\].id;className= self.data\[i\].className;src= self.data\[i\].src;style.left = parseint($(self.data\[0\].id),3) +i\*self.leftdiff\} self.position.push(parseInt(CurrentStyle(elm).left)); \}) \} this.original = \[parseint($(this.data\[0\].id),1),parseint($(this.data\[0\].id),2),parseint($(this.data\[0\].id),3),parseint($(this.data\[0\].id),4)\]; this.gap = parseint($(this.data\[1\].id),3)-parseint($(this.data\[0\].id),3); //设置最后一张图片的位置 长度 高度 var data =$(this.data.end().id); data.style.height = this.current\[1\] = parseint(data,2)+this.range+'px'; data.style.width = this.current\[0\] = parseint(data,1)+this.range+'px'; data.style.left = this.current\[2\] = this.position\[0\] +(parseint($(this.data\[this.data.length-2\].id),3)-parseint($(this.data\[0\].id),3)-this.range)/2; data.style.top = this.current\[3\] = parseint(data,4) - this.range/2 ; data.zIndex = this.zindex; /// this.position\[this.position.length-1\]=parseint(data,3); foreach(this.current,function(o)\{return o=parseInt(o) \}); \}, start:function(arg)\{; if(this.lock)\{return\} else\{this.lock ='true'\} this.direction = arg; this.gap = (this.direction?Math.abs(this.gap):(-1)\*(Math.abs(this.gap))) this.move(); \}, fun:function()\{ this.movep();this.movef();this.movel(); \}, movep:function()\{ var j = this.direction?(-1):0 for(var i = 1+j ; i<this.data.length-1+j; i++) \{$(this.data\[i\].id).style.left = this.position\[i\] + this.moveto(this.t,0,this.gap,this.step)\} \}, movef:function()\{ //中间的图移动 var data = $(this.data.end().id); data.style.left = this.direction?(this.position\[this.position.length-1\] + this.moveto(this.t,0,(this.position\[0\]-this.current\[2\]),this.step)):(this.current\[2\] +this.moveto(this.t,0,(this.position\[this.position.length-2\]-this.current\[2\]),this.step)) data.style.top = this.moveto(this.t,this.current\[3\],(this.original\[3\]-this.current\[3\]),this.step); data.style.width = this.moveto(this.t,this.current\[0\],(-1\*this.range),this.step); data.style.height = this.moveto(this.t,this.current\[1\],(-1\*this.range),this.step); data.style.zIndex = this.moveto(this.t,this.zindex,(1-this.zindex),this.step); \}, movel:function()\{ //两边的图片移动 var data = this.direction?$(this.data\[this.data.length-2\].id):$(this.data\[0\].id) data.style.left = this.direction?(this.position\[this.position.length-2\] + this.moveto(this.t,0,(this.current\[2\]-this.position\[this.position.length-2\]),this.step)):(this.position\[0\] + this.moveto(this.t,0,(this.current\[2\]-this.position\[0\]),this.step)) data.style.width = this.moveto(this.t,this.original\[0\],this.range,this.step); data.style.height = this.moveto(this.t,this.original\[1\],this.range,this.step); data.style.top = this.moveto(this.t,this.original\[3\],(this.current\[3\]-this.original\[3\]),this.step); data.style.zIndex = this.moveto(this.t,3,(this.zindex-1),this.step); \}, move:function()\{ var self = this; this.fun(); if(++this.t>this.step) \{ clearTimeout(this.timer);this.t=0;this.lock=false; this.direction?this.data.splice(0,0,this.data.pop()):this.data.push(this.data.shift()) \} else \{this.timer = setTimeout(function()\{self.move()\},this.time)\} \}, moveto:function(t,b,c,d)\{ return Math.round(Tween.Quintic.easeOut(t,b,c,d)); \} \}) var arr = \[\{id:'img1',className:'ss',src:'http://images.cnblogs.com/cnblogs\_com/wtcsy/192373/r\_1.gif'\},\{id:'img2',className:'ss',src:'http://images.cnblogs.com/cnblogs\_com/wtcsy/192373/r\_2.gif'\},\{id:'img3',className:'ss',src:'http://images.cnblogs.com/cnblogs\_com/wtcsy/192373/r\_7.gif'\},\{id:'img4',className:'ss',src:'http://images.cnblogs.com/cnblogs\_com/wtcsy/192373/r\_8.gif'\},\{id:'img5',className:'ss',src:'http://images.cnblogs.com/cnblogs\_com/wtcsy/192373/r\_10.gif'\},\{id:'img6',className:'ss',src:'http://images.cnblogs.com/cnblogs\_com/wtcsy/192373/r\_11.gif'\},\{id:'img7',className:'ss',src:'http://images.cnblogs.com/cnblogs\_com/wtcsy/192373/r\_12.gif'\}\]; var a = new imgswitch(arr,4000); function addListener(element,e,fn)\{ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn)\} function removeListener(element,e,fn)\{ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn)\} var timer =null function cycle(obj)\{ obj.disabled="disabled" $('a2').disabled = '' timer = setInterval(function()\{a.move()\},4000) removeListener(document,'keydown',an) \} function keyboard(obj)\{ obj.disabled="disabled" $('a1').disabled = '' clearTimeout(timer) addListener(document,'keydown',an) \} function an(event)\{ var e = event || window.event if((e.charCode||e.keyCode)==37) \{a.start(true);\} if((e.charCode||e.keyCode)==39) \{a.start(false);\} \} timer = setInterval(function()\{a.move()\},4000) </script> </body>

<script type="text/javascript"> </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，381人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue实现图片切换效果

思路：整个代码部分分为轮播图片和控制span两个部分。按照前端工程化的需求来说，这两个部分应该解耦成两个component最后再导入页面比较合理，但由于demo较为简单

Bertha 。/ 2023年06月14日 15:53/ 0 赞/ 22 阅读

相关 vue||图片切换效果

vue相关知识 1）v-if/v-show 二者都可以实现让元素隐藏和显示。但是实现原理不同： v-if 是通过将元素从dom树中移除和添加来实现元素的隐藏和显示

墨蓝/ 2023年03月13日 13:12/ 0 赞/ 22 阅读

相关图片切换效果!

学了一段时间tween算法,也学习了一些好的代码,也写了一些例子,不过都是模仿的, 但这个绝对是原创, HOHO <style type="text/css"> .s

忘是亡心i/ 2022年08月06日 05:17/ 0 赞/ 382 阅读

相关 vue中实现简单切换图片效果

实例：实现大于三张图片时，点击箭头图片切换，并有箭头置灰不可操作。 html <div class="summary"> <div class=

青旅半醒/ 2022年05月23日 01:44/ 0 赞/ 430 阅读

相关 JavaScript 图片滑动切换效果

序一（08/07/06）看到alibaba的一个图片切换效果，感觉不错，想拿来用用。但代码一大堆的，看着昏，还是自己来吧。由于有了做图片滑动展示效果的经验，做

本是古典何须时尚/ 2022年04月14日 01:50/ 0 赞/ 458 阅读

相关选项卡切换效果，点击切换图片

今天分享一篇前端开发实战当中经常使用到的选项卡切换效果的文章，希望对您有所帮助，欢迎留言探讨。 1、html结构布局： <div id="box">

太过爱你忘了你带给我的痛/ 2022年04月06日 05:41/ 0 赞/ 544 阅读

相关 js鼠标滚轮滚动图片切换效果

效果体验网址：[http://keleyi.com/keleyi/phtml/image/12.htm][http_keleyi.com_keleyi_phtml_image_

谁践踏了优雅/ 2022年03月31日 03:20/ 0 赞/ 547 阅读

相关滴滴官网图片切换效果

演示Demo： [https://brights2017.gitee.io/test1/test1-34/][https_brights2017.gitee.io_test1

素颜马尾好姑娘i/ 2022年02月01日 05:47/ 0 赞/ 461 阅读

相关图片切换效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/T

ゝ一纸荒年。/ 2021年10月08日 05:30/ 0 赞/ 622 阅读

相关 js图片自动切换效果

自己设置每张图片切换的时间间隔，自己设置每张图片的路径（绝对、相对路径都可以）虽然很简单，但是很实用代码如下: <script language =javascr

迷南。/ 2021年07月04日 17:12/ 0 赞/ 661 阅读