超简单js 图片轮换效果

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.111cn.net/ 1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>超简单js 图片轮换效果</title>

<style>
body{margin:0; padding:0px; background:url(../images/head.gif) 50% 0 no-repeat #fff; color:#474747; font:12px/18px "trebuchet ms", arial, helvetica, sans-serif;}
img{border:0}

input.smallinput{border:1 solid #0e6ea5;font-size:9pt;font-family:"arial", "helvetica", "sans-serif";height:18px;font-style:normal;font-variant:normal;font-weight:normal;cine-height:normal;}
.xl_copyright{height:25px;margin:0 auto;background:#888880;}

a:link    {color: #0860a8; text-decoration: none;}
a:visited {color: #0860a8;text-decoration: none;}
a:hover   { color: #474747; text-decoration: none;}

.a:link    {color: #0860a8; text-decoration: none; font-weight:bold;}
.a:visited {color: #0860a8;text-decoration: none; font-weight:bold;}
.a:hover   { color: #474747; text-decoration: none; font-weight:bold;}

.b:link    {color: #333333; text-decoration: none;}
.b:visited {color: #333333;text-decoration: none;}
.b:hover   {color: #fff; text-decoration: none; background-color:#0860a8;}

.c:link    {color: #000; text-decoration: none;}
.c:visited {color: #000;text-decoration: none;}
.c:hover   { color: #0860a8; text-decoration: none; }

.d:link    {color: #626262; text-decoration: none;font-weight:bold;}
.d:visited {color: #626262;text-decoration: none;font-weight:bold;}
.d:hover   { color: #0860a8; text-decoration: none; font-weight:bold;}

.e:link    {color: #002685; }
.e:visited {color: #181818;}
.e:hover   { color: #181818;}

.f:link    {color: #333; text-decoration: underline;}
.f:visited {color: #333;text-decoration: underline;}
.f:hover   { color: #0860a8;text-decoration: underline;}

.g:link    {color: #f26522; font-weight:bold;}
.g:visited {color: #f26522;font-weight:bold;}
.g:hover   { color: #181818;font-weight:bold;}

.h:link    {color: #676767;}
.h:visited {color: #676767;}
.h:hover   { color: #f26522;}

.i:link    {color: #474747; text-decoration: none; font-weight:bold;}
.i:visited {color: #474747;text-decoration: none; font-weight:bold;}
.i:hover   { color: #0860a8; text-decoration: none; font-weight:bold;}

.j:link    {color: #333; text-decoration: none;}
.j:visited {color: #333;text-decoration: none;}
.j:hover   { color: #0860a8; text-decoration: none;}

.bg{ background-image:url(../images/map.gif); background-repeat:no-repeat; background-position:top right;}

.title_b:link    {color: #000; font-weight:bold; text-decoration: none;}
.title_b:visited {color: #000;font-weight:bold; text-decoration: none;}
.title_b:hover   { color: #0860a8; font-weight:bold; text-decoration: none; }

.font_01{ color:#0860a8; font-weight:bold;}
.font_02{ color:#000; font-weight:bold;}
.font_03{ line-height:22px;}
.font_04{ font:24px arial, helvetica, sans-serif ; color:#ffffff;}
.font_05{ font-family:"arial";color:#fff; font-weight:bold; font-size:14px;}
.font_06{ font:14px arial, helvetica, sans-serif ; color:#ffffff;font-weight:bold;}
.font_06{ font:14px arial, helvetica, sans-serif ; color:#f26522;font-weight:bold;}
.font_08{ color:#333; font-weight:bold; font-family:"arial";}
.font_09{ color:#0860a8; font-weight:bold; font-size:14px}

.foot:link    {color: #474747; text-decoration: none;}
.foot:visited {color: #474747;text-decoration: none;}
.foot:hover   { color: #0860a8; text-decoration: none;}

.recommend{height:90px;}
</style>

<script>
/**************************************************  
名称: 图片轮播类  
备注:  
        适用于一个页面只有一个图片轮播的地方.  
***************************************************/  
var pimgplayer = {  
        _timer : null,  
        _items : [],  
        _container : null,  
        _index : 0,  
        _imgs : [],  
        intervaltime : 5000,        //轮播间隔时间  
        init : function( objid, w, h, time ){  
                this.intervaltime = time || this.intervaltime;  
                this._container = document.getelementbyid( objid );  
                this._container.style.display = "block";  
                this._container.style.width = w + "px";  
                this._container.style.height = h + "px";  
                this._container.style.position = "relative";  
                this._container.style.overflow = "hidden";  
                //this._container.style.border = "1px solid #fff";  
                var linkstyle = "display: block; text-decoration: none;";  
                if( document.all ){  
                        linkstyle += "filter:";  
                        linkstyle += "progid:dximagetransform.microsoft.barn(duration=0.5, motion='out', orientation='vertical') ";  
                        linkstyle += "progid:dximagetransform.microsoft.barn ( duration=0.5,motion='out',orientation='horizontal') ";  
                        linkstyle += "progid:dximagetransform.microsoft.blinds ( duration=0.5,bands=10,direction='down' )";  
                        linkstyle += "progid:dximagetransform.microsoft.checkerboard()";  
                        linkstyle += "progid:dximagetransform.microsoft.fade(duration=0.5,overlap=0)";  
                        linkstyle += "progid:dximagetransform.microsoft.gradientwipe ( duration=1,gradientsize=1.0,motion='reverse' )";  
                        linkstyle += "progid:dximagetransform.microsoft.inset ()";  
                        linkstyle += "progid:dximagetransform.microsoft.iris ( duration=1,irisstyle=plus,motion=out )";  
                        linkstyle += "progid:dximagetransform.microsoft.iris ( duration=1,irisstyle=plus,motion=in )";  
                        linkstyle += "progid:dximagetransform.microsoft.iris ( duration=1,irisstyle=diamond,motion=in )";  
                        linkstyle += "progid:dximagetransform.microsoft.iris ( duration=1,irisstyle=square,motion=in )";  
                        linkstyle += "progid:dximagetransform.microsoft.iris ( duration=0.5,irisstyle=star,motion=in )";  
                        linkstyle += "progid:dximagetransform.microsoft.radialwipe ( duration=0.5,wipestyle=clock )";  
                        linkstyle += "progid:dximagetransform.microsoft.radialwipe ( duration=0.5,wipestyle=wedge )";  
                        linkstyle += "progid:dximagetransform.microsoft.randombars ( duration=0.5,orientation=horizontal )";  
                        linkstyle += "progid:dximagetransform.microsoft.randombars ( duration=0.5,orientation=vertical )";  
                        linkstyle += "progid:dximagetransform.microsoft.randomdissolve ()";  
                        linkstyle += "progid:dximagetransform.microsoft.spiral ( duration=0.5,gridsizex=16,gridsizey=16 )";  
                        linkstyle += "progid:dximagetransform.microsoft.stretch ( duration=0.5,stretchstyle=push )";  
                        linkstyle += "progid:dximagetransform.microsoft.strips教程 ( duration=0.5,motion=rightdown )";  
                        linkstyle += "progid:dximagetransform.microsoft.wheel ( duration=0.5,spokes=8 )";  
                        linkstyle += "progid:dximagetransform.microsoft.zigzag ( duration=0.5,gridsizex=4,gridsizey=40 ); width: 100%; height: 100%";  
                }  
                //  
                var ulstyle = "margin:0;width:"+w+"px;position:absolute;z-index:999;right:5px;filter:alpha(opacity=50,finishopacity=50, style=1);overflow: hidden;bottom:-1px;height:16px; border-right:1px solid #fff;";  
                //  
                var listyle = "margin:0;list-style-type: none; margin:0;padding:0; float:right;";  
                //  
                var basespacstyle = "clear:both; display:block; width:23px;line-height:18px; font-size:12px; font-family:'宋体';opacity: 0.6;";  
                basespacstyle += "border:1px solid #fff;border-right:0;border-bottom:0;";  
                basespacstyle += "color:#fff;text-align:center; cursor:pointer; ";  
                //  
                var ulhtml = "";  
                for(var i = this._items.length -1; i >= 0; i--){  
                        var spanstyle = "";  
                        if( i==this._index ){  
                                spanstyle = basespacstyle + "background:#ff0000;";  
                        } else {                                  
                                spanstyle = basespacstyle + "background:#000;";  
                        }  
                        ulhtml += "<li style=""+listyle+"">";  
                        ulhtml += "<span onmouseo教程ver="pimgplayer.mouseover(this);" onmouseout="pimgplayer.mouseout(this);" style=""+spanstyle+"" onclick="pimgplayer.play("+i+");return false;" herf="网页特效:;" title="" + this._items[i].title + "">" + (i+1) + "</span>";  
                        ulhtml += "</li>";  
                }  
                //  
                var html = "<a href=""+this._items[this._index].link+"" title=""+this._items[this._index].title+"" target="_blank" style=""+linkstyle+""></a><ul style=""+ulstyle+"">"+ulhtml+"</ul>";  
                this._container.innerhtml = html;  
                var link = this._container.getelementsbytagname("a")[0];          
                link.style.width = w + "px";  
                link.style.height = h + "px";  
                link.style.background = 'url(' + this._items[0].img + ') no-repeat center center';  
                //  
                this._timer = setinterval( "pimgplayer.play()", this.intervaltime );  
        },  
        additem : function( _title, _link, _imgurl ){  
                this._items.push ( {title:_title, link:_link, img:_imgurl } );  
                var img = new image();  
                img.src = _imgurl;  
                this._imgs.push( img );  
        },  
        play : function( index ){  
                if( index!=null ){  
                        this._index = index;  
                        clearinterval( this._timer );  
                        this._timer = setinterval( "pimgplayer.play()", this.intervaltime );  
                } else {  
                        this._index = this._index<this._items.length-1 ? this._index+1 : 0;  
                }  
                var link = this._container.getelementsbytagname("a")[0];          
                if(link.filters){  
                        var ren = math.floor(math.random()*(link.filters.length));  
                        link.filters[ren].apply();  
                        link.filters[ren].play();  
                }  
                link.href = this._items[this._index].link;  
                link.title = this._items[this._index].title;  
                link.style.background = 'url(' + this._items[this._index].img + ') no-repeat center center';  
                //  
                var listyle = "margin:0;list-style-type: none; margin:0;padding:0; float:right;";  
                var basespacstyle = "clear:both; display:block; width:23px;line-height:18px; font-size:12px; font-family:'宋体'; opacity: 0.6;";  
                basespacstyle += "border:1px solid #fff;border-right:0;border-bottom:0;";  
                basespacstyle += "color:#fff;text-align:center; cursor:pointer; ";  
                var ulhtml = "";  
                for(var i = this._items.length -1; i >= 0; i--){  
                        var spanstyle = "";  
                        if( i==this._index ){  
                                spanstyle = basespacstyle + "background:#ff0000;";  
                        } else {                                  
                                spanstyle = basespacstyle + "background:#000;";  
                        }  
                        ulhtml += "<li style=""+listyle+"">";  
                        ulhtml += "<span onmouseover="pimgplayer.mouseover(this);" onmouseout="pimgplayer.mouseout(this);" style=""+spanstyle+"" onclick="pimgplayer.play("+i+");return false;" herf="javascript:;" title="" + this._items[i].title + "">" + (i+1) + "</span>";  
                        ulhtml += "</li>";  
                }  
                this._container.getelementsbytagname("ul")[0].innerhtml = ulhtml;          
        },  
        mouseover : function(obj){  
                var i = parseint( obj.innerhtml );  
                if( this._index!=i-1){  
                        obj.style.color = "#ff0000";  
                }  
        },  
        mouseout : function(obj){  
                obj.style.color = "#fff";  
        }  
}  
</script>

</head>

<body>
<div class="pic_show">
            <div id="imgadplayer"></div>
  <script>
    pimgplayer.additem( "", "http://down.111cn.net/parallel-studio/index.html", "images/12.jpg");    
    pimgplayer.additem( "", "http://down.111cn.net/is_2010/is-floating.html", "images/08.jpg");
    pimgplayer.additem( "", "http://down.111cn.net/s_register.asp?plan_id=24", "images/10.jpg");
    pimgplayer.additem( "", "http://down.111cn.net/is-training/installshield-training-tc.html", "images/05.jpg");
    pimgplayer.additem( "", "http://down.111cn.net/", "images/01.jpg");
      pimgplayer.init( "imgadplayer", 732, 220 );  
 </script>
        </div>
</body>
</html>

时间： 2024-10-23 06:59:23

超简单js 图片轮换效果的相关文章

封装了一个js图片轮换效果的函数_javascript技巧

其中如果有问题,有更好的意见或者建议都可在最后留言,都将对您感激不尽. 具体的代码如下: 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" > <title>图片轮换效果</title> <style type="t

js图片轮换效果

提示:您可以先修改部分代码再运行 <HTML><HEAD><TITLE>变化</TITLE> <META http-equiv=Content-Type content="text/html; charset=gb2312"> <SCRIPT language=Javascript>    var bannerAD=new Array();    var bannerADlink=new Array();    v

js图片放大效果-js图片轮换效果

提示:您可以先修改部分代码再运行 美女小凡最新夏装éŸå›½äººæ°”小耳环3万6超值装ä¿88平牛干巴敲开财富门4K至7K高性能本本7万装ä¿102å¹³åšæˆ¿æœ€æ–°å°è½¦èŠ‚æ²¹ä¸ºä¸»çƒ­é—¨é¡¹ç› BT烤翅要显瘦就这么ç¿ï¼ 提示:您可以先修改部分代码再运行

JS实现超简单的鼠标拖动效果_javascript技巧

本文实例讲述了JS实现超简单的鼠标拖动效果.分享给大家供大家参考,具体如下: 这里使用尽可能短的JavaScript代码写一个JS拖动,函数本身287个字符...如果不是考虑兼容性和变量封装,还可以更短点. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-s-drug-demo/ 具体代码如下: <title>尽可能短的写一个JS拖动</title> <body> <div id="demo&quo

JQuery分屏指示器图片轮换效果实例

  本文实例讲述了JQuery分屏指示器图片轮换效果实现方法.分享给大家供大家参考.具体分析如下: 在Web App大行其道的今天,分屏指示器用得非常广泛,从Android.到腾讯的Web OS等等.分屏指示器给人很好的用户体验,下面就实现一个分屏指示器,用于实现图片的简单轮换效果,仅抛砖引玉- 代码如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

用javascript实现的仿Flash广告图片轮换效果_javascript技巧

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

jquery简单实现图片切换效果的方法_jquery

本文实例讲述了jquery简单实现图片切换效果的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

JQuery分屏指示器图片轮换效果实例_jquery

本文实例讲述了JQuery分屏指示器图片轮换效果实现方法.分享给大家供大家参考.具体分析如下: 在Web App大行其道的今天,分屏指示器用得非常广泛,从Android.到腾讯的Web OS等等.分屏指示器给人很好的用户体验,下面就实现一个分屏指示器,用于实现图片的简单轮换效果,仅抛砖引玉- 代码如下: <script type="text/javascript"> var curr = 0, next = 0, count = 0; $(document).ready(f

大气flash 图片轮换效果代码

本文章提供一款大气flash 图片轮换效果,本文章只给出部份代码,文章下面提供了完整的源码下载与效果预览,如果你喜欢可以下载去用,很适合于企业站,商城等网幻灯片. <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http