zoukankan      html  css  js  c++  java
  • javascript焦点图

    效果图:

    js代码:

    View Code
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="倒计时.WebForm2"%>

    <!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 runat="server">
    <title></title>
    </head>
    <body>
    <form id="form1" runat="server">
    <div>
    <!--新闻幻灯片的容器-->
    <div id="newsshow" style="300px;">
    <!--新闻幻灯片要显示的图片超链接信息-->
    <a id="hp" href="#"><img border=0 style="300px; height:200px;" id="hpimg" src=""/></a>
    <!--新闻幻灯片的下面的索引号-->
    <div id="newsindex" style="text-align:right;"></div>
    <!--新闻幻灯片下的新闻文本-->
    <div id="newstext" style="text-align:center;"></div>
    </div>
    </div>

    </form>
    </body>
    </html>

    <script type="text/javascript">
    var hyperlink
    = document.getElementById("hp"); //超链接对象
    alert(hyperlink);
    var hyperimage
    = document.getElementById("hpimg"); //图片对象
    var newsindex = document.getElementById("newsindex"); //新闻索引号的容器对象
    var newstext = document.getElementById("newstext"); //显示新闻内容的对象
    var xmldoc =new ActiveXObject("Microsoft.XMLDOM");
    xmldoc.async
    =false;
    xmldoc.load(
    "News.xml");
    var root
    = xmldoc.documentElement;
    //XML文件中的新闻条数
    var newscount = root.childNodes.length;
    //setTime所返回的对象,将来在鼠标点击的时候停止幻灯交替。
    var timeout;
    if (newscount >0) {
    timeout
    = window.setTimeout("slideshow(0)", 0);
    }
    //幻灯片效果,接收指定的新闻的索引号
    function slideshow(nodeindex) {
    //根据新闻的索引号,在XML文件中找相关的元素
    var node = root.childNodes[nodeindex];
    //为起链接对象设置href
    hyperlink.href = node.attributes[2].text;
    //为图片设置对象的图片
    hyperimage.src = node.attributes[1].text;
    //设置新闻的标题
    newstext.innerHTML = node.attributes[0].text;
    //清空新闻索引号div中的内容
    newsindex.innerHTML ="";
    //循环加载新闻索引号
    for (var i =0; i < newscount; i++) {
    //创建一个span,并设置其内容为索引号
    var sp = document.createElement("span");
    //设置当前索引号的格式
    if (nodeindex == i) {
    sp.style.backgroundColor
    ="red";
    sp.style.color
    ="yellow";
    sp.style.fontWeight
    ="bold";
    }
    else {
    //设置非当前索引号的格式
    sp.style.backgroundColor ="pink";
    sp.style.color
    ="blue";
    }
    //设置索引号span内的数字
    sp.innerHTML ="&nbsp;"+ (i +1) +"&nbsp;";
    sp.style.cursor
    ="hand";

    sp.id
    = i;
    //当点击索引号时执行的事件,显示相应的幻灯信息
    sp.onclick = function () {
    slideshow(
    this.id);
    window.clearTimeout(timeout);
    };
    //添加索引号span
    newsindex.appendChild(sp);
    //添加索引号之间的间隔
    var split = document.createElement("span");
    split.innerHTML
    ="&nbsp;";
    newsindex.appendChild(split);
    }
    //如果循环至最后一张新闻图片,则回到第一张新闻图片重新轮转,否则从显示下一张新闻图片
    if (nodeindex < newscount -1) {
    timeout
    = window.setTimeout("slideshow("+ (++nodeindex) +")", 3000);
    }
    else {
    timeout
    = window.setTimeout("slideshow(0)", 3000);
    }
    }
    </script>

    News.Xml

    <?xml version="1.0" encoding="utf-8" ?>
    <newslist>
    <news text="欧锦赛:西班牙1:0击败德国44年后再成欧洲王者" image="images/news1.jpg" url="http://www.baidu.com"></news>
    <news text="陕西“周老虎”以“行政疏忽”结案" image="images/news2.jpg" url="http://www.hao123.com"></news>
    <news text="赖斯赞扬中国地震救援和重建工作" image="images/news3.jpg" url="http://www.cnblogs.com"></news>
    </newslist>
  • 相关阅读:
    FineAdmin.Mvc 使用ok-admin+ASP.NET MVC搭建的通用权限后台管理系统
    ASP.NET MVC Liu_Cabbage 个人博客
    ASP.NET MVC 通用角色权限管理系统
    js/jquery 判断节点是否存在
    jquery myscroll文字上下无缝滚动插件 简单使用
    使用DATEADD() DATEDIFF() 函数获取时间查询条件
    input 设置 display:none后 jquery无法给input赋值
    ASP.NET MVC QQ互联接入
    修改HTTPS加密协议TLS1.0为TLS1.2
    IIS设置网站为HTTPS并且将HTTP重定向到HTTPS
  • 原文地址:https://www.cnblogs.com/happygx/p/2044294.html
Copyright © 2011-2022 走看看