波斯马BOSSMA Information Technology

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

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

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

水平滚动和垂直滚动的代码已经有很多了,这篇文章可以看成是多余的。不过还是有几个亮点: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
    已经处理,请重新下载

  2. 603316800 0楼:

    ie8 加上这句话就不行了

  3. .Ghost 0楼:

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

发表评论