<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>生成轮播图片</title>
</head>
<body>
    <div style="width: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="width:' + 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;width: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

javascript 生成页面轮播元素的更多相关文章

  1. 帮助快速生成页面固定显示元素的jQuery插件 - sticky-kit

    来源:GBin1.com 如果需要在用户滚动页面的时候,保持特定元素始终可见的话,今天这里我们介绍的Sticky-Kit是一个不错的选择. 它是一个开源的jQuery插件,可以帮助大家快速针对页面元素 ...

  2. javascript原生js轮播图

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. JavaScript实现动态轮播图效果

    功能描述: 1.鼠标经过 左右侧箭头显示,鼠标离开 箭头隐藏 2.动态添加底部小圆圈并绑定单击事件,并且让小圆圈的点击事件和左右箭头点击事件同步 3.拷贝第一张图片添加到ul最后可以实现动态添加图片 ...

  4. JavaScript实现图片轮播组件

    效果: 自动循环播放图片,下方有按钮可以切换到对应图片. 添加一个动画来实现图片切换. 鼠标停在图片上时,轮播停止,出现左右两个箭头,点击可以切换图片. 鼠标移开图片区域时,从当前位置继续轮播. 提供 ...

  5. swiper轮播问题之一：轮播图内容为动态数据生成时轮播图无法自动轮播

    本人在用H5做移动端项目中使用Swiper遇到的两个问题,因此加深了对Swiper的掌握,分享出来对刚开始接触Swiper的童鞋们或多或少会有帮助.        首先,new Swiper的初始化最 ...

  6. 用JavaScript制作banner轮播图

    JavaScript_banner轮播图 让我们一起来学习一下用js怎么实现banner轮播图呢? 直接看代码: <!DOCTYPE html> <html> <head ...

  7. JavaScript实现简单轮播图动画

    运行效果: 源代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset=&quo ...

  8. html+css+javascript实现简易轮播图片

    html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <lin ...

  9. 用html +js+css 实现页面轮播图效果

    html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...

随机推荐

  1. BZOJ 2440: [中山市选2011]完全平方数( 二分答案 + 容斥原理 + 莫比乌斯函数 )

    先二分答案m,<=m的有m-∑(m/pi*pi)+∑(m/pi*pi*pj*pj)-……个符合题意的(容斥原理), 容斥系数就是莫比乌斯函数μ(预处理)... ----------------- ...

  2. PHP PDO select语句结果行数计算

    PDO有一个函数PDOStatement::rowCount返回上一个SQL语句影响的行数. rowCount函数对于DELETE, INSERT, 或者UPDATE语句的结果是正确的,但对于sele ...

  3. codeforces 620F. Xors on Segments

    题目链接 定义一种操作f(u, v) = u^u+1^.......^v. (u<=v), 给n个数, q个询问, 每个询问给出一个区间[l, r], 求这个区间里的f(a[i], a[j]) ...

  4. codeforces 609E. Minimum spanning tree for each edge 树链剖分

    题目链接 给一个n个节点m条边的树, 每条边有权值, 输出m个数, 每个数代表包含这条边的最小生成树的值. 先将最小生成树求出来, 把树边都标记. 然后对标记的边的两个端点, 我们add(u, v), ...

  5. IO调度算法研究1

    linux kernel 2.6之后提供了四种IO调度算法,每种调度算法都有其不同的特点和应用场景,系统使用者可以通过系统提供的接口,选择使用哪种IO调度算法,以及调整IO调度算法的参数,以达到最优的 ...

  6. 在TreeWidget中增加右键菜单功能 以及TreeWidget的基本用法

    TreeWidget 与 TreeView 中实现右键菜单稍有不同, TreeView 中是靠信号与槽 connect(ui->treeView,SIGNAL(customContextMenu ...

  7. (C#)Windows Shell 编程系列2 - 解释，从“桌面”开始展开

    原文 (C#)Windows Shell 编程系列2 - 解释,从“桌面”开始展开 (本系列文章由柠檬的(lc_mtt)原创,转载请注明出处,谢谢-) 接上一篇:(C#)Windows Shell 编 ...

  8. hdoj 1824 Let's go home(2-SAT)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1824 思路分析:该问题为2-SAT问题:需要注意逻辑推理的等价性: (1)题目第一个条件:每一个队或者 ...

  9. Cocos2d-x init() 和 onEnter() 区别

    在Cocos2d-x中经常碰到 init() 和 onEnter() init()和onEnter()这两个方法都是CCNode的方法. 1.二者的执行顺序是:先init() 后onEnter(). ...

  10. iostream.h 和stdio.h区别

    stdio.h是C的标准I/O库,是以函数的方式向buffer写入或读取字符.输入输出是这样的printf(...);,scanf(...); iostream是C++的标准I/O库,引入了输入/输出 ...