成都百度快照优化|成都百度关键词排名优化|成都SEO【思为网络】 --【思为网络】成都专业网站优化公司,公司拥有专业搜索引擎优化团队,提供网站整站优化(网站结构优化、网站内容优化、网站外部优化)、百度排名首页优化、GOOGLE优化排名
成都百度关键词排名优化--成都百度快照首页排名优化
你的位置:首页 » 网页设计制作 » 正文

[推荐] 网页多张图片自动切换js代码-简洁好用

2010-12-23 0:0:0 | 作者:sw996 | 0个评论 | 人浏览

网页图片自动切换js代码 --网页JS图片切换代码

<script language =javascript >
var curIndex=0;
//时间间隔(单位毫秒),每秒钟显示一张,数组共有5张图片放在Photos文件夹下。图片路径可以是绝对路径或者相对路径
var timeInterval=1000; //时间1秒
var arr=new Array();
arr[0]="http://www.sw996.com/img/logo.gif";
arr[1]="photos/2.jpg";
arr[2]="photos/3.jpg";
arr[3]="photos/4.jpg";
arr[4]="photos/5.jpg";

setInterval(changeImg,timeInterval);
function changeImg()
{
    var obj=document.getElementById("obj");
    if (curIndex==arr.length-1)
    {
        curIndex=0;
    }
    else
    {
        curIndex+=1;
    }
    obj.src=arr[curIndex];
}
</script>

<img id=obj src="img/logo.gif" width=200 height=150 border=0>
可以自己配置,自己设置每张图片切换的时间间隔,自己设置每张图片的路径(绝对、相对路径都可以)虽然很简单,但是很实用。

-------------------------------------------------------------

第二种方法:

//修改图片的宽度、高度,注意要和下面的一样,修改显示位置
<style type="text/css">
#img1 {position:absolute; width:140px; height:105px; left:220px; top:125px; z-index:1; visibility:hidden;}
#img2 {position:absolute; width:140px; height:105px; left:220px; top:125px; z-index:2}
</style>

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var ie5=(document.getElementById && document.all);
var ns6=(document.getElementById && !document.all);

nPlus = 5   //the % of fading for each step
speed = 50 //速度

// You don't have to edit below this line
nOpac = 100
function FadeImg(){
    if(document.getElementById){
        document.getElementById('img1').style.visibility="visible";
        imgs = document.getElementById('img2');
opacity = nOpac+nPlus;
nOpac = opacity;
setTimeout('FadeImg()',speed);
    if(opacity>100 || opacity<0){
        nPlus=-nPlus;
    }
    if(ie5){
        imgs.style.filter="alpha(opacity=0)";
imgs.filters.alpha.opacity = opacity;
    }
    if(ns6){
        imgs.style.MozOpacity = 0 + '%';
imgs.style.MozOpacity = opacity + '%';
    }
}
}
onload=FadeImg;
// End -->
</script>
<div id="img1">
<img src="photos\1.jpg" border=0 width=140 height=105>
</div>
<div id="img2">
<img src="photos\2.jpg" border=0 width=140 height=105>
</div>

已有0位网友发表了一针见血的评论,你还等什么?

必填

选填

选填

记住我,下次回复时不用重新输入个人信息

必填,不填不让过哦,嘻嘻。

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

相关推荐