`
ilrxx
  • 浏览: 64854 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

js 滚动图片新闻效果

 
阅读更多
<script language="JavaScript1.2"> 

<!-- 

/*设置下面的参数。 设置scrollerwidth和scrollerheight参数,设置成滚动显示的图片中尺寸最大的。*/

var scrollerwidth=400

var scrollerheight=66

var scrollerbgcolor='white'

//修改下面的每个图间暂停时间,本例为3秒。

var pausebetweenimages=3000

//改变下面的图像地址,如果希望logo都是带连接的,只要将#改为相应的链接地址。

var slideimages=new Array()

slideimages[0]='<a href=#><img src="../image/05s.jpg" border=0"></a>'

slideimages[1]='<a href=#><img src="../image/04s.jpg" border=0"></a>'

slideimages[2]='<a href=#><img src="../image/03s.jpg" border=0"></a>'

slideimages[3]='<a href=#><img src="../image/02s.jpg" border=0"></a>'



//////下面的行不要编辑///////////////////////

if (slideimages.length>1)

i=2

else

i=0

function move1(whichlayer){

tlayer=eval(whichlayer)

if (tlayer.top>0&&tlayer.top<=5){

tlayer.top=0

setTimeout("move1(tlayer)",pausebetweenimages)

setTimeout("move2(document.main.document.second)",pausebetweenimages)

return

}

if (tlayer.top>=tlayer.document.height*-1){

tlayer.top-=5

setTimeout("move1(tlayer)",100)

}

else{

tlayer.top=scrollerheight

tlayer.document.write(slideimages[i])

tlayer.document.close()

if (i==slideimages.length-1)

i=0

else

i++

}}

function move2(whichlayer){

tlayer2=eval(whichlayer)

if (tlayer2.top>0&&tlayer2.top<=5){

tlayer2.top=0

setTimeout("move2(tlayer2)",pausebetweenimages)

setTimeout("move1(document.main.document.first)",pausebetweenimages)

return

}

if (tlayer2.top>=tlayer2.document.height*-1){

tlayer2.top-=5

setTimeout("move2(tlayer2)",100)

}

else{

tlayer2.top=scrollerheight

tlayer2.document.write(slideimages[i])

tlayer2.document.close()

if (i==slideimages.length-1)

i=0

else

i++

}}

function move3(whichdiv){

tdiv=eval(whichdiv)

if (tdiv.style.pixelTop>0&&tdiv.style.pixelTop<=5){

tdiv.style.pixelTop=0

setTimeout("move3(tdiv)",pausebetweenimages)

setTimeout("move4(second2)",pausebetweenimages)

return

}

if (tdiv.style.pixelTop>=tdiv.offsetHeight*-1){

tdiv.style.pixelTop-=5

setTimeout("move3(tdiv)",100)

}

else{

tdiv.style.pixelTop=scrollerheight

tdiv.innerHTML=slideimages[i]

if (i==slideimages.length-1)

i=0

else

i++

}

}

function move4(whichdiv){

tdiv2=eval(whichdiv)

if (tdiv2.style.pixelTop>0&&tdiv2.style.pixelTop<=5){

tdiv2.style.pixelTop=0

setTimeout("move4(tdiv2)",pausebetweenimages)

setTimeout("move3(first2)",pausebetweenimages)

return

}

if (tdiv2.style.pixelTop>=tdiv2.offsetHeight*-1){

tdiv2.style.pixelTop-=5

setTimeout("move4(second2)",100)

}

else{

tdiv2.style.pixelTop=scrollerheight

tdiv2.innerHTML=slideimages[i]

if (i==slideimages.length-1)

i=0

else

i++

}}

function startscroll(){

if (document.all){

move3(first2)

second2.style.top=scrollerheight

}

else if (document.layers){

move1(document.main.document.first)

document.main.document.second.top=scrollerheight+5

document.main.document.second.visibility='show'

}}

window.onload=startscroll

//-->

</script>

<ilayer id="main" width="&{scrollerwidth};" height="&{scrollerheight};" bgcolor="&{scrollerbgcolor};">

<layer id="first" left="0" top="1" width="&{scrollerwidth};">

<script language="JavaScript1.2">

if (document.layers)

document.write(slideimages[0])

</script>

</layer>

<layer id="second" left="0" top="0" width="&{scrollerwidth};" visibility="hide">

<script

language="JavaScript1.2">

if (document.layers)

document.write(slideimages[1])

</script>

</layer>

</ilayer>





<p><script language="JavaScript1.2">

<!-- 

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="first2" style="position:absolute;width:'+scrollerwidth+';left:0;top:1;">')

document.write(slideimages[0])

document.writeln('</div>')

document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0;top:0">')

document.write(slideimages[1])

document.writeln('</div>')

document.writeln('</div>')

document.writeln('</span>')

}

//-->

</script> 
分享到:
评论

相关推荐

    滚动显示图片js效果

    本篇将深入讲解如何使用JavaScript(包括jQuery库)和自定义的MsClass来实现图片滚动效果。 首先,JavaScript(简称JS)是一种轻量级的脚本语言,常用于网页交互和动态效果的实现。jQuery是基于JS的库,简化了DOM...

    javascript 实现新闻咨询图片滚动效果

    javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询...

    网站首页图片新闻滚动JS脚本

    "网站首页图片新闻滚动JS脚本"是用于实现这一功能的关键技术,主要涉及到JavaScript语言以及前端网页动态效果的实现。 JavaScript,简称JS,是一种轻量级的解释型编程语言,主要用于网页和网络应用开发。在网页中,...

    滚动新闻,滚动图片,jquery滚动新闻,jqeury滚动图片

    在IT行业中,网页动态效果是提升用户体验的重要手段之一,而"滚动新闻"和"滚动图片"就是其中常见的视觉呈现方式。jQuery,一个广泛使用的JavaScript库,提供了强大的功能来实现这些效果。本文将深入探讨如何利用...

    滑轮新闻滚动代码

    总之,“滑轮新闻滚动代码”是网页动态效果的一种常见实现,通过JavaScript的DOM操作、定时器、事件监听等技术,结合CSS样式设计,可以创建出吸引用户的新闻滚动效果。不断学习和实践,你也能掌握这项技能,为你的...

    js图片滚动插件支持单排图片上下滚动、图片无缝滚动

    JavaScript 图片滚动插件是一种广泛应用于网页设计中的动态效果工具,它使得图片展示更加生动有趣。在网页设计中,图片滚动通常用于展示多张图片,尤其是对于产品展示、新闻更新或者图片滑块等场景,能有效提升用户...

    js经典效果,图片切换,无缝滚动,js菜单

    在本项目中,我们关注的是几个JavaScript的经典效果:图片切换、无缝滚动和JavaScript菜单。 1. 图片切换: 图片切换效果是网页设计中常见的元素,用于展示多张图片或内容。实现这一效果通常有两种常见方法:CSS3...

    Flash滚动新闻轮播效果

    "Flash滚动新闻轮播效果"是指利用Adobe Flash技术来设计的一种动态显示多条新闻或图片的方式,效仿了像新浪、新华网这样的大型新闻网站的图片新闻轮播功能。 Flash滚动新闻轮播效果的核心在于ActionScript,这是...

    DIV新闻、图片滚动效果,上下左右方向,简洁JavaScript示例,高浏览器兼容性

    "DIV新闻、图片滚动效果,上下左右方向,简洁JavaScript示例,高浏览器兼容性"是一个专注于使用JavaScript实现的DOM元素(尤其是DIV)滚动效果的教程或代码示例。这个示例旨在帮助开发者创建出具有新闻滚动、图片轮播等...

    js 滚动效果封装库

    MSClass 通用不间断滚动JS封装类 的使用说明: 该Js类可设置各种形式的滚动效果,可随意将您的产品图片、新闻等内容设置为滚动。 上下左右、整屏、间歇式、延时滚动==效果均可实现。兼容所有主流浏览器。。。。

    JS图片、新闻连续滚动

    在本文中,我们将深入探讨如何使用JavaScript来创建一个图片和新闻的连续滚动效果,这种效果常用于网站的相册展示和新闻更新。 首先,让我们了解“循环滚动”和“连续滚动”的概念。这两种滚动方式都是为了让内容...

    JavaScript图片连续滚动效果

    这种效果常用于页面顶部的滚动图片展示,图片会从下方逐渐滑入视图。实现这种效果的关键在于设置定时器和改变图片的位置。首先,可以将图片堆叠在一起,然后通过JavaScript定时调整最上方图片的位置,使其向上移动,...

    js代码 无缝滚动效果

    在本主题中,我们关注的是"js代码 无缝滚动效果",这是一种常见于网站顶部新闻滚动、轮播图或者产品展示等场景的技术。无缝滚动效果给予用户流畅且连续的视觉体验,仿佛图片或文本在不停滚动,没有明显的停顿或跳跃...

    HTML图片滚动效果

    使用这样的类,你可能只需要像下面这样创建一个滚动图片: ```javascript var marquee = new MarqueeScroll('my-scrolling-image', {direction: 'right', speed: 5}); ``` 这里,`MarqueeScroll`是类名,`my-...

    js实现图片无缝滚动或者文字滚动

    在本主题中,我们主要关注如何使用JS实现图片和文字的无缝滚动效果。 首先,无缝滚动的概念是让内容在到达视口顶部或底部时自动平滑地切换到下一个内容,给用户一种连续无断点的浏览体验。这种效果在网站中常见于...

    模仿幻灯片效果的滚动新闻.rar

    【标题】"模仿幻灯片效果的滚动新闻"所涉及的知识点主要集中在JavaScript(JS)技术上,尤其是关于网页动态效果的实现。幻灯片效果是网页设计中常见的一种交互式展示方式,它能以类似幻灯片的形式切换内容,为用户...

    js javascript 图片滑动新闻展示,鼠标控制图片左右滚动【转】

    在本案例中,“js javascript 图片滑动新闻展示,鼠标控制图片左右滚动”是一个使用JavaScript实现的动态图片展示功能,它允许用户通过鼠标操作来控制图片的左右滚动,为网站增添生动性和用户体验。 首先,我们要...

    ScrollNews 新闻无缝循环滚动切换特效 ScrollNews 新闻无缝循环滚动切换特效,不错的滚动效果,压缩包内的示例包括横向和竖向两种形式的滚动,本滚动结合图片和文字,运用CSS和Javascript技术,将滚动的内容扩展至DIV标签,也就是控制某个区域的滚动,而并非是一行或几个简单图片构成的滚动。

    ScrollNews 新闻无缝循环滚动切换特效,不错的滚动效果,压缩包内的示例包括横向和竖向两种形式的滚动,本滚动结合图片和文字,运用CSS和Javascript技术,将滚动的内容扩展至DIV标签,也就是控制某个区域的滚动,而...

    web页面效果——JS实现图片滚动

    "JS实现图片滚动"是一种常见的网页特效,尤其适用于展示图像集或者新闻轮播。本文将深入探讨如何使用JavaScript来实现图片滚动效果,以及这一过程中涉及的关键知识点。 首先,我们要理解JavaScript(简称JS)在网页...

    图片滚动,文字滚动,图片横竖滚动,超好的横竖同时无缝隙滚动代码,js,滚动特效

    标题提到的"图片滚动,文字滚动,图片横竖滚动,超好的横竖同时无缝隙滚动代码,js,滚动特效"是网页设计中的常见技术,主要用于创建引人注目的交互式内容。这种技术主要依赖于JavaScript,一种广泛用于客户端网页...

Global site tag (gtag.js) - Google Analytics