javascript实现幻灯片效果

最新推荐文章于 2023-12-04 16:01:51 发布

sx1989827

最新推荐文章于 2023-12-04 16:01:51 发布

阅读量1.3k

点赞数

分类专栏： ajax 文章标签： javascript function timer flash div

本文链接：https://blog.csdn.net/sx1989827/article/details/3743386

版权

ajax 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

网页上有许多图片切换的幻灯片效果,它们大多用flash实现,那javascript能不能实现他们呢,当然可以,我自己写了一个,和大家一同分享

废话少说,看代码

 
 sx.activex.imagefade={
    init:function(imga,fadeint,fadeoutt){
        var ti=new Array();
        for(var i=0;i<imga.length;i++){
            ti[i]=new Image();
            ti[i].src=imga[i]
            }
            var div=document.createElement("div");
            var img=document.createElement("img");
            img.src=ti[0].src;
            var span=document.createElement("span")
            span.style.backgroundColor="yellow";
            var a=[];
            for(var i=0;i<imga.length;i++){
                a[i]=document.createElement("a")
                a[i].style.backgroundColor="red";
                a[i].style.width="10px";
                a[i].style.margin="2px";
                a[i].href="javascript:void(0)";
                a[i].οnclick=function(r){
                    return function(){
                        var t=100;
                        var t1=0;
                    var h=window.setInterval(function(){
                        if(t>=0){
                            img.style.filter="alpha(opacity="+t+");";
                            t=t-2;}
                    else{
                            window.clearInterval(h);
                            img.src=ti[r].src;
                            var h1=window.setInterval(function(){
                        if(t1<=100){
                            img.style.filter="alpha(opacity="+t1+");";
                            t1=t1+2;}
                    else{
                            window.clearInterval(h1);
                            }
                    },fadeint);
                            }
                    },fadeoutt);
                    
                    }
                }(i);
                a[i].innerText=i+1;
                span.appendChild(a[i]);
            }
            
            div.style.position="absolute";
            div.style.height="200px";
            div.style.width="200px";
            div.appendChild(img);
            img.style.height="100%";
            img.style.width="100%";
            
            span.style.position="absolute";
            span.style.right="10px";
            span.style.bottom="10px";
            div.appendChild(span);
            return div;
    }
}
 

调用的html

<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<script src="kongjian.js"></script>
<script>
var a=sx.activex.imagefade.init(["1.jpg","1 (1).jpg"],10,10);
a.style.height="400px";
a.style.width="400px";
//a.all[1].style.backgroundColor="green";
document.body.appendChild(a);
</script>
</body>
</html>

上面的js函数的第一个参数是你要的图片的地址所组成的数组,第二个参数是图片淡出的timer,第三个参数是淡入的timer.

这段js的关键是a[i].onclick这段代码,注意这里套用了两个setintertval,并用了闭包,在赋值时要当心了.

有什么疑问的话还请多多交流啊

sx1989827

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript实现幻灯片效果

网页上有许多图片切换的幻灯片效果,它们大多用flash实现,那javascript能不能实现他们呢,当然可以,我自己写了一个,和大家一同分享废话少说,看代码sx.activex.imagefade={ init:function(imga,fadeint,fadeoutt){ var ti=new Array(); for(var i=
复制链接

扫一扫