波斯马BOSSMA Information Technology

Jquery结合div+css实现图片水平横向不间断滚动效果

发布时间：2010年11月24日 / 分类：JavaScript / 24,111 次浏览 / 评论

关于实现滚动效果现在提供一个新的类库，功能更多，浏览器兼容性更强，点此移步过去看看。

水平滚动和垂直滚动的代码已经有很多了，这篇文章可以看成是多余的。不过还是有几个亮点：1、使用jquery；2、使用div+css；3、兼容IE、Firefox、Opera、Chrome；4、兼容XHTML 1.0? Transitional。

发布一个例子，点击下载。

直接看代码吧：

<html>
<head>
<title>单张图片循环滚动</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
//定时器间隔
var interval=30;

$(document).ready(
function(){
//用左侧的内容填充右侧
$("#right").html($("#left").html());
//启动定时器，定时执行leftloop函数
timename=setInterval("leftloop()",interval);
}
);

function leftloop(){
//判断是否左侧内容全部进入滚动条
//如果是，从新开始
if($("#left").outerWidth()-$("#content").scrollLeft()<=0){
   var left=$("#content").scrollLeft()-$("#left").outerWidth();
   $("#content").scrollLeft(left);
}else{
   var left=$("#content").scrollLeft()+1;
   $("#content").scrollLeft(left);
}
$("#foot").html("scrollLeft:"+$("#content").scrollLeft());
}
</script>
<style type="text/css">
/*兼容IE和其它浏览器，使并列的div不换行*/
.fordisplay{display:inline-block; zoom:1;}
.fordisplay{display:inline !ie}
.fordisplay{display:inline \9;}
</style>
</head>
<body>
<div id="title" style="width:1279px;height:210px;"><img src="1.jpg" /></div>
<!--//
使用display:inline;white-space:nowrap，使不换行。
使用overflow:hidden隐藏超出的部分。
//-->
<div id="content" style="width:1279px;overflow:hidden;white-space:nowrap;">
<div id="left" style="width:1340px;" class="fordisplay">
<ul style="display:inline;">
<li style="display:inline;float:left;"><img src="2.jpg" /></li>
<li style="display:inline;float:left;"><img src="2.jpg" /></li>
<li style="display:inline;float:left;"><img src="2.jpg" /></li>
<li style="display:inline;float:left;"><img src="2.jpg" /></li>
</ul>
</div><div id="right" style="width:1340px;" class="fordisplay"></div>
</div>
<div id="foot"></div>
</body>
</html>

注意id=”right”的div紧跟前边div，没有换行和空格，显示的时候就不会出现空格了。

关于inline-block产生间距的问题：

1）在父容器定义font-size:0px; 然后对定义display:inline-block的容器重新定义字体大小。此方法兼容FF跟IE，不兼容CHROME

2）在父容器定义letter-spacing:-4px; 然后对定义display:inline-block的容器重新定义letter-spacing:0px，“-4px”数值来自字体大小

3）把inline-block元素全部写在一行，去掉空格与换行。

上边的代码运行起来没什么问题，但是在XHTML 1.0标准下IE不能正常运行。改了半天，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>图片水平循环滚动</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
//定时器间隔
var interval=30;

$(document).ready(
function(){
//用左侧的内容填充右侧
$("#right").html($("#left").html());
//设置外部容器的宽度，防止IE下div换行
$("#content_body").outerWidth($("#left").outerWidth()*2);
//启动定时器，定时执行leftloop函数
timename=setInterval("leftloop()",interval);
}
);

function leftloop(){
//判断是否左侧内容全部进入滚动条
//如果是，从新开始
if($("#left").outerWidth()-$("#content").scrollLeft()<=0){
   var left=$("#content").scrollLeft()-$("#left").outerWidth();
   $("#content").scrollLeft(left);
}else{
   var left=$("#content").scrollLeft()+1;
   $("#content").scrollLeft(left);
}
$("#foot").html("scrollLeft:"+$("#content").scrollLeft());
}
</script>
<style type="text/css">
#title{height:50px;}
#content{width:1200px;height:606px;margin:0;overflow:hidden;white-space:nowrap;border:10px solid #cccccc;}
.fordisplay{margin:0;display:inline-block;zoom:1}/*所有浏览器*/
.fordisplay{display:inline\9;}/*IE8以及以下版本浏览器*/
.fordisplay ul{margin:0;padding:0;display:inline;font-size:0;}

/*伟大的google也不是每件事都做的好*/
@media screen and (-webkit-min-device-pixel-ratio:0)
{
 .fordisplay ul{
 letter-spacing:-6px;
  }
}
.fordisplay ul li{display:inline;letter-spacing:0}
</style>
</head>
<body>
<div id="title">图片水平循环滚动</div>
<div id="content">
<div id="content_body">
<div id="left">
<ul>
<li><img src="images/1.png" /></li>
<li><img src="images/2.png" /></li>
<li><img src="images/3.png" /></li>
<li><img src="images/4.png" /></li>
</ul>
</div><div id="right"></div>
</div>
</div>
<div id="foot"></div>
</body>
</html>
本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自波斯马，原文地址《Jquery结合div+css实现图片水平横向不间断滚动效果》

关键字:

建议订阅本站，及时阅读最新文章！
 【上一篇】 【下一篇】

目前有5 条评论

  1. bossma 0楼:

    @603316800
    已经处理，请重新下载

    2011-03-11 1:18 [回复]
  2. 603316800 0楼:

    ie8 加上这句话就不行了

    2011-03-10 9:36 [回复]
  3. .Ghost 0楼:

    这个不错，不过在IE8里面就没有滚动的效果了，不知道是IE8的scrollLeft()有问题还是JQ里面scrollLeft()的一个BUG

    2011-01-14 9:57 [回复]

发表评论

相关文章

国内AI资源汇总，AI聊天、AI绘画、AI写作、AI视频、AI设计、AI编程、AI音乐等，国内顺畅访问，无需科学上网。

扫码或点击进入：萤火AI大全

    文章分类
    最新评论