JavaScript案例精解（三）

最新推荐文章于 2022-11-16 10:03:57 发布

厦门德仔

最新推荐文章于 2022-11-16 10:03:57 发布

阅读量1.4k

点赞数

分类专栏： # Css/Html 文章标签： javascript image function url hyperlink encoding

Css/Html 专栏收录该内容

51 篇文章 3 订阅

订阅专栏

查看文章

JavaScript案例精解（三）

2008年07月02日星期三 17:50

新闻幻灯片效果
门户网站的新闻幻灯片效果是很常见的，它通常每隔一定的时间切换一次新闻图片与新闻文本的显示，其中大部分是以Flash制作的。但我们可以用JavaScript和XML文件结合起来实现这种效果。
运行效果：

实现思路：用JavaScript和XML文件结合起来取出要轮转的幻灯片的信息，然后用setTime()函数使其每隔一段时间就调用函数一次，切换幻灯图片

XML代码：
<?xml version="1.0" encoding="utf-8" ?>
<newslist>
    <news text="欧锦赛：西班牙1:0击败德国44年后再成欧洲王者" image="images/news1.jpg" url="#"></news>
    <news text="陕西“周老虎”以“行政疏忽”结案" image="images/news2.jpg" url="#"></news>
    <news text="赖斯赞扬中国地震救援和重建工作" image="images/news3.jpg" url="#"></news>
</newslist>

text:新闻幻灯显示的文本。
image：新闻幻灯显示的图片。
url：点击新闻图片要转去的URL地址

HTML代码：
<div>
    
    <div id="newsshow" style="width:300px;">
        
        <a id="hp" href="#"><img border=0 style="width;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>

JavaScript代码：
<script language="javascript">
var hyperlink = document.getElementById("hp"); //超链接对象
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 = " "+(i+1)+" ";
        sp.style.cursor="hand";

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

连续滚动新闻图片
运行效果：

实现思路：用marquee标签实现的新闻的滚动时会出现一段空白的内容，我们可以用JavaScrip来控制新闻图片的连续滚动。
建立一个一行两列的table表格，用代码读取XML文件向其中一个单元格中加载图片信息，然后再把第二个单元格的内容设为与第一个单元格的内容相同。
然后用setTimeout或setInterval使表格在容器中向左移动，如果发现scrollLeft超出单元格的宽度的时候，再把其scrollLeft宽度减去单元格的宽。(车延禄)

XML文件代码：
<?xml version="1.0" encoding="utf-8" ?>
<students>
    <student id="s1" image="images/stu1.gif" url="#"></student>
    <student id="s2" image="images/stu2.gif" url="#"></student>
    <student id="s3" image="images/stu3.gif" url="#"></student>
    <student id="s4" image="images/stu4.gif" url="#"></student>
</students>
id：新闻图片的id
image：新闻图片的路径
url：新闻图片要导航到的页面

HTML代码：
<div id="dd" style="width:260px; height:75px; overflow:hidden; ">
    <table>
    <tr><td id="td1"></td>
    <td id="td2"></td></tr>
    </table>
</div>

Javascript代码：
<script language="javascript">
var xmldoc = new ActiveXObject("Microsoft.XMLDOM");
xmldoc.async=false;
xmldoc.load("student.xml");
var root = xmldoc.documentElement;
//第一个单元格对象
var td1 = document.getElementById("td1");
//第二个单元格对象
var td2 = document.getElementById("td2");
//表格的容器div
var dd = document.getElementById("dd");
//把相应的图片信息拼成table表格，并放入第一个单元格中
var intable="<table><tr>"
for(var i=0;i<root.childNodes.length;i++)
{
    intable += "<td><img src='";
    intable += root.childNodes[i].attributes[1].text;
    intable += "'/></td>";
}
intable += "</tr></table>"
td1.innerHTML = intable;
//把第一个单元格中的内容设置到第二个单元格中
td2.innerHTML = td1.innerHTML;

//滚动函数
function beginscroll()
{
    //当滚动过第二个单元格的时候，再回到初始情况
    if(td2.offsetWidth <= dd.scrollLeft)
    {
        dd.scrollLeft -= td1.offsetWidth;
    }
    else
    {
        dd.scrollLeft++;
    }
}
var scrolling = window.setInterval(beginscroll,50);

//容器对象的事件
dd.οnmοuseοver=function()
{
    //当鼠标悬停的时候，停止滚动
    window.clearInterval(scrolling);
};
dd.onmouseout = function()
{
    //当鼠标离开的时候继续滚动(车延禄)
    scrolling = window.setInterval(beginscroll,50);
};
</script>

厦门德仔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript案例精解（三）

var objmain = document.getElementById("main");function updatesize(){ var bodyw = window.document.body.offsetWidth; if(bodyw = 1016) objmain.style.width="996px"; else objmain.style.width="100
复制链接

扫一扫