- <!--//向左滚动代码开始-->
- <style type="text/css">
- body{margin:0px auto; padding:0px;}
- ul,li{margin:0px; padding:0px;list-style:none;}
- .sqBorder {width:602px; height:31px; padding:1px; border:0px #000000 solid; background:#555555;}
- .scroll_div {width:600px; height:31px;margin:0 auto; overflow: hidden; white-space: nowrap; background:#ffffff;}
- .scroll_div img {width:88px;height:31px;border: 0;margin: auto 8px; border:1px #efefef solid;}
- #scroll_begin, #scroll_end, #scroll_begin ul, #scroll_end ul, #scroll_begin ul li, #scroll_end ul li{display:inline;}/*设置ul和li横排*/
- </style>
- <script language="javascript">
- function ScrollImgLeft(){
- var speed=20
- var scroll_begin = document.getElementById("scroll_begin");
- var scroll_end = document.getElementById("scroll_end");
- var scroll_div = document.getElementById("scroll_div");
- scroll_end.innerHTML=scroll_begin.innerHTML
- function Marquee(){
- if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0)
- scroll_div.scrollLeft-=scroll_begin.offsetWidth
- else
- scroll_div.scrollLeft++
- }
- var MyMar=setInterval(Marquee,speed)
- scroll_div.οnmοuseοver=function() {clearInterval(MyMar)}
- scroll_div.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
- }
- </script>
- <h2 align="center">向左滚动</h2>
- <div style="text-align:center">
- <div class="sqBorder">
- <!--#####滚动区域#####-->
- <div id="scroll_div" class="scroll_div">
- <div id="scroll_begin">
- <ul>
- <li><a href="http://www.huangchao.net/"><img src="/Article/UploadFiles/200803/20080311233030705.gif" alt="『皇朝DJ联盟』" /></a></li>
- <li><a href="http://www.huangchao.net/"><img src="/Article/UploadFiles/200803/20080311233030705.gif" alt="『皇朝DJ联盟』" /></a></li>
- <li><a href="http://www.huangchao.net/"><img src="/Article/UploadFiles/200803/20080311233052332.gif" alt="『皇朝DJ联盟』" /></a></li>
- <li><a href="http://www.huangchao.net/"><img src="/Article/UploadFiles/200803/20080311233052332.gif" alt="『www.huangchao.net』" /></a></li>
- <li><a href="http://www.huangchao.net/"><img src="/Article/UploadFiles/200803/20080311233052332.gif" alt="『皇朝DJ联盟』" /></a></li>
- <li><a href="http://www.huangchao.net/"><img src="/Article/UploadFiles/200803/20080311233052332.gif" alt="『www.huangchao.net』" /></a></li>
- <li><a href="http://www.huangchao.net/"><img src="/Article/UploadFiles/200803/20080311233052332.gif" alt="『皇朝DJ联盟』" /></a></li>
- <li><a href="http://www.huangchao.net/"><img src="/Article/UploadFiles/200803/20080311233052332.gif" alt="『www.huangchao.net』" /></a></li>
- <li><a href="http://www.huangchao.net/"><img src="/Article/UploadFiles/200803/20080311233052332.gif" alt="『皇朝DJ联盟』" /></a></li>
- <li><a href="http://www.huangchao.net/"><img src="/Article/UploadFiles/200803/20080311233052332.gif" alt="『www.huangchao.net』" /></a></li>
- </ul>
- </div>
- <div id="scroll_end"></div>
- </div>
- <!--#####滚动区域#####-->
- </div>
- <script type="text/javascript">ScrollImgLeft();</script>
- </div>
- <!--//向左滚动代码结束-->
- **********************************************************************************************************
- 向上滚动
- <!--//向上滚动代码开始-->
- <style type="text/css">
- body{margin:0px auto; padding:0px;}
- ul,li{margin:0px; padding:0px;list-style:none;}
- .sqBorder {width:80; height:182px; padding:1px; border:0x #000000 solid; background:#555555;}
- .scroll_div {width:80; height:180px; margin:0 auto; overflow: hidden; white-space: nowrap; background:#ffffff;}
- .scroll_div img {width:80;height:31;border:0;margin: 1px auto; border:0px #efefef solid;}
- </style>
- <script language="javascript">
- function ScrollImgTop(){
- var speed=20
- var scroll_begin = document.getElementById("scroll_begin");
- var scroll_end = document.getElementById("scroll_end");
- var scroll_div = document.getElementById("scroll_div");
- scroll_end.innerHTML=scroll_begin.innerHTML
- function Marquee(){
- if(scroll_end.offsetTop-scroll_div.scrollTop<=0)
- scroll_div.scrollTop-=scroll_begin.offsetHeight
- else
- scroll_div.scrollTop++
- }
- var MyMar=setInterval(Marquee,speed)
- scroll_div.οnmοuseοver=function() {clearInterval(MyMar)}
- scroll_div.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
- }
- </script>
- <h2 align="center">向上滚动</h2>
- <div style="text-align:center">
- <div class="sqBorder">
- <!--#####滚动区域#####-->
- <div id="scroll_div" class="scroll_div">
- <div id="scroll_begin">
- <ul>
- <li><a href="http://www.huangchao.net/"><img src="/Article/UploadFiles/200803/20080311233030705.gif" alt="『皇朝DJ联盟』" /></a></li>
- <li><a href="http://www.huangchao.net/"><img src="/Article/UploadFiles/200803/20080311233030705.gif" alt="『皇朝DJ联盟』" /></a></li>
- <li><a href="http://www.huangchao.net/"><img src="/Article/UploadFiles/200803/20080311233052332.gif" alt="『皇朝DJ联盟』" /></a></li>
- <li><a href="http://www.huangchao.net/"><img src="/Article/UploadFiles/200803/20080311233052332.gif" alt="『www.huangchao.net』" /></a></li>
- <li><a href="http://www.huangchao.net/"><img src="/Article/UploadFiles/200803/20080311233052332.gif" alt="『皇朝DJ联盟』" /></a></li>
- <li><a href="http://www.huangchao.net/"><img src="/Article/UploadFiles/200803/20080311233052332.gif" alt="『www.huangchao.net』" /></a></li>
- <li><a href="http://www.huangchao.net/"><img src="/Article/UploadFiles/200803/20080311233052332.gif" alt="『皇朝DJ联盟』" /></a></li>
- <li><a href="http://www.huangchao.net/"><img src="/Article/UploadFiles/200803/20080311233052332.gif" alt="『www.huangchao.net』" /></a></li>
- <li><a href="http://www.huangchao.net/"><img src="/Article/UploadFiles/200803/20080311233052332.gif" alt="『皇朝DJ联盟』" /></a></li>
- <li><a href="http://www.huangchao.net/"><img src="/Article/UploadFiles/200803/20080311233052332.gif" alt="『www.huangchao.net』" /></a></li>
- </ul>
- </div>
- <div id="scroll_end"></div>
- </div>
- <!--#####滚动区域#####-->
- </div>
- <script type="text/javascript">ScrollImgTop();</script>
- </div>
- <!--//向上滚动代码结束-->
- ********************************************************************************************************
- 文本向上滚动
- <!---滚动开始--><div id="demo" style="overflow:hidden;height:100px;width:230px; font-size:12px; line-height:20px;overflow:hidden;float:left">
- <div id=demo1>
- 皇朝DJ联盟 www.huangchao.net <br />
- 皇朝DJ联盟 www.huangchao.net <br />
- 皇朝DJ联盟 www.huangchao.net <br />
- 皇朝DJ联盟 www.huangchao.net <br />
- 皇朝DJ联盟 www.huangchao.net <br />
- 皇朝DJ联盟 www.huangchao.net <br />
- 皇朝DJ联盟 www.huangchao.net <br />
- 皇朝DJ联盟 www.huangchao.net <br />
- 皇朝DJ联盟 www.huangchao.net
- </div>
- <div id=demo2></div>
- </div>
- <script>
- var speed=40
- var demo=document.getElementById("demo");
- var demo2=document.getElementById("demo2");
- var demo1=document.getElementById("demo1");
- demo2.innerHTML=demo1.innerHTML
- function Marquee(){
- if(demo2.offsetTop-demo.scrollTop<=0)
- demo.scrollTop-=demo1.offsetHeight
- else{
- demo.scrollTop++
- }
- }
- var MyMar=setInterval(Marquee,speed)
- demo.οnmοuseοver=function() {clearInterval(MyMar)}
- demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
- </script>
- <!---滚动结束-->
图片无间断滚动JS实现代码
最新推荐文章于 2021-05-31 17:05:09 发布