前几天遇到一个图片滚动的问题,平实写的滚动都是一次滚动,首位不想接,下面的例子可以解决这个问题,首尾无缝相接滚动,可以向左滚动,也可以向右滚动。下面就是例子的代码。图片省略,样式省略。
详情请访问:http://www.walkerjava.com/thread-153-1-1.html
html代码
- <div id="colee_right" style="white-space: nowrap; overflow: hidden;">
- <table cellpadding="0" cellspacing="0" border="0" style="border: none;">
- <tr>
- <td id="colee_right1" valign="top" align="center" style="border: none;">
- <table class="rolltable" cellpadding="0" cellspacing="0" border="0" style="border: none;">
- <tr align="center">
- <td>
- <img class="title_img" src="images/new_dedecms.gif" title="织梦内容管理系统" />
- </td>
- <td>
- <img class="title_img" src="images/new_discuz.gif" title="Discuz!社区论坛" />
- </td>
- <td>
- <img class="title_img" src="images/new_phpcms.gif" title="phpcms内容管理系统" />
- </td>
- <td>
- <img class="title_img" src="images/new_dvbbs.gif" title="动网论坛" />
- </td>
- <td>
- <img class="title_img" src="images/new_ecms.gif" title="帝国管理系统" />
- </td>
- <td>
- <img class="title_img" src="images/new_shopex.gif" title="shopex专业网店系统" />
- </td>
- <td>
- <img class="title_img" src="images/new_joekoe.gif" title="乔客内容管理系统" />
- </td>
- <td>
- <img class="title_img" src="images/new_phpwind.gif" title="phpwind内容管理系统" />
- </td>
- <td>
- <img class="title_img" src="images/new_pjblog.gif" title="中文个人博客系统程序" />
- </td>
- <td>
- <img class="title_img" src="images/new_oblog.gif" title="oblog博客系统" />
- </td>
- <td>
- <img class="title_img" src="imagesnew_dvnet.gif" title="动网内容管理系统" />
- </td>
- </tr>
- </table>
- </td>
- <td id="colee_right2" valign="top" style="border: none;"></td>
- </tr>
- </table>
- </div>
复制代码
javascript部分
- var speed = 30
- //速度数值越大速度越慢
- var colee_right2 = document.getElementById("colee_right2");
- var colee_right1 = document.getElementById("colee_right1");
- var colee_right = document.getElementById("colee_right");
- colee_right2.innerHTML = colee_right1.innerHTML;
- function Marquee4() {
- // 控制从右向左滚动
- if (colee_right.scrollLeft >= colee_right2.offsetWidth)
- colee_right.scrollLeft = 0;
- else {
- colee_right.scrollLeft++;
- }
- // 控制从左向右滚动
- /*
- if (colee_right.scrollLeft <= 0)
- colee_right.scrollLeft += colee_right2.offsetWidth;
- else {
- colee_right.scrollLeft--;
- }*/
- }
- var MyMar4 = setInterval(Marquee4, speed);
- colee_right.onmouseover = function() {
- clearInterval(MyMar4);
- }
- colee_right.onmouseout = function() {
- MyMar4 = setInterval(Marquee4, speed);
- }
分享到:
相关推荐
marquee一款非常NB的插件可以实现无缝滚动上下左右都可以。使用简单操作容易
绝对好用 部分代码如下: <script> var speed=30 demo2.innerHTML=demo1.innerHTML function Marquee(){ if(demo2.offsetTop-
MARQUEE属性与用法,能实现无缝循环滚动文字,上下,左右都可以
主要介绍了javascript实现状态栏文字首尾相接循环滚动的方法,实例分析了javascript定时函数及页面元素属性操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
js原生图片上下无缝滚动 页面经常用到的效果
跑马灯首尾相接无缝隙.js
部分代码如下: var speed=1 demo2.innerHTML=demo1.innerHTML function Marquee(){ if(demo2.offsetWidth-demo.scrollLeft) demo.scrollLeft-=demo1.offsetWidth else{ demo.scrollLeft++ } } var ...
大致内容: 1、默认向左滚动展示; 2、点击左右箭头改变展示方向; 3、点击左右箭头改变展示速度; 4、鼠标移至div滚动停止; 5、首尾循环无缝滚动展示。 修改内容: 1、ie杂项打开;2、下图片不滚动
repeater动态首尾相接显示图片,repeater读取数据库内容,绑定显示图片和标题,点击可跳转到详细页
下面小编就为大家带来一篇使用JS实现图片轮播的实例(前后首尾相接)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
部分代码如下: <script type="text/javascript"> var Marquee = function(id){ try{document.execCommand("BackgroundImageCache", false, true);}catch(e){}; var container = document.getElementById(id),...
可以使文字之间首尾连接,进行向上滚动,用了都说好啊,那么多的事啊
DRScrollerView:无限滚动轮播图--首尾相接方式
UIScrollview 图片无缝连续自动滚动 图片每隔2秒自动滚动一次
以下为大致内容: 1、默认向左滚动展示; 2、点击左右箭头改变展示方向; 3、点击左右箭头改变展示速度; 4、鼠标移至div滚动停止; 5、首尾循环无缝滚动展示。 Ps.做的不怎么专业,还请多多指教。
4个箭头首尾相接组成的4步骤PPT逻辑图示.pptx,4步骤PPT逻辑图示,由4个箭头首尾相接而成,每个步骤可配上文字和相应的Icon,内容显得较为丰富。
部分代码如下: tle>无标题文档</title> <style type="text/css"> <!-- TD {FONT-SIZE: 12px;} </style> </head>
是本人2007年进行的一项研究,当时网络上没有什么既精简又实用的循环滚动代码,所以就自己琢磨了段时间,最终找到这个办法
marquee无缝滚动想必大家都有见过,本文利用div+css+javascript也实现下类似的滚动且兼容firefox,喜欢的朋友可以参考下