用JS实现图片轮换效果-公告栏 发布者: spid 2017年05月21日 围观次 点赞:3 超漂亮的JS图片公告栏,滚动效果真的不错哦! <!--{cke_protected}%3Cscript%20language%3D%22JavaScript1.2%22%3E%20%0A%3C!%2D%2D%20%0A%2F*%E8%AE%BE%E7%BD%AE%E4%B8%8B%E9%9D%A2%E7%9A%84%E5%8F%82%E6%95%B0%E3%80%82%20%E8%AE%BE%E7%BD%AEscrollerwidth%E5%92%8Cscrollerheight%E5%8F%82%E6%95%B0%EF%BC%8C%E8%AE%BE%E7%BD%AE%E6%88%90%E6%BB%9A%E5%8A%A8%E6%98%BE%E7%A4%BA%E7%9A%84%E5%9B%BE%E7%89%87%E4%B8%AD%E5%B0%BA%E5%AF%B8%E6%9C%80%E5%A4%A7%E7%9A%84%E3%80%82*%2F%0Avar%20scrollerwidth%3D970%0Avar%20scrollerheight%3D32%0Avar%20scrollerbgcolor%3D'white'%0A%2F%2F%E4%BF%AE%E6%94%B9%E4%B8%8B%E9%9D%A2%E7%9A%84%E6%AF%8F%E4%B8%AA%E5%9B%BE%E9%97%B4%E6%9A%82%E5%81%9C%E6%97%B6%E9%97%B4%EF%BC%8C%E6%9C%AC%E4%BE%8B%E4%B8%BA3%E7%A7%92%E3%80%82%0Avar%20pausebetweenimages%3D3000%0A%2F%2F%E6%94%B9%E5%8F%98%E4%B8%8B%E9%9D%A2%E7%9A%84%E5%9B%BE%E5%83%8F%E5%9C%B0%E5%9D%80%EF%BC%8C%E5%A6%82%E6%9E%9C%E5%B8%8C%E6%9C%9Blogo%E9%83%BD%E6%98%AF%E5%B8%A6%E8%BF%9E%E6%8E%A5%E7%9A%84%EF%BC%8C%E5%8F%AA%E8%A6%81%E5%B0%86%23%E6%94%B9%E4%B8%BA%E7%9B%B8%E5%BA%94%E7%9A%84%E9%93%BE%E6%8E%A5%E5%9C%B0%E5%9D%80%E3%80%82%0Avar%20slideimages%3Dnew%20Array()%0Aslideimages%5B0%5D%3D'%3Cimg%20src%3D%22http%3A%2F%2Fwww.bnxb.com%2Fimages%2F0059.gif%22%20border%3D0%22%3E'%0Aslideimages%5B1%5D%3D'%3Cimg%20src%3D%22http%3A%2F%2Fwww.bnxb.com%2Fimages%2F0059.gif%22%20border%3D0%22%3E'%0Aslideimages%5B2%5D%3D'%3Cimg%20src%3D%22http%3A%2F%2Fwww.bnxb.com%2Fimages%2F0059.gif%22%20border%3D0%22%3E'%0A%0A%2F%2F%2F%2F%2F%2F%E4%B8%8B%E9%9D%A2%E7%9A%84%E8%A1%8C%E4%B8%8D%E8%A6%81%E7%BC%96%E8%BE%91%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%0Aif%20(slideimages.length%3E1)%0Ai%3D2%0Aelse%0Ai%3D0%0Afunction%20move1(whichlayer)%7B%0Atlayer%3Deval(whichlayer)%0Aif%20(tlayer.top%3E0%26%26tlayer.top%3C%3D5)%7B%0Atlayer.top%3D0%0AsetTimeout(%22move1(tlayer)%22%2Cpausebetweenimages)%0AsetTimeout(%22move2(document.main.document.second)%22%2Cpausebetweenimages)%0Areturn%0A%7D%0Aif%20(tlayer.top%3E%3Dtlayer.document.height*-1)%7B%0Atlayer.top-%3D5%0AsetTimeout(%22move1(tlayer)%22%2C100)%0A%7D%0Aelse%7B%0Atlayer.top%3Dscrollerheight%0Atlayer.document.write(slideimages%5Bi%5D)%0Atlayer.document.close()%0Aif%20(i%3D%3Dslideimages.length-1)%0Ai%3D0%0Aelse%0Ai%2B%2B%0A%7D%7D%0Afunction%20move2(whichlayer)%7B%0Atlayer2%3Deval(whichlayer)%0Aif%20(tlayer2.top%3E0%26%26tlayer2.top%3C%3D5)%7B%0Atlayer2.top%3D0%0AsetTimeout(%22move2(tlayer2)%22%2Cpausebetweenimages)%0AsetTimeout(%22move1(document.main.document.first)%22%2Cpausebetweenimages)%0Areturn%0A%7D%0Aif%20(tlayer2.top%3E%3Dtlayer2.document.height*-1)%7B%0Atlayer2.top-%3D5%0AsetTimeout(%22move2(tlayer2)%22%2C100)%0A%7D%0Aelse%7B%0Atlayer2.top%3Dscrollerheight%0Atlayer2.document.write(slideimages%5Bi%5D)%0Atlayer2.document.close()%0Aif%20(i%3D%3Dslideimages.length-1)%0Ai%3D0%0Aelse%0Ai%2B%2B%0A%7D%7D%0Afunction%20move3(whichdiv)%7B%0Atdiv%3Deval(whichdiv)%0Aif%20(tdiv.style.pixelTop%3E0%26%26tdiv.style.pixelTop%3C%3D5)%7B%0Atdiv.style.pixelTop%3D0%0AsetTimeout(%22move3(tdiv)%22%2Cpausebetweenimages)%0AsetTimeout(%22move4(second2)%22%2Cpausebetweenimages)%0Areturn%0A%7D%0Aif%20(tdiv.style.pixelTop%3E%3Dtdiv.offsetHeight*-1)%7B%0Atdiv.style.pixelTop-%3D5%0AsetTimeout(%22move3(tdiv)%22%2C100)%0A%7D%0Aelse%7B%0Atdiv.style.pixelTop%3Dscrollerheight%0Atdiv.innerHTML%3Dslideimages%5Bi%5D%0Aif%20(i%3D%3Dslideimages.length-1)%0Ai%3D0%0Aelse%0Ai%2B%2B%0A%7D%0A%7D%0Afunction%20move4(whichdiv)%7B%0Atdiv2%3Deval(whichdiv)%0Aif%20(tdiv2.style.pixelTop%3E0%26%26tdiv2.style.pixelTop%3C%3D5)%7B%0Atdiv2.style.pixelTop%3D0%0AsetTimeout(%22move4(tdiv2)%22%2Cpausebetweenimages)%0AsetTimeout(%22move3(first2)%22%2Cpausebetweenimages)%0Areturn%0A%7D%0Aif%20(tdiv2.style.pixelTop%3E%3Dtdiv2.offsetHeight*-1)%7B%0Atdiv2.style.pixelTop-%3D5%0AsetTimeout(%22move4(second2)%22%2C100)%0A%7D%0Aelse%7B%0Atdiv2.style.pixelTop%3Dscrollerheight%0Atdiv2.innerHTML%3Dslideimages%5Bi%5D%0Aif%20(i%3D%3Dslideimages.length-1)%0Ai%3D0%0Aelse%0Ai%2B%2B%0A%7D%7D%0Afunction%20startscroll()%7B%0Aif%20(document.all)%7B%0Amove3(first2)%0Asecond2.style.top%3Dscrollerheight%0A%7D%0Aelse%20if%20(document.layers)%7B%0Amove1(document.main.document.first)%0Adocument.main.document.second.top%3Dscrollerheight%2B5%0Adocument.main.document.second.visibility%3D'show'%0A%7D%7D%0Awindow.onload%3Dstartscroll%0A%2F%2F%2D%2D%3E%0A%3C%2Fscript%3E--> <ilayer id="main" width="&{scrollerwidth};" height="&{scrollerheight};" bgcolor="&{scrollerbgcolor};"> <layer id="first" left="0" top="1" width="&{scrollerwidth};"> <!--{cke_protected}%3Cscript%20language%3D%22JavaScript1.2%22%3E%0Aif%20(document.layers)%0Adocument.write(slideimages%5B0%5D)%0A%3C%2Fscript%3E--> </layer> <layer id="second" left="0" top="0" width="&{scrollerwidth};" visibility="hide"> <!--{cke_protected}%3Cscript%0Alanguage%3D%22JavaScript1.2%22%3E%0Aif%20(document.layers)%0Adocument.write(slideimages%5B1%5D)%0A%3C%2Fscript%3E--> </layer> </ilayer> <p><!--{cke_protected}%3Cscript%20language%3D%22JavaScript1.2%22%3E%0A%3C!%2D%2D%20%0Aif%20(document.all)%7B%0Adocument.writeln('%3Cspan%20id%3D%22main2%22%20style%3D%22position%3Arelative%3Bwidth%3A'%2Bscrollerwidth%2B'%3Bheight%3A'%2Bscrollerheight%2B'%3Boverflow%3Ahiden%3Bbackground-color%3A'%2Bscrollerbgcolor%2B'%22%3E')%0Adocument.writeln('%3Cdiv%20style%3D%22position%3Aabsolute%3Bwidth%3A'%2Bscrollerwidth%2B'%3Bheight%3A'%2Bscrollerheight%2B'%3Bclip%3Arect(0%20'%2Bscrollerwidth%2B'%20'%2Bscrollerheight%2B'%200)%3Bleft%3A0%3Btop%3A0%22%3E')%0Adocument.writeln('%3Cdiv%20id%3D%22first2%22%20style%3D%22position%3Aabsolute%3Bwidth%3A'%2Bscrollerwidth%2B'%3Bleft%3A0%3Btop%3A1%3B%22%3E')%0Adocument.write(slideimages%5B0%5D)%0Adocument.writeln('%3C%2Fdiv%3E')%0Adocument.writeln('%3Cdiv%20id%3D%22second2%22%20style%3D%22position%3Aabsolute%3Bwidth%3A'%2Bscrollerwidth%2B'%3Bleft%3A0%3Btop%3A0%22%3E')%0Adocument.write(slideimages%5B1%5D)%0Adocument.writeln('%3C%2Fdiv%3E')%0Adocument.writeln('%3C%2Fdiv%3E')%0Adocument.writeln('%3C%2Fspan%3E')%0A%7D%0A%2F%2F%2D%2D%3E%3C%2Fscript%3E--> 提示:您可以先修改部分代码再运行 顶(3) 踩(0) JS 【搜索相关内容】[打印] [关闭] 上一篇:jQuery基础入门 下一篇:漂亮的滑动图片效果Javascript+CSS 您可能还会对下面的文章感兴趣: 相关文章 1 jquery实现多选框 全选 取消全选 自动勾选 自动去除勾选状态 2 jquery选项卡点选切换图片 点选按钮切换不同图片来回切换 3 a标签实现form POST提交数据 onclick提交数据 4 使用纯真IP数据库实现根据访客不同国别跳转不同页面 ajax+json读取跳转 5 JQuery实现点击加减按钮数字递增递减 并可直接输入数字提交 6 QQ网页在线客服实现方法 QQ客户端手机网页点击唤醒聊天 QQ在线客服代码 最新评论