CS4做文字无缝滚动代码，为什么看不见图片？ 附上代码，求指导

来源：蜘蛛抓取(WebSpider) 时间：2012-04-06 05:02 标签： 文字无缝滚动代码
还没有任何记录...
jquery图片无缝滚动js代码ul./li结构，一个页面可重用多个。注意无缝滚动js代码调用中的
$('.marquee').kxbdMarquee({ 这里面的
.marquee 可以换成你的 类名 或者是id名等。...
会滚动的新闻列表和图片滚动代码网页特效。就是说一个图文混排的新闻列表可以水平或者上下进行滚动。...
这个滚动字幕代码网页特效，实现了无缝水平滚动的文字滚动代码。你可以改造出更多滚动字幕代码效果。...
这段JS代码，实现无缝文字滚动代码，上下滚动和带停顿，兼容IE系列和火狐。同时可改造成图片滚动代码，或者是滚动字幕代码。...
自右向左无缝平滑滚动兼容IE6/IE7/IE8/火狐，自动滚动，鼠标滑过暂停滚动。带有图片和文字说明。表现与结构完全分离，JS代码极少。...
分三组的无缝滚动图片展示可点击左右滚动，适合产品展示，图片展示，影视展示等。兼容IE6/IE7/IE8/火狐。JavaScript代码（41）
& & 思路：设置两副重复的图，然后滚动到头的时候将ul的offsetLeft设置为0，但是每次只显示四个，所以看不见那一瞬间的变化，一切近乎完美，代码如下：
&!DOCTYPE HTML&
&meta charset=&utf-8&&
&title&&/title&
&style type=&text/css&&
*{margin:0;padding:0;}
#div1{width: 712height: 108margin:100position:background:overflow:}
#div1 ul{position:left: 0;top: 0;}
#div1 ul li{float:width:178height:108list-style:}
&script type=&text/javascript&&
window.onload=function(){
var oDiv=document.getElementById('div1');
var oUl=oDiv.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;//变成两副图，然后才能实现无缝滚动
oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';//随便获取一个li的宽度，这里用第一个代表计算出ul的长度
setInterval(function(){
if(oUl.offsetLeft&-oUl.offsetWidth/2){//offsetLeft是负数，而offsetWidth是一个最小大于0的数，所以加个-号才能进行比较
oUl.style.left='0';//当所有图片滚动完之后将left设置为0意味着后面无缝地接着第一张图片，这个过程如果看见两副图片就会看见有些变化，但实际上只会看见一副，所以几乎没有变化
oUl.style.left=oUl.offsetLeft-2+'px';//每次向左移动2px
&div id=&div1&&
&li&&img src=&images/1.jpg&/&&/li&
&li&&img src=&images/2.jpg&/&&/li&
&li&&img src=&images/3.jpg&/&&/li&
&li&&img src=&images/4.jpg&/&&/li&
效果图如下：
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：155278次
积分：3956
积分：3956
排名：第5892名
原创：232篇
评论：14条
文章：42篇
阅读：25210
文章：53篇
阅读：23786
文章：47篇
阅读：34281
(3)(4)(1)(1)(27)(2)(22)(21)(78)(27)(3)(8)(1)(9)(10)(6)(7)(4)(2)(4)JS实现文字图片无缝滚动 - 大神_经病 - 博客园
图片滚动的效果，本来打算用marquee做的，因为它是html自带的标签，写起来简单，但是有一个问题就是marquee不能实现，上网找了一些方法，发现marquee可以实现无缝，但要在IE环境下。
没办法，为了达到要求，自己又从网上找了一些相关的代码加以修改，最终实现了效果，现在把代码分享给大家，有问题还请大家多指正。
代码如下：
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
这里面需要注意的是，要加上我在style里面写的样式，另外两个注意点就是：里面的li不能float，最外围的xunhuan的高度要小于里面元素的高度，以足够它循环滚动。
例子是向上滚动的效果，如果想要向左滚动，做相应的改动即可。
阅读(...) 评论()

我要回帖

更多关于 文字无缝滚动代码 的文章

 

随机推荐