在图像滚动方面,jquery比javascript要出色许多。
以下是html代码:
<h1>EXAMPLE TWO</h1>
<div id="example2">
<span class="before"></span>
<ul>
<li><img src="images/example/example0.jpg" /></li>
<li><img src="images/example/example1.jpg" /></li>
<li><img src="images/example/example2.jpg" /></li>
<li><img src="images/example/example3.jpg" /></li>
<li><img src="images/example/example4.jpg" /></li>
<li><img src="images/example/example5.jpg" /></li>
<li><img src="images/example/example6.jpg" /></li>
<li><img src="images/example/example7.jpg" /></li>
</ul>
<span class="next"></span>
</div>
以下是css代码:
#example2{
position: relative;
width: 620px;
height: 200px;
overflow: hidden;
border: 10px solid gray;
}
@-moz-document url-prefix(){
#example2{
position: relative;
width: 620px;
height: 200px;
overflow: hidden;
border: 10px solid gray;
}
} /* 支持所有Gecko内核的浏览器 (包括Firefox) */
#example2 ul{
list-style: none;
width: 500%;/*这句话很牛叉!!*/
position: absolute;
padding: 0px;
left: 0px;
top: 0px;
border: 1px solid black;
}
#example2 ul li{
width: 300px;
float: left;
margin-right: 10px;
padding: 0px;
}
需要注意的是,为了让这多多张图可以排成一排,我们将ul的宽度设为500%,这样他就可以实现以下这个效果:
但是如果不希望她们排成一排,而是两个两个的排列,则只要将width这个属性删掉,他会出现以下这个状况:
具体怎样 应该看出来了把~~~~,但是 如果将width设为100%,就又是另一个情景了,如下
哈哈,就是这样~~~,总而言之,最好可以将他设置为500%。
另外还有一个特点,以为firefox和IE有差距,比如边框问题。从IE上设置边框为10px,ul 如上。那么ul.offsetLeft值正常,是0,但是,在Firefox上得到的是-10。从这可以看出,firefox的width宽度包括了边框,而IE的width宽度没有包括边框。为了区别对待,我们可以使用hack写法。仅仅针对firefox的hack写法是@-moz-document url-prefix() { .selector { property: value; } }.
jquery代码:
$(document).ready(function(){
var $ul=$("#example2>ul");
var step=50;
setInterval(sildeImage,"600");
function sildeImage(){
$ul.animate({left:"-="+step+"px"},"slow");
var left=$ul.offset().left; //获取left值
}
});