js圖片轉動代碼（圖片切換js特效代碼）

本文目錄一覽：

1、javascript讓圖片移動的函數
2、JS控制圖片向左向右移動的代碼
3、js實現圖片旋轉效果
4、js 怎麼實現點擊一次圖片旋轉90度，再點擊再轉90度呢
5、JavaScript代碼實現圖片循環滾動效果
6、js設置圖片隨機旋轉角度

javascript讓圖片移動的函數

/**

* 簡單自定義動畫函數

* @param {objec} obj 一個元素對象

* @param {string} pos 表示移動到的目標地點

* @param {number} speed 速度大小，表示每秒移動的像素數，默認為1px/100ms

* @param {function} callback 動畫執行完後調用的函數

* @return {[object]} 元素自身，方便鏈式寫法

function ani(obj, pos, speed, callback) {

/* 清除無用的定時器 */

if (obj.move) {

clearTimeout(obj.move);

}

obj.style.position = “absolute”;

var speed = speed || 10,

x = parseInt(obj.style.left) || 0,

y = parseInt(obj.style.top) || 0;

/* 初始化元素的相關屬性值 */

if (!obj.x) {

obj.x = x;

obj.y = y;

obj.fx = x + pos[0];

obj.fy = y + pos[1];

}

/* 如果元素到達指定位置，則跳出並執行回調函數 */

if (x === (pos[0] + obj.x) y === (pos[1] + obj.y)) {

if (typeof callback === “function”) {

callback();

}

obj.x = null;

obj.y = null;

obj.fx = null;

obj.fy = null;

return obj;

}

/* 判斷在水平方向上是應該往哪個方向移動 */

if (obj.x obj.fx) {

if (x obj.fx) {

obj.style.left = (x + speed) + “px”;

}

} else {

if (x obj.fx) {

obj.style.left = (x – speed) + “px”;

}

/* 判斷在垂直方向上是應該往哪個方向移動 */

if (obj.y obj.fy) {

if (y obj.fy) {

obj.style.top = (y + speed) + “px”;

}

} else {

if (y obj.fy) {

obj.style.top = (y – speed) + “px”;

}

obj.move = setTimeout(function() {

ani(obj, pos, speed, callback);

}, 100);

}

window.onclick = function() {

ani($(“#testAni”)[0], [100, 0], 5, function() {

ani($(“#testAni”)[0], [-100, 0],null,function(){

alert(“success”)

});

})

}

可供參考

JS控制圖片向左向右移動的代碼

這段代碼可以： !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ” ” html xmlns=” ” head meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ / title圖片/title script language=”javascript” !– //圖片滾動列表 mengjia 070927 var Speed_1 = 10; //速度(毫秒) var Space_1 = 20; //每次移動(px) var PageWidth_1 = 116 * 3; //翻頁寬度 var interval_1 = 7000; //翻頁間隔 var fill_1 = 0; //整體移位 var MoveLock_1 = false; var MoveTimeObj_1; var MoveWay_1=”right”; var Comp_1 = 0; var AutoPlayObj_1=null; function GetObj(objName){if(document.getElementById){return eval(‘document.getElementById(“‘+objName+'”)’)}else{return eval(‘document.all.’+objName)}} function AutoPlay_1(){clearInterval(AutoPlayObj_1);AutoPlayObj_1=setInterval(‘ISL_GoDown_1();ISL_StopDown_1();’,interval_1)} function ISL_GoUp_1(){if(MoveLock_1)return;clearInterval(AutoPlayObj_1);MoveLock_1=true;MoveWay_1=”left”;MoveTimeObj_1=setInterval(‘ISL_ScrUp_1();’,Speed_1);} function ISL_StopUp_1(){if(MoveWay_1 == “right”){return};clearInterval(MoveTimeObj_1);if((GetObj(‘ISL_Cont_1’).scrollLeft-fill_1)%PageWidth_1!=0){Comp_1=fill_1-(GetObj(‘ISL_Cont_1’).scrollLeft%PageWidth_1);CompScr_1()}else{MoveLock_1=false} AutoPlay_1()} function ISL_ScrUp_1(){if(GetObj(‘ISL_Cont_1’).scrollLeft=0){GetObj(‘ISL_Cont_1’).scrollLeft=GetObj(‘ISL_Cont_1’).scrollLeft+GetObj(‘List1_1’).offsetWidth} GetObj(‘ISL_Cont_1’).scrollLeft-=Space_1} function ISL_GoDown_1(){clearInterval(MoveTimeObj_1);if(MoveLock_1)return;clearInterval(AutoPlayObj_1);MoveLock_1=true;MoveWay_1=”right”;ISL_ScrDown_1();MoveTimeObj_1=setInterval(‘ISL_ScrDown_1()’,Speed_1)} function ISL_StopDown_1(){if(MoveWay_1 == “left”){return};clearInterval(MoveTimeObj_1);if(GetObj(‘ISL_Cont_1’).scrollLeft%PageWidth_1-(fill_1=0?fill_1:fill_1+1)!=0){Comp_1=PageWidth_1-GetObj(‘ISL_Cont_1’).scrollLeft%PageWidth_1+fill_1;CompScr_1()}else{MoveLock_1=false} AutoPlay_1()} function ISL_ScrDown_1(){if(GetObj(‘ISL_Cont_1’).scrollLeft=GetObj(‘List1_1’).scrollWidth){GetObj(‘ISL_Cont_1’).scrollLeft=GetObj(‘ISL_Cont_1’).scrollLeft-GetObj(‘List1_1’).scrollWidth} GetObj(‘ISL_Cont_1’).scrollLeft+=Space_1} function CompScr_1(){if(Comp_1==0){MoveLock_1=false;return} var num,TempSpeed=Speed_1,TempSpace=Space_1;if(Math.abs(Comp_1)PageWidth_1/2){TempSpace=Math.round(Math.abs(Comp_1/Space_1));if(TempSpace1){TempSpace=1}} if(Comp_10){if(Comp_1-TempSpace){Comp_1+=TempSpace;num=TempSpace}else{num=-Comp_1;Comp_1=0} GetObj(‘ISL_Cont_1’).scrollLeft-=num;setTimeout(‘CompScr_1()’,TempSpeed)}else{if(Comp_1TempSpace){Comp_1-=TempSpace;num=TempSpace}else{num=Comp_1;Comp_1=0} GetObj(‘ISL_Cont_1’).scrollLeft+=num;setTimeout(‘CompScr_1()’,TempSpeed)}} function picrun_ini(){ GetObj(“List2_1”).innerHTML=GetObj(“List1_1”).innerHTML; GetObj(‘ISL_Cont_1’).scrollLeft=fill_1=0?fill_1:GetObj(‘List1_1’).scrollWidth-Math.abs(fill_1); GetObj(“ISL_Cont_1”).onmouseover=function(){clearInterval(AutoPlayObj_1)} GetObj(“ISL_Cont_1″).onmouseout=function(){AutoPlay_1()} AutoPlay_1(); } //產品展示滾動圖片結束 //– /script style type=”text/css” !– BODY { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 12px; BORDER-BOTTOM-WIDTH: 0px; MARGIN: 0px; FONT-FAMILY: 宋體; BACKGROUND-COLOR: #fff; BORDER-RIGHT-WIDTH: 0px } .blk_18 { BORDER-RIGHT: #e3e3e3 1px solid; BORDER-TOP: #e3e3e3 1px solid; MARGIN-TOP: 8px; FONT-SIZE: 12px; BACKGROUND: #f3f3f3; OVERFLOW: hidden; BORDER-LEFT: #e3e3e3 1px solid; WIDTH: 390px; BORDER-BOTTOM: #e3e3e3 1px solid; ZOOM: 1 } .blk_18 .pcont { FLOAT: left; OVERFLOW: hidden; WIDTH: 350px } .blk_18 .ScrCont { WIDTH: 32766px; ZOOM: 1 } .blk_18 #List1_1 { FLOAT: left } .blk_18 #List2_1 { FLOAT: left } .blk_18 .LeftBotton { BACKGROUND: url( ) no-repeat; FLOAT: left; MARGIN: 10px 1px; WIDTH: 15px; HEIGHT: 72px } .blk_18 .RightBotton { BACKGROUND: url( ) no-repeat; FLOAT: left; MARGIN: 10px 1px; WIDTH: 15px; HEIGHT: 72px } .blk_18 .LeftBotton { BACKGROUND-POSITION: 0px 0px; MARGIN-LEFT: 5px } .blk_18 .RightBotton { BACKGROUND-POSITION: 0px -100px; MARGIN-LEFT: -1px } .blk_18 .LeftBotton:hover { BACKGROUND-POSITION: -20px 0px } .blk_18 .RightBotton:hover { BACKGROUND-POSITION: -20px -100px } .blk_18 .pl IMG { DISPLAY: block; MARGIN: 6px auto 1px; CURSOR: pointer; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none } .blk_18 .pl { BORDER-RIGHT: #f3f3f3 1px solid; BORDER-TOP: #f3f3f3 1px solid; FLOAT: left; BORDER-LEFT: #f3f3f3 1px solid; WIDTH: 114px; LINE-HEIGHT: 24px; BORDER-BOTTOM: #f3f3f3 1px solid; TEXT-ALIGN: center; TEXT-DECORATION: underline } .blk_18 A.pl:hover { BORDER-RIGHT: #ff9900 1px solid; BORDER-TOP: #ff9900 1px solid; BACKGROUND: #fff; BORDER-LEFT: #ff9900 1px solid; COLOR: #ff9900; BORDER-BOTTOM: #ff9900 1px solid } .commu_cont3 { MARGIN: 9px 7px 7px; LINE-HEIGHT: 150% } .commu_cont3 UL { WIDTH: 188px } — /style /head body !– picrotate_left start — DIV class=blk_18A onmouseup=ISL_StopUp_1() class=LeftBotton onmousedown=ISL_GoUp_1() onmouseout=ISL_StopUp_1() href=”javascript:void(0);” target=_self/A DIV class=pcont id=ISL_Cont_1 DIV class=ScrCont DIV id=List1_1!– piclist begin –A class=pl href=” ” target=_blankIMG height=72 alt=20-50元夏裝搶瘋 src=” ” width=96美女小凡最新夏裝/AA class=pl href=” ” target=_blankIMG height=72 alt=韓國人氣小耳環 src=” ” width=96韓國人氣小耳環/AA class=pl href=” ” target=_blankIMG height=72 alt=3萬6超值裝修88平 src=” ” width=963萬6超值裝修88平/AA class=pl href=” ” target=_blankIMG height=72 alt=牛乾巴敲開財富門 src=” ” width=96牛乾巴敲開財富門/AA class=pl href=” ” target=_blankIMG height=72 alt=4K至7K高性能本本 src=” ” width=964K至7K高性能本本/AA class=pl href=” ” target=_blankIMG height=72 alt=7萬裝修102平婚房 src=” ” width=967萬裝修102平婚房/AA class=pl href=” ” target=_blankIMG height=72 alt=最新小車節油為主 src=” ” width=96最新小車節油為主/AA class=pl href=” ” target=_blankIMG height=72 alt=”熱門項目 BT烤翅” src=” ” width=96熱門項目 BT烤翅/AA class=pl href=” ” target=_blankIMG height=72 alt=流行T恤+褲裝 src=” ” width=96要顯瘦就這麼穿！/A !– piclist end –/DIV DIV id=List2_1/DIV/DIV/DIVA onmouseup=ISL_StopDown_1() class=RightBotton onmousedown=ISL_GoDown_1() onmouseout=ISL_StopDown_1() href=”javascript:void(0);” target=_self/A/DIV SCRIPT type=text/javascript !– picrun_ini() //– /SCRIPT !– picrotate_left end — /body /html

js實現圖片旋轉效果

1、首先準備一個HTML文檔，文檔中準備好兩個圖片，接下來會對這兩個圖片進行旋轉。

2、然後對HTML中的內容定義一些樣式，如下圖所示，主要是標題以及ul的樣式。

3、接下來就給圖片所在的li定義寬高，如下圖所示。

4、然後給圖片設置過渡效果，過渡使用transition屬性，如下圖所示。

5、當鼠標懸停在圖片上時，通過rotate給其設置變形，如下圖所示，正數代表的是順時針，負數代表的是逆時針。

6、最後運行程序，會看到如下圖所示的效果，鼠標放在圖片上會順時針或者逆時針旋轉。

js 怎麼實現點擊一次圖片旋轉90度，再點擊再轉90度呢

現在我們以這個蘋果的圖片作為例子

我將演示代碼寫在這個頁面網頁鏈接，下面解釋其用法。

頁面結構如圖

javascript代碼如下

$(function() {

var r = 0;

$(‘img’).click(function() {

r += 90;

$(this).css(‘transform’, ‘rotate(‘ + r + ‘deg)’);

});

核心思路是控制圖片的這個css屬性：

transform: rotate(360deg);

其中360deg就是360度，點一次旋轉90度

JavaScript代碼實現圖片循環滾動效果

1.概述

循環滾動圖片，不僅可以增添Web頁面的動態效果，而且可以節省頁面空間，有效地保證在有限的頁面中顯示更多的圖片。

2.技術要點

主要應用setTimeout()方法實現圖片的循環滾動效果。setTimeout()方法的語法格式如下：

setTimeout（function,milliseconds,[arguments]）

參數說明：

function：要調用的JavaScript自定義函數名稱。

Milliseconds：設置超時時間（以毫秒為單位）。

功能：經過超時時間後，調用函數。此值可以用clearTimeout()函數清除。

3.具體實現

（1）在頁面的合適位置添加一個id屬性為demo的div標記，並在該標記中添加表格及要要滾動顯示的圖片。關鍵代碼如下：

div

id=”demo”

style=”

overflow:

hidden;

width:

455px;

height:

166px;”

table

border=”0″

cellspacing=”0″

cellpadding=”0″

valign=”top”

id=”marquePic1″

!–

要循環滾動的圖片

—

table

width=”455″

border=”0″

align=”center”

cellpadding=”0″

cellspacing=”0″

align=”center”

%for(int

i=1;i8;i++){%

img

src=”Images/%=i%.jpg”

width=”118″

height=”166″

border=”1″

/td

%}%

/tr

/table

/td

id=”marquePic2″

width=”1″/td

/tr

/table

/div

（2）編寫自定義的JavaScript函數move()，用於實現無間斷的圖片循環滾動效果。speed數值越大圖片滾動的越快，具體代碼如下：

script

language=”javascript”

var

speed=30

;

//設置間隔時間

marquePic2.innerHTML=marquePic1.innerHTML;

var

demo=document.getElementById(“demo”);

//獲取demo對象

function

Marquee(n){

//實現圖片循環滾動的方法

if(marquePic1.offsetWidth-demo.scrollLeft=0){

demo.scrollLeft=0;

}

else{

demo.scrollLeft=demo.scrollLeft+n;

}

var

MyMar=setInterval(“Marquee(5)”,speed);

demo.onmouseover=function()

{

//停止滾動

clearInterval(MyMar);

}

demo.onmouseout=function()

{

//繼續滾動

MyMar=setInterval(“Marquee(5)”,speed);

}

/script

以上所述是小編給大家介紹的JavaScript代碼實現圖片循環滾動效果的相關知識，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

js設置圖片隨機旋轉角度

代碼應該是：

imgcss[i].style.transform=”rotate(” + j + “)”;

首先 j是變量雙引號裡面套單引號還是字符串，不是變量

其次字符串拼接要寫加號

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/200024.html