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/n/200024.html