zoukankan      html  css  js  c++  java
  • javascript 生成页面轮播元素

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>生成轮播图片</title>
    </head>
    <body>
        <div style="287px; height:248px; border:solid 1px #cecece;background:#F3F3F3; padding:6px; ">
    <script language="javascript" type="text/javascript">
        var widths = 600;   //宽              
        var heights = 600;   //高              
        var counts = 3; //显示的数量
        img1 = new Image(); img1.src = '../images/slide-01.jpg'; //图片地址
        img2 = new Image(); img2.src = '../images/slide-02.jpg';
        img3 = new Image(); img3.src = '../images/slide-03.jpg';    
        url1 = new Image(); url1.src = 'http://URL?action-viewnews-itemid-2439'; //图片链接的URL
        url2 = new Image(); url2.src = 'http://URL/?action-viewnews-itemid-2386-page-1';
        url3 = new Image(); url3.src = 'http://URL/?action-viewnews-itemid-2384-page-4';
     
        var nn = 1;
        var key = 0;
        function change_img() {
            if (key == 0) { key = 1; }
            else if (document.all)
            { document.getElementById("pic").filters[0].Apply(); document.getElementById("pic").filters[0].Play(duration = 2); }
            eval('document.getElementById("pic").src=img' + nn + '.src');
            eval('document.getElementById("url").href=url' + nn + '.src');
            for (var i = 1; i <= counts; i++) { document.getElementById("xxjdjj" + i).className = 'axx'; }
            document.getElementById("xxjdjj" + nn).className = 'bxx';
            nn++; if (nn > counts) { nn = 1; }
            tt = setTimeout('change_img()', 2000);
        }
        function changeimg(n) { nn = n; window.clearInterval(tt); change_img(); }

        document.write('<style>');
        document.write('.axx{padding:1px 7px;border-left:#ffffff 1px solid;font-weight: bold;}');
        document.write('a.axx:link,a.axx:visited{text-decoration:none;color:#fff;line-height:14px;font:11px sans-serif;font-weight: bold;}');
        document.write('a.axx:active,a.axx:hover{text-decoration:none;color:#fff;line-height:14px;font:11px sans-serif;font-weight: bold;}');
        document.write('.bxx{padding:1px 7px;border-left:#ffffff 1px solid;font-weight: bold;}');
        document.write('a.bxx:link,a.bxx:visited{text-decoration:none;color:#fff;line-height:14px;font:11px sans-serif;font-weight: bold;}');
        document.write('a.bxx:active,a.bxx:hover{text-decoration:none;color:#fff;line-height:14px;font:11px sans-serif;background-color:#ff0000;font-weight: bold;}');
        document.write('</style>');
        document.write('<div style="' + widths + 'px;height:' + heights + 'px;overflow:hidden;text-overflow:clip;">');
        document.write('<div><a id="url" target="_blank"><img id="pic" style="border:0px;filter:progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4, motion=forward)" width=' + widths + ' height=' + heights + ' /></a></div>');
        document.write('<div style="filter:alpha(style=1,opacity=10,finishOpacity=80);background: #000000;100%-2px;text-align:right;top:-14px;position:relative;margin:1px;height:20px;padding:0px;margin:0px;border:0px;">');
        for (var i = 1; i < counts + 1; i++) { document.write('<a href="javascript:changeimg(' + i + ');" id="xxjdjj' + i + '" class="axx" target="_self">' + i + '</a>'); }
        document.write('</div></div>');

        change_img();   
    </script>
    </div>


    </body>
    </html>

    原文转载:http://jilo88.iteye.com/blog/702619

  • 相关阅读:
    C++里面关于虚函数的一些注意点
    HDOJ 2736 Surprising Strings
    hdu
    hdu 4404 Worms(多边形与圆的交)
    HTC one/M7电信802d 毒蛇ViperOne2.1.0/高级毒蛇工具/完美root,精简/更多自定义,稳定,流畅ROM
    Replace
    Centos环境下部署游戏服务器-权限
    jdk1.6与1.7垃圾回收
    java--基于socket的网络传输开发
    番外:android模拟器连不上网
  • 原文地址:https://www.cnblogs.com/lizihong/p/4015790.html
Copyright © 2011-2022 走看看