js轮换代码（javascript简单轮换图）

今天给各位分享js轮换代码的知识，其中也会对javascript简单轮换图进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、js图片轮换代码怎么实现，跪求～
• 2、用js怎么写轮换图代码
• 3、JS实现背景渐变轮换（已有背景轮换代码，只要一个轮换效果就可以）

js图片轮换代码怎么实现，跪求～

其实很简单,方法也很多,不知道你想用什么方法实现.

先介绍两种比较简单的

注:图片大小之类的自己用CSS控制;

页面加入img id="imgId"/标签

然后引入javascript:

核心:

//给定图片路径数组

var imgs = ['1.jpg','2.jpg',...]

function switchoverCore(){

var img = document.getElementById("imgId");

img.src = imgs.shift(0);

imgs.push(img.src);

//如果用下面的第一种方法,请删除下行注释,第二种不用下行代码

//setTimeout("switchoverCore()",1000);

}

第一种方法

运用setTimeout();

setTimeout("switchoverCore();",1000);//这里的1000是1秒轮换一次,单位为ms(毫秒)

第二种方法

运用setInterval();

setInterval("switchoverCore()",1000);//1000意义解释同上

自己整理下就可以了...

用js怎么写轮换图代码

!DOCTYPE HTML

html

head

meta charset="utf-8"

title无标题文档/title

style

* {margin:0; padding:0;}

#div1 {width:712px; height:108px; margin:100px auto; position:relative; background:red; overflow:hidden;}

#div1 ul {position:absolute; left:0; top:0;}

#div1 ul li {float:left; width:178px; height:108px; list-style:none;}

/style

script

window.onload=function ()

{

var oDiv=document.getElementById('div1');

var oUl=oDiv.getElementsByTagName('ul')[0];

var aLi=oUl.getElementsByTagName('li');

oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;

oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';

setInterval(function (){

if(oUl.offsetLeft-oUl.offsetWidth/2)

{

oUl.style.left='0';

}

oUl.style.left=oUl.offsetLeft-2+'px';

}, 30);

};

/script

/head

body

div id="div1"

ul

liimg src="img2/1.jpg" //li

liimg src="img2/2.jpg" //li

liimg src="img2/3.jpg" //li

liimg src="img2/4.jpg" //li

/ul

/div

/body

/html

//js

function getStyle(obj, name)

{

if(obj.currentStyle)

{

return obj.currentStyle[name];

}

else

{

return getComputedStyle(obj, false)[name];

}

}

function startMove(obj, attr, iTarget)

{

clearInterval(obj.timer);

obj.timer=setInterval(function (){

var cur=0;

if(attr=='opacity')

{

cur=Math.round(parseFloat(getStyle(obj, attr))*100);

}

else

{

cur=parseInt(getStyle(obj, attr));

}

var speed=(iTarget-cur)/6;

speed=speed0?Math.ceil(speed):Math.floor(speed);

if(cur==iTarget)

{

clearInterval(obj.timer);

}

else

{

if(attr=='opacity')

{

obj.style.filter='alpha(opacity:'+(cur+speed)+')';

obj.style.opacity=(cur+speed)/100;

document.getElementById('txt1').value=obj.style.opacity;

}

else

{

obj.style[attr]=cur+speed+'px';

}

}

}, 30);

}

//css

body { background: #666; } ul { padding: 0; margin: 0; } li { list-style: none; } img { border: 0; }

.play { width: 400px; height: 430px; margin: 50px auto 0; background: #999; font: 12px Arial; }

.big_pic { width: 400px; height: 320px; overflow: hidden; border-bottom: 1px solid #ccc; background: #222; position: relative; }

.big_pic li { width: 400px; height: 320px; overflow: hidden; position: absolute; top: 0; left: 0; z-index: 0; background: url(images/loading.gif) no-repeat center center; }

.mark_left { width: 200px; height: 320px; position: absolute; left: 0; top: 0; background: red; filter: alpha(opacity:0); opacity: 0; z-index:3000; }

.mark_right { width: 200px; height: 320px; position: absolute; left: 200px; top: 0; background: green; filter: alpha(opacity:0); opacity: 0; z-index:3000; }

.big_pic .prev { width: 60px; height: 60px; background: url(images/btn.gif) no-repeat; position: absolute; top: 130px; left: 10px; z-index: 3001; filter:alpha(opacity:0); opacity:0; cursor: pointer; }

.big_pic .next { width: 60px; height: 60px; background: url(images/btn.gif) no-repeat 0 -60px; position: absolute; top: 130px; right: 10px; z-index: 3001; filter:alpha(opacity:0); opacity:0; cursor: pointer; }

.big_pic .text { position: absolute; left: 10px; top: 302px; z-index: 3000; color: #ccc; }

.big_pic .length { position: absolute; right: 10px; bottom: 4px; z-index: 3000; color: #ccc; }

.big_pic .bg { width: 400px; height: 25px; background: #000; filter: alpha(opacity=60); opacity: 0.6; position: absolute; z-index: 2999; bottom: 0; left: 0; }

.small_pic { width: 380px; height: 94px; position: relative; top: 7px; left: 10px; overflow: hidden; }

.small_pic ul { height: 94px; position: absolute; top: 0; left: 0; }

.small_pic li { width: 120px; height: 94px; float: left; padding-right: 10px; background: url(images/loading.gif) no-repeat center center; cursor: pointer; filter: alpha(opacity=60); opacity: 0.6; }

.small_pic img { width: 120px; height: 94px; }

JS实现背景渐变轮换（已有背景轮换代码，只要一个轮换效果就可以）

-Enter content=RevealTrans(Duration=4,Transition=8)

Transition=8 可以把数字改为以下参数实现不用的效果

盒状收缩 RevealTrans 0 盒状展开 RevealTrans 1 圆形收缩 RevealTrans 2 圆形展开 RevealTrans 3 向上擦除 RevealTrans 4 向下擦除

RevealTrans 5 向左擦除 RevealTrans 6 向右擦除 RevealTrans 7 垂直百页窗 RevealTrans 8 水平百页窗 RevealTrans 9 横向棋盘式 RevealTrans

10 纵向棋盘式 RevealTrans 11 溶解 RevealTrans 12 左右向中部收缩 RevealTrans 13 中部向左右展开 RevealTrans 14 上下向中部收缩

RevealTrans 15 中部向上下展开 RevealTrans 16 阶梯状向左下展开 RevealTrans 17 阶梯状向左上展开 RevealTrans 18 阶梯状向右下展开

RevealTrans 19 阶梯状向右上展开 RevealTrans 20 随机水平线 RevealTrans 21 随机垂直线 RevealTrans 22 随机 RevealTrans 23

不需要js （其实是我用js做不出来）

把以代码看懂后

加在 held部分

准备几个网页每个放一张图片

做一个线性的连接

关于js轮换代码和javascript简单轮换图的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。