javascript 生成页面轮播元素

<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(); }

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

</body>
</html>

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

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

帮助快速生成页面固定显示元素的jQuery插件 - sticky-kit
来源:GBin1.com 如果需要在用户滚动页面的时候,保持特定元素始终可见的话,今天这里我们介绍的Sticky-Kit是一个不错的选择. 它是一个开源的jQuery插件,可以帮助大家快速针对页面元素 ...
javascript原生js轮播图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
JavaScript实现动态轮播图效果
功能描述: 1.鼠标经过左右侧箭头显示,鼠标离开箭头隐藏 2.动态添加底部小圆圈并绑定单击事件,并且让小圆圈的点击事件和左右箭头点击事件同步 3.拷贝第一张图片添加到ul最后可以实现动态添加图片 ...
JavaScript实现图片轮播组件
效果: 自动循环播放图片,下方有按钮可以切换到对应图片. 添加一个动画来实现图片切换. 鼠标停在图片上时,轮播停止,出现左右两个箭头,点击可以切换图片. 鼠标移开图片区域时,从当前位置继续轮播. 提供 ...
swiper轮播问题之一：轮播图内容为动态数据生成时轮播图无法自动轮播
本人在用H5做移动端项目中使用Swiper遇到的两个问题,因此加深了对Swiper的掌握,分享出来对刚开始接触Swiper的童鞋们或多或少会有帮助. 首先,new Swiper的初始化最 ...
用JavaScript制作banner轮播图
JavaScript_banner轮播图让我们一起来学习一下用js怎么实现banner轮播图呢? 直接看代码: <!DOCTYPE html> <html> <head ...
JavaScript实现简单轮播图动画
运行效果: 源代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset=&quo ...
html+css+javascript实现简易轮播图片
html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <lin ...
用html +js+css 实现页面轮播图效果
html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...

随机推荐

Android应用开发基础篇（8）-----SurfaceView
链接地址:http://www.cnblogs.com/lknlfy/archive/2012/02/25/2368069.html 一.概述 SurfaceView也是一个用来画图的部件,不过由于它 ...
java 多个文件打包zip
/** * 多个文件打包成zip */ public class ZipDemo { private static void create() throws Exception{ String pat ...
Linux C 实现Ping功能的程序.
ping命令是用来查看网络上另一个主机系统的网络连接是否正常的一个工具.ping命令的工作原理是:向网络上的另一个主机系统发送ICMP报文,如果指定系统得到了报文,它将把报文一模一样地传回给发送者,这 ...
System.Reflection.Emit学习
C#反射发出System.Reflection.Emit学习分享: 1 一.System.Reflection.Emit概述 Emit,可以称为发出或者产生.与Emit相关的类基本都存在于Syste ...
Android studio如何使用SVN进行版本控制？
通过这两天对Android Studio的研究,终于搞通了Android Studio的基本操作及与SVN的相关关联操作(这样才能在公司的开发工作中使用):Google年底将会停止ADT插件的更新和支 ...
android中使用setVideoURI()播放视频
最近在做一个demo,要求播放视频,记录一下.使用的是VideoView控件,如果播放网络视频的话,视频应该是渐进流式的,格式嘛,大家应该都知道,一般是H.263或者H.264格式的扩展名为3gp或者 ...
C# Windows Sockets (Winsock) 接口 (转)
在.Net中,System.Net.Sockets 命名空间为需要严密控制网络访问的开发人员提供了 Windows Sockets (Winsock) 接口的托管实现.System.Net 命名空间中 ...
带你轻松玩转Git--图解三区结构
在上篇文章的结尾我们提到了Git 的三区结构,在版本控制体系中有这样两种体系结构,一种是两区结构一种是三区结构.接下来我们通过对Git三区的结构学习来帮助我们更好的去理解并运用Git. 两区结构是其他 ...
sass基本语法
sass是一种基于ruby语言开发的CSS预处理器.它可以使用变量,嵌套,混入,继承,运算,函数等编程语言具有的特性进行CSS的开发,使得CSS的开发变得简单粗暴清晰可维护. sass有两种后缀文件格 ...
使用AJAX日历控件，显示某些日期（CalendarExtender）
1. The HTML Markup <div> <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1&q ...

javascript 生成页面轮播元素

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

随机推荐

热门专题