图像滚动-jquery

最新推荐文章于 2023-03-06 17:49:05 发布

luby_xu

最新推荐文章于 2023-03-06 17:49:05 发布

阅读量367

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/u011371064/article/details/38332945

版权

web前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

在图像滚动方面，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值
        }
    });