JS-Image-Click-Switching-Karussell-Implementierungscode

Guanhui
Freigeben: 2020-07-28 11:54:05
nach vorne
2694 Leute haben es durchsucht

JS-Image-Click-Switching-Karussell-Implementierungscode

Klicken Sie, um das Bild zu wechseln

       

Nach dem Login kopieren

Erreichen Sie das Wirkung

Karussell

        

Nach dem Login kopieren

tools.js

//动画函数 /*参数 * -1.obj 对象 * -2.speed 速度 * -3.target 执行动画的目标 * -4.arrt 要变化的样式 * -5.callback:回调函数 将会在动画执行完后执行 */ function move(obj,speed,target,arrt,callback){ //关闭上一次定时器 clearTimeout(obj.timer); //判断速度的正负值 //如果从0向800移动则为正 //如果从800向0移动则为负 var current=parseInt(getStyle(obj,arrt)); if(current>target){ speed=-speed; } //开启一个定时器 //为obj添加一个timer属性,用来保存它1自己的定时器的标识 obj.timer=setInterval(function(){ //获取原来的left值 var oldvalue=parseInt(getStyle(obj,arrt)); //在旧值的基础上增加 var newvalue=oldvalue+speed; if(speed<0&&newvalue0&&newvalue>target) { newvalue=target; } obj.style[arrt]=newvalue+"px"; //当元素到达target关闭定时器 if(newvalue===target||newvalue===target){ clearTimeout(obj.timer); //动画执行完 执行函数 callback&&callback(); } },30); };
Nach dem Login kopieren

Effekt erzielen

Empfohlenes Tutorial: „PHP

Das obige ist der detaillierte Inhalt vonJS-Image-Click-Switching-Karussell-Implementierungscode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:jb51.net
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!