|
编程（Programming）是编定程序的中文简称，就是让计算机代码解决某个问题，对某个计算体系规定一定的运算方式，使计算体系按照该计算方式运行，并最终得到相应结果的过程。为了使计算机能够理解（understand）人的意图，人类就必须将需解决的问题的思路、方法和手段通过计算机能够理解的形式告诉计算机，使得计算机能够根据人的指令一步一步去工作，完成某种特定的任务。这种人和计算体系之间交流的过程就是编程。 【实例名称】 JS实现多幅图片分页滚动显示 【实例描述】 本例可用于图片新闻的展示，通过两个div控件循环显示所有的图片。可修改本例中的代码调整图片滚动的速度。 【实现代码】 <html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>标题页-本站（www.xue51.com）</title>
<SCRIPT language="JavaScript">
var scrollerwidth=90 //指定div的高度
var scrollerheight=32 //指定div的宽度
var scrollerbgcolor='white'
var pausebetweenimages=3000 //图片的间隔时间，默认为3秒。
//带链接的图片，存放在数组中
var slideimages=new Array()
slideimages[0]='<A href="http://www.baidu.com" target=_blank>
<IMG alt=百度搜索 border=0
height=40 src=http://www.baidu.com/img/logo.gif width=100></A>'
slideimages[1]='<A href=http://www.google.cn target=_blank>
<IMG alt=google搜索 border=0 height=40
src=http://www.google.cn/intl/zh-CN/images/logo_cn.gif width=100></A>'
slideimages[2]='<A href=# target=_blank>
<IMG alt=广告位置为你准备 border=0 height=40 src="" width=100></A>'
slideimages[3]='<A href=http://www.google.cn target=_blank>
<IMG alt=google搜索 border=0 height=40
src=http://www.google.cn/intl/zh-CN/images/logo_cn.gif width=100></A>'
if (slideimages.length>1)
i=2 //初始化一个变量，用来做图片数组的索引
else
i=0
function move1(mydiv)
{
tdiv=eval(mydiv) //获取div对象
if (tdiv.style.pixelTop>0&&tdiv.style.pixelTop<=4){
//判断div的y坐标
tdiv.style.pixelTop=0
//指定div的y坐标
setTimeout("move1(tdiv)",pausebetweenimages)
//设置转换的时间间隔
setTimeout("move2(secondDiv)",pausebetweenimages)
return
}
if (tdiv.style.pixelTop>=tdiv.offsetHeight*-1){
tdiv.style.pixelTop-=5
//div开始往上滚动
setTimeout("move1(tdiv)",100)
}
else{
tdiv.style.pixelTop=scrollerheight
//指定div的高度
tdiv.innerHTML=slideimages[i]
//将图片显示在div中
if (i==slideimages.length-1 )
//如果已经循环到底，再从第一张开始循环
i=0
else
i++
}
}
function move2(mydiv)
{
tdiv2=eval(mydiv)
//获取第二个div
if (tdiv2.style.pixelTop>0&&tdiv2.style.pixelTop<=4){
//判断div的y坐标
tdiv2.style.pixelTop=0
//指定div的y坐标
setTimeout("move2(tdiv2)",pausebetweenimages)
//设置转换的时间间隔
setTimeout("move1(firstDiv)",pausebetweenimages)
return
}
if (tdiv2.style.pixelTop>=tdiv2.offsetHeight*-1){
tdiv2.style.pixelTop-=5
//第二个div开始向上滚动
setTimeout("move2(secondDiv)",100)
}
else{
tdiv2.style.pixelTop=scrollerheight
//指定第二个div的高度
tdiv2.innerHTML=slideimages[i]
//将图片显示在div中
if (i==slideimages.length -1)
//如果已经循环到底，再从第一张开始循环
i=0
else
i++
}
}
function startscroll()
//调用实现div层移动的方法
{
if (document.all){
move1(firstDiv)
secondDiv.style.top=scrollerheight
//设置第二章图片的位置
}
}
window.onload=startscroll
//窗体一架载，便开始显示图片
</SCRIPT>
</head>
<body>
<SCRIPT language="JavaScript">
if (document.all){
document.writeln('<span id="main2" style="position:relative;
width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hiden;
background-color:'+scrollerbgcolor+'">')
document.writeln('<div style="position:absolute;
width:'+scrollerwidth+';height:'+scrollerheight+';
clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0;top:0">')
document.writeln('<div id="firstDiv"
style="position:absolute;width:'+scrollerwidth+';left:0;top:1;">')
document.write(slideimages[0])
document.writeln('</div>')
document.writeln('<div id="secondDiv"
style="position:absolute;width:'+scrollerwidth+';left:0;top:0">')
document.write(slideimages[1])
document.writeln('</div>')
document.writeln('</div>')
document.writeln('</span>')
}
</SCRIPT>
</body>
</html>
【运行效果】 【难点剖析】 本例重点是使用两个diV循环显示所有的图片。为了屏蔽diV的图层，需要将窗体的背景色设置为“white”(白色)。然后将第一个div的Y坐标设置为“1”，指定时间过后再让此div的y坐标自动减小，实现图层上移的效果。然后设置第二个div的y坐标，实现第二张图片的显示，依次循环显示所有的图片。 【源码下载】 为了JS代码的准确性，请点击：JS实现多幅图片分页滚动显示 进行本实例源码下载 使用编程语言写的程序，由于每条指令都对应计算机一个特定的基本动作，所以程序占用内存少、执行效率高。 |
温馨提示：喜欢本站的话，请收藏一下本站！
本站发布的Win7纯净版系统、Win10纯净版和XP纯净版系统仅为个人学习测试使用，请在下载后24小时内删除，不得用于任何商业用途，否则后果自负，请支持购买微软正版软件！
本站所有资源全部来自于网络资源,如侵犯到您的权益,请及时通知我们(),我们会及时处理.
Copyright © 2018-2020 萝卜系统下载站 手机站 关于本站
